使用 jQuery（不是 UI）随时随地的 HTML5 范围滑块值答案

【问题标题】：HTML5 range slider values on the go using jQuery (not UI)使用 jQuery（不是 UI）随时随地的 HTML5 范围滑块值
【发布时间】：2015-02-15 02:56:56
【问题描述】：

我正在使用默认的 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);
});

【问题讨论】：

试试 .on('input', ....
查看纯JS解决方案的编辑答案。

标签： javascript jquery

【解决方案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;
});

【讨论】：

mousemove 不会触发 iPhone/iPad 或任何触控设备。所以我想input 还是更好。
我可以使用一堆（输入、触摸移动和鼠标移动）吗？或者可能是“mauvais ton”？
只看兼容性developer.mozilla.org/en-US/docs/Web/API/…。我认为它们在firefox 或IE 中不应该有任何问题，因为它完全受支持。问题可能取决于机器配置/情况。

【解决方案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));

【讨论】：

【解决方案3】：

那么，就像mousemove & touchmove？

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

Here's a fiddle.

【讨论】：