CODEWITHSUNDEEP
jqueryjquery-ui
Rapture
Rapture

Reputation: 1896

Setting Jquery UI slider's initial value from an input

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>

Upvotes: 12

Views: 18172

Answers (2)

Adil Shaikh
Adil Shaikh

Reputation: 44740

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

Upvotes: 3

DarkAjax
DarkAjax

Reputation: 16223

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/

Upvotes: 24

Related Questions