ui slider with text box input
You need to update the input
element (like you're doing now for the #amount
element) on slide
:
$("#slider").slider({
range: "min",
value: 1,
step: 1000,
min: 0,
max: 5000000,
slide: function(event, ui) {
$("input").val("$" + ui.value);
}
});
Additionally, you need to bind to the change
event for the input
element and call the slider's value
method:
$("input").change(function () {
var value = this.value.substring(1);
console.log(value);
$("#slider").slider("value", parseInt(value));
});
Example: http://jsfiddle.net/andrewwhitaker/MD3mX/
There's no validation going on here (you must include the "$" sign for it to work). You could add some more robust input sanitation to enhance it.
422
Updated on April 24, 2020Comments
-
422 about 4 years
We have a ui slider we utilise, and it works flawlessly.
code:
jQuery(function() { jQuery( "#slider-range-min" ).slider({ range: "min", value: 1, step: 1000, min: 0, max: 5000000, slide: function( event, ui ) { jQuery( "#amount" ).val( "$" + ui.value ); } }); jQuery( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) ); });
As you can see we allow user to pick anything between 0 and 5,000,000.
Html is:
<div id="slider-range-min" style="width: 460px; float:left;margin:10px;"></div>
What I want to do is add a text input element which works in harmony with the slider, so as user slides the texy box increases, decreases whatever..
Or if the user types numbers into the input element the slider moves appropriately.
Any help please ?
Preview is:
-
422 over 12 yearsThats great Andrew, the only issue I see is user cannot type in input element and the slider moves to that priced position, until you click out of the input. I suppose could add onkeyup hey.. But great code, voted up
-
Andrew Whitaker over 12 years@422: That should work, you may have to enter a large value to see it (try $3000000 for example)
-
422 over 12 yearschanged div to <div id="slider" style="width: 460px; float:left;margin:40px 10px;"></div> and still doesnt auto update as you type, even with larger numbers. Unless its a jsfiddle issue, will port over to html and test
-
bala3569 about 12 yearsneed help with this one stackoverflow.com/questions/9480039/…
-
Nick Bolton almost 12 yearsYou mean robust like regex? ;-)
/\d+/.exec(this.value)
-
Istiaque Ahmed over 11 years@AndrewWhitaker, how to remove dollar sign from input ?
-
Andrew Whitaker over 11 years@IstiaqueAhmed: Remove the dollar sign (
$
) from the code, as well as the substring code jsfiddle.net/VfSda