ui slider with text box input

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:

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.