Jquery UI slider with two handles with input from two text box?
31,302
Assuming you have two <input>
elements:
<input type="text" class="sliderValue" data-index="0" value="10" />
<input type="text" class="sliderValue" data-index="1" value="90" />
And a slider placeholder element:
<div id="slider"></div>
You can use the values
option to put the slider widget in multiple handle mode, and synchronize the values of the <input>
elements with:
$("#slider").slider({
min: 0,
max: 100,
step: 1,
values: [10, 90],
slide: function(event, ui) {
for (var i = 0; i < ui.values.length; ++i) {
$("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
}
}
});
$("input.sliderValue").change(function() {
var $this = $(this);
$("#slider").slider("values", $this.data("index"), $this.val());
});
You can see the results in this fiddle.
Author by
bala3569
Interested in software development, primary on the .NET Framework1 Email: [email protected]
Updated on July 09, 2022Comments
-
bala3569 almost 2 years
I need a jquery slider with two handles with inputs from two textbox like this http://www.israel-diamonds.com/search/diamonds/default.aspx .Currently i have a single handle slider with input from a single textbox
$("#slider").slider({ value: 1, step: 1000, min: 0, max: 5000000, slide: function(event, ui) { $("input").val("$" + ui.value); } }); $("input").change(function () { var value = this.value.substring(1); console.log(value); $("#slider").slider("value", parseInt(value)); });
Any suggestion?
EDIT:
<div class="demo"> <input type="text" class="sliderValue" /> <p> </p> <div id="slider"></div> </div>
and
$("#slider").slider({ range: "min", value: 1, step: 10, min: 0, max: 1000, slide: function (event, ui) { $("input").val(ui.value); } }); $("input").change(function (event) { var value1 = parseFloat($("input").val()); var highVal = value1 * 2; $("#slider").slider("option", { "max": highVal, "value": value1 }); });