HTML5范围滑块值在使用jQuery(而不是UI)的过程中

Question

我使用默认的HTML5范围滑块。它是有效的，但有可能在移动中更改这个滑块的值吗（当鼠标按钮在范围栏上单击，鼠标滑动到任何一侧时）？重要提示：是否可以不使用jQueryUI，而只使用jQuery（或纯JS）？

HTML:

<input type="range" name="oc-max-price" id="oc-max-price" min="390" max="5000" step="10" value="5000">
<span id="oc-max-price-val">5000</span>

jQuery代码：

$('#oc-max-price').change(function () {
    var mP = $('#oc-max-price').val();
    $('#oc-max-price-val').text(mP);
    console.log(mP);
});

Answer 1

使用oninput

   $(document).ready(function(){
       $('#oc-max-price').on("input", function () {
        var mP = $('#oc-max-price').val();
        $('#oc-max-price-val').text(mP);
        console.log(mP);
    }); 
    });

纯JavaScript

var input = document.querySelector('#oc-max-price');
var messages = document.querySelector('#oc-max-price-val');
input.addEventListener('input', function()
{
    messages.textContent = input.value;
});

Answer 2

设置间隔：http://jsfiddle.net/2ej2m3kp/

 $('#oc-max-price').mousedown(
    setInterval(function () {
        var mP = $('#oc-max-price').val();
        $('#oc-max-price-val').text(mP);
        console.log(mP);
    }, 100));

Answer 3

所以，就像在mousemove&touchmove？

$('#oc-max-price').on('mousemove touchmove', function () {
    var mP = $(this).val();
    $('#oc-max-price-val').text(mP);
});

这是一把小提琴