接受用户输入以设置范围的范围滑块？

Question

我开始觉得这不可能？我仔细环顾四周，似乎找不到用户可以在 2 个不同的框中输入数字，按回车键，然后相应地调整范围滑块的情况。这就是我想要完成的。

我正在使用 jQuery UI 范围滑块。但是，如果有其他方法可以做到这一点，我很乐意听到。

<div style="display:flex;margin-top:10px;margin-bottom:6px;">
    <label for="range_from" style="margin-right:7px;">From:</label>
    <input type="text" id="range_from" name="range_from" style="color:#b9cd6d;font-weight:bold;width:60px;">

    <label for="range_to" style="margin-left:7px;margin-right:7px;">To:</label>
    <input type="text" id="range_to" name="range_to" style="color:#b9cd6d;font-weight:bold;width:60px;">
</div>

<div id="slider" style="width:180px;margin-top:20px;"></div>

$(function () {
    var from = document.getElementById('range_from').value;
    var to = document.getElementById('range_to').value;
    var myValues = [from, to];

    $("#slider").slider({
        range: true,
        min: 0,
        max: 1000,
        values: myValues,
        slide: function (event, ui) {
            $("#range_from").val("$" + ui.values[0]);
            $("#range_to").val("$" + ui.values[1]);
        }
    });
});

范围值根据滑块手柄的位置显示和变化，这很好，但除此之外，我希望用户能够在框中输入他们自己的数字，然后让范围滑块根据自身进行调整关于新价值观。

我发现这个 jsfiddle 与我正在尝试完成的非常相似，除了用户必须单击一个按钮来更改滑块值，而不是用户在键盘上按下 enter 或者它只是作为一个新的改变输入值： http://jsfiddle.net/YSEGU/1

也许我正在尝试做的事情是不可能的？

Answer 1

只需在输入的 change 事件上添加一个侦听器，如下所示：

['min', 'max'].map(x => document.getElementById(x)).forEach(x => x.addEventListener('change', function (e) {
    let [min, max] = $("#slider-range").slider('values');
    if (e.target.id === 'min') {
      min = parseInt(e.target.value, 10);
    } else if (e.target.id === 'max') {
      max = parseInt(e.target.value, 10);
    }
    $("#slider-range").slider('values', [min, max]);
    updateValues(min, max);
  }));
  
const minInit = 75;
const maxInit = 300;

$("#slider-range").slider({
  range: true,
  min: 0,
  max: 500,
  values: [minInit, maxInit],
  slide: function (_, { values: [min, max] }) {
    updateValues(min, max);
  }
});

updateValues(minInit, maxInit);

function updateValues(min, max) {
    $("#amount").val(`$${min} - $${max}`);
}

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>

<p>
    <label for="amount">Price range:</label>
    <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
 
    <div id="slider-range"></div><br/>
    Min :<input type='text' id='min' /> Max:<input type='text' id='max' />

接受用户输入以设置范围的范围滑块？

Range Slider that accepts User input to set the range?

html

javascript

jquery

slider

jquery-ui-slider