入力タイプ= 'レンジ'をカスタマイズする

Question

html5 入力タイプ=範囲を使用したいと思います。ユーザーがバー上の任意のポイントを直接クリックしたときにユーザーがカーソルをスライドさせないとスライダでのみ機能するようにします。

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

Answer 1

次のアプローチは、あなたが軌道に乗るかもしれません：

1. キャッシュ電流値とマウスアップイベントでマウスダウンイベント
2. 上のマウスの位置、場合マウスの位置はまだ同じです（つまり、クリック）、値をリセットします。

ような何か：https://codepen.io/anon/pen/QqJmaw

私はデフォルトの動作を変更することはお勧めしません、そして溶液を視覚的グリッチに苦しむかもしれない：ここで

$(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へのリンクです。それはあなたと大丈夫なら、あなたは解決策を試すことがあります。

- OPのコメント後に編集 -

を使用すると、視覚的なグリッチでOKではなく、より多くのハックのもの（おそらくない良いアイデア）を行う準備ができている場合は、あなたが非表示にする二次入力を使用することができます不具合https://codepen.io/anon/pen/aLQjdp