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');
}
});
