时间戳

首页 > 解决方案 > 接受用户输入以设置范围的范围滑块？

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

问题描述

我开始认为这可能是不可能的？我已经彻底环顾四周，似乎找不到用户可以在 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

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

标签： javascripthtmljquerysliderjquery-ui-slider

解决方案

只需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' />

推荐阅读