2017-10-17 111 views
-1

我想要使用html5 輸入類型=範圍,這樣它應該只在用戶滑動光標時纔在滑塊上工作,而不是在用戶直接單擊工具欄上的任意點時使用。自定義輸入類型='範圍'

<input type="range" id="myRange" value="90">

+0

@Swellar這是一個社交平臺,唯一的目的是共享問題並獲得解決方案,如果有人已經在過去解決了這個問題。只是爲了讓問題容易理解和排序,沒有必要把所有東西都放在這裏。如果你不能解決問題,不要讓人們冷嘲熱諷,並且促使你的人做出了沒有嘗試的理論。每個人都來到這裏已經知道他們在這裏幫助其他人,所以我無法理解你的邏輯。 –

回答

1

以下方法可能讓你去:

  1. 緩存當前值和鼠標位置鼠標按下事件
  2. 在鼠標釋放事件,如果鼠標位置仍然相同(即點擊),重置該值。

喜歡的東西:

$(function() { 
    var lastValue = null; 
    var lastMousePos = null; 
    $('#myRange').on('mousedown', function(e) { 
     lastValue = e.target.value 
     lastMousePos = [e.pageX, e.pageY] 
    }) 
    $('#myRange').on('mouseup', function(e) { 
     mousePos = [e.pageX, e.pageY] 
     if(mousePos[0] == lastMousePos[0] && mousePos[1] == lastMousePos[1]) { 
     $(e.target).val(lastValue) 
     } 
    }) 
}) 

這裏是一個工作codepen鏈接:https://codepen.io/anon/pen/QqJmaw

,我不會建議改變默認行爲,並解決可能會從視覺干擾受到影響。如果你沒有問題,你可以嘗試解決方案。

- OP評論後編輯 - 如果你不能確定與視覺干擾,並準備做更多的東西哈克(可能不是一個好主意)

,您可以使用輔助輸入隱藏毛刺。下面是另一個示例實現,如果你能注意到,仍然有一個很小的故障:https://codepen.io/anon/pen/aLQjdp

+0

這工作正常,但它的運行不正常,我們可以做任何事情嗎? –