I'm using a slider as user input for a screen. Basically it's a bulk update screen where there is a table with multiple rows, thus multiple sliders. I created it so that the hidden value is what gets posted in the form.

<td>
    <input class="percentageProvidedHidden" type="hidden" name='<%= "Values[" + i + "].Percentage" %>' value='<%=item.Percentage %>' />
            <div class="percentageProvidedSlider"></div>
</td>

I have the update working just fine (move slider changes hidden input value, submit, values are updated in db), however, I can't get the damn thing to initialize with the value of the hidden input (note the "value: " parameter below). In this case I think $(this) isn't actually $('percentageProvidedSlider') but the page itself. Can someone help me get the slider value to initialize with the hidden input field? I'm using ASP .Net MVC 2 so if there are any methods I should try with that I welcome them as well.

$('.percentageProvidedSlider').slider(
    {
        min: 0,
        max: 100,
        step: 25,
        value: $(this).parents('tr').find('input.percentageProvidedHidden').val(),
        slide: function(e, ui) {
            var mypos = ui.value;
            $(this).find('.ui-slider-handle').text(ui.value);
        },
        change: function(event, ui) {
            var myVal = $(this).slider("option", "value");
            $(this).parents('tr').find('input.percentageProvidedHidden').val(myVal);

            var myDropDown = $(this).parents('tr').find('select.verified');

        }
    });