如何通过输入字段更改滑块?
how to change slider by input fields?
JAVASCRIPT
我有这个带有 js 代码的 jQuery 范围滑块,我想在输入字段中输入数字时更改滑块,还给出了 jsfiddle:https://jsfiddle.net/akhlaque/6Lrtpjwk/1/
var details = {
"books": 20,
"pens": 60,
"ink": 90,
"table": 120,
"chair": 170,
"shoes": 220,
"boots": 320,
};
$(文档).ready(函数() {
$(".price_range").slider({
max: 500,
range: true,
values: [0, 500],
change: function(event, ui) {
getDetails(ui.values[0], ui.values[1]);
}
});
var current = $(".price_range").slider("option", "values");
getDetails(current[0], current[1]);
});
function getDetails(最小值,最大值){
$("#range").val("" + minimum);
$("#range-1").val("" + maximum);
var result = "<table><tr><th>Product Name</th> <th>Price (in $)</th></tr>";
for (var item in details) {
if (details[item] >= minimum && details[item] <= maximum) {
result += "<tr><td>" + item + "</td><td>" + details[item] + "</td></tr>";
}
}
result += "</table>";
$(".output").html(result);
}
$(文档).ready(函数(){
$(".input_slides").change(函数(){
var $this = $(this);
$(".price_range").slider("values", $this.data("index"), $this.val());
});
})
enter code here
我做了两个修改。
- 添加“索引”作为 HTML 输入的属性。用于定位要使用的滑块手柄。
<form>
<input type="text" index="0" id="range" class="input_slides">
<input type="text" index="1" id="range-1" class="input_slides">
</form>
- 将更改值更新为新索引属性
$(".input_slides").change(function() {
var $this = $(this);
$(".price_range").slider("values", $this.attr('index'), $this.val());
});
这将解决直接问题。
这是fiddle:https://jsfiddle.net/eczh8ymk/
JAVASCRIPT 我有这个带有 js 代码的 jQuery 范围滑块,我想在输入字段中输入数字时更改滑块,还给出了 jsfiddle:https://jsfiddle.net/akhlaque/6Lrtpjwk/1/
var details = {
"books": 20,
"pens": 60,
"ink": 90,
"table": 120,
"chair": 170,
"shoes": 220,
"boots": 320,
};
$(文档).ready(函数() {
$(".price_range").slider({
max: 500,
range: true,
values: [0, 500],
change: function(event, ui) {
getDetails(ui.values[0], ui.values[1]);
}
});
var current = $(".price_range").slider("option", "values");
getDetails(current[0], current[1]);
});
function getDetails(最小值,最大值){
$("#range").val("" + minimum);
$("#range-1").val("" + maximum);
var result = "<table><tr><th>Product Name</th> <th>Price (in $)</th></tr>";
for (var item in details) {
if (details[item] >= minimum && details[item] <= maximum) {
result += "<tr><td>" + item + "</td><td>" + details[item] + "</td></tr>";
}
}
result += "</table>";
$(".output").html(result);
}
$(文档).ready(函数(){
$(".input_slides").change(函数(){
var $this = $(this);
$(".price_range").slider("values", $this.data("index"), $this.val());
}); })
enter code here
我做了两个修改。
- 添加“索引”作为 HTML 输入的属性。用于定位要使用的滑块手柄。
<form>
<input type="text" index="0" id="range" class="input_slides">
<input type="text" index="1" id="range-1" class="input_slides">
</form>
- 将更改值更新为新索引属性
$(".input_slides").change(function() {
var $this = $(this);
$(".price_range").slider("values", $this.attr('index'), $this.val());
});
这将解决直接问题。
这是fiddle:https://jsfiddle.net/eczh8ymk/