Setting Jquery UI slider's initial value from an input

Question

I'm trying to generalize some slider code so that it will work with a few input + slider combinations.

I have everything essentially working - slide the slider, the input value updates or enter a number in the input, the slider moves to the proper location.

However, I'm having trouble initializing the sliders from the default values of the inputs. Here's what my code looks like:

Javascript

$(".slider").slider({
        min: 0,
        max: 5,
        value: $(this).parent().find(".inputNumber").val(),
        step: 0.25,
        slide: function (event, ui) {
            $(this).parent().find(".inputNumber").val(ui.value);
        }
    });

HTML

    <div class="inputWrap hidden">
    <input class="mini inputNumber" type="text" value="0.5">
    <div class="slider"></div>
    </div>

DarkAjax · Accepted Answer · 2013-04-08 21:33:10Z

24

This works for me (with any number of sliders):

$(".slider").slider({
    min: 0,
    max: 5,
    step: 0.25,
    slide: function (event, ui) {
        $(this).parent().find(".inputNumber").val(ui.value);
    },
    create: function(event, ui){
        $(this).slider('value',$(this).parent().find(".inputNumber").val());
    }
});

Demo: http://jsfiddle.net/darkajax/uv5aC/

answered Apr 8, 2013 at 21:33

DarkAjax

16.3k11 gold badges60 silver badges67 bronze badges

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

2 Comments

Rapture Over a year ago

Thanks - didn't know about the create option. Big help.

Kellen Stuart Over a year ago

Works for any number of sliders unless those sliders are from Good Times... Then red death.

Adil Shaikh · Accepted Answer · 2013-04-08 21:41:48Z

3

this seems to work

$(".slider").each(function(){
    $(this).slider({
    min: 0,
    max: 5,
    step: 0.25,
    slide: function (event, ui) {
        $(this).parent().find(".inputNumber").val(ui.value);
    }
}).slider( "option", "value", $(this).parent().find(".inputNumber").val() );
});

FIDDLE

edited Apr 8, 2013 at 21:41

answered Apr 8, 2013 at 21:13

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

2 Comments

Jake Zeitz Over a year ago

but what if he has multiple sliders and multiple inputNumber?

Rapture Over a year ago

I do in fact need this to work for more than one slider, which this answer unfortunately, does not: jsfiddle.net/hte2B/1

Collectives™ on Stack Overflow

Setting Jquery UI slider's initial value from an input

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related