ui slider with text box input

Question

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

I think you could whip something up using the [range with fixed minimum example](http://jqueryui.com/demos/slider/hotelrooms.html). — Rusty Fausak, Sep 23 '11 at 03:18
FYI: also found filament group have achieved this, but seemingly they are the only ones.. http://www.filamentgroup.com/lab/update_jquery_ui_slider_from_a_select_element_now_with_aria_support/ would like to see otehrs — 422, Sep 23 '11 at 03:29

score 28 · Accepted Answer · answered Sep 23 '11 at 04:52

28

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.

answered Sep 23 '11 at 04:52

Andrew Whitaker

124,656
32
289
307

Thats 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 – 422 Sep 23 '11 at 05:04
@422: That *should* work, you may have to enter a large value to see it (try **$3000000** for example) – Andrew Whitaker Sep 23 '11 at 05:05
changed div to
and still doesnt auto update as you type, even with larger numbers. Unless its a jsfiddle issue, will port over to html and test – 422 Sep 23 '11 at 05:18
need help with this one http://stackoverflow.com/questions/9480039/jquery-ui-slider-with-two-handles-with-input-from-two-text-box – bala3569 Feb 28 '12 at 11:20
You mean robust like regex? ;-) `/\d+/.exec(this.value)` – Nick Bolton Aug 02 '12 at 13:57
@AndrewWhitaker, how to remove dollar sign from input ? – Istiaque Ahmed Sep 17 '12 at 03:53
1

@IstiaqueAhmed: Remove the dollar sign (`$`) from the code, as well as the substring code http://jsfiddle.net/VfSda/ – Andrew Whitaker Sep 17 '12 at 12:48

ui slider with text box input

1 Answers1

Linked