ui slider with text box input

422 picture 422 · Sep 23, 2011 · Viewed 40.3k times · Source

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:

enter image description here

Answer

Andrew Whitaker picture Andrew Whitaker · Sep 23, 2011

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.