Using jQuery UI Slider dynamically?

Question

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

can you show an example of what you mean? perhaps some html? so I can see how it looks? — Nicholas
– Nicholas, Commented Feb 27, 2012 at 10:53
@Antimated:what i need is when i enter 500 in the textbox my slider has to move to the center..if i move the slider rightside the end must be 1000 and for leftside it must be 0 — bala3569
– bala3569, Commented Feb 27, 2012 at 10:57

Alex · Accepted Answer · 2012-02-27 11:11:59Z

2

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/

answered Feb 27, 2012 at 11:11

Alex

7,3461 gold badge21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicholas · Accepted Answer · 2012-02-27 11:22:09Z

0

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

answered Feb 27, 2012 at 11:22

Nicholas

5,5303 gold badges23 silver badges21 bronze badges

Collectives™ on Stack Overflow

Using jQuery UI Slider dynamically?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related