javascript - 使用 jQuery(非 UI)随时随地获取 HTML5 范围 slider 值

Question

我使用默认的 HTML5 范围 slider 。它可以工作，但是是否可以随时更改此 slider 的值(当在范围栏上单击鼠标按钮并且鼠标滑动到任何一侧时)？重要提示:是否可以不使用 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;
});