Using jQuery UI Slider dynamically?

问题:

I have a jQuery UI slider in which if the user types numbers into the input element the slider moves appropriately.

$("#slider-range-min").slider({
            range: "min",
            value: 1,
            step: 1000,
            min: 0,
            max: 5000000,
            slide: function (event, ui) {
                $("input").val(ui.value);
            }
        });
        $("input").change(function (event) {
            var value1 = $("input").val();
            $("#slider-range-min").slider("option", "value", value1);
        });

But what i need is i want the slider to be in the middle whatever value i enter in the text box for the first time and then if i move the slider rightside means my value in the textbox has to increase and for leftside it has to decrease without setting these minimum and maximum values..

Any suggestion?

EDIT: what i need is when i enter 500 in the textbox my slider has to move to the center automatically..if i move the slider rightside the end must be 1000 and for leftside it must be 0 and if i enter 400 slider must move to center position automatically and the rightside end must be 800 and leftside 0

回答1:

So, what you need is to basically change the slider range from 0 to double whatever is entered in the text box? I think you can use the method "option" on the slider such as:

 $("input").change(function (event) {
     var value1 = parseFloat($("input").val());
     var highVal = value1 * 2;
     $("#slider-range-min").slider("option", {"max": highVal, "value": value1});
 });

Edit: here's a fiddle - http://jsfiddle.net/cXYC4/

回答2:

I'm not sure but this might work: http://flowplayer.org/tools/rangeinput/