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

问题描述

我开始认为这不可能？我已经彻底环顾四周，似乎找不到用户可以将数字输入到 2 个不同的框中，按 Enter，然后相应地调整范围滑块的情况。这就是我想要完成的。

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

这是我目前所拥有的：https://codepen.io/pen/

<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

也许我想做的事情是不可能的？

解决方法

只需在输入的 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' />