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>

Answer 1

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/

Answer 2

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