Customize input type = 'range'

Question

Ich möchte html5 input type = Bereich so dass es nur auf Slider funktionieren sollte, wenn der Benutzer den Cursor nicht schiebt, wenn der Benutzer direkt auf einen Punkt auf der Leiste klickt.

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

Answer 1

Der folgende Ansatz könnte erhalten Sie gehen:

1. Cache den aktuellen Wert und die Mausposition auf Maus-down Ereignis
2. Auf Maus-up-Ereignis, wenn die Mausposition ist immer noch gleich (dh ein Klick), setzen Sie den Wert zurück.

Etwas wie:

$(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) 
     } 
    }) 
}) 

Hier ist ein Link zu einem codepen Arbeits: https://codepen.io/anon/pen/QqJmaw

Ich werde ändert das Standardverhalten nicht empfehlen, und die Lösung kann von einer visuellen Aussetzer. Wenn das für Sie in Ordnung ist, können Sie die Lösung versuchen.

- Herausgegeben nach OP Kommentar -

Wenn Sie nicht in Ordnung mit den visuellen Glitch sind und bereit sind, mehr Hacky Dinge zu tun (wahrscheinlich keine gute Idee), können Sie einen sekundären Eingang verwenden das verbergen Panne. Hier ist eine weitere Beispiel-Implementierung, immer noch mit einem sehr kleinen Fehler, wenn Sie bemerken können !: https://codepen.io/anon/pen/aLQjdp