jquery ui multiple sliders and their values during form validation

Question

Hello everyone

I m setting up 5 sliders using jQuery UI in a form like this:

$(".slider").slider({
   step: 1,
   min:0,
   max:10,
   value: 5,
   start: // start logic,
   slide: function(event, ui) { //slide logic },
   stop: function(event, ui) { //stop logic }

});

The sliders are part of a form with other fields like name, email etc. When the form is submitted and i show the form with possible errors the sliders reset back to 5 (default value). Is it possible instead of resetting to show the values assigned by the user?

Answer 1

You could setup hidden form fields that hold the values of the sliders when they change.

Then when your form reloads set the sliders based on the hidden form fields.

What I usually do with sliders is have a text box directly underneath them that gets updated as the user sets the slider. With some consistent naming conventions this is pretty easy to do.

Here is a simple example:

<script type="text/javascript">
$(document).ready(function() {
    $(".slider1").slider({
        step: 1,
        min: 0,
        max: 10,
        value: 5,
        slide: function(event, ui) {
            //get the id of this slider
            var id = $(this).attr("id");

            //select the input box that has the same id as the slider within it and set it's value to the current slider value. 
            $("input[id*=" + id + "]").val(ui.value);
        }
    });
});

Here is the HTML portion:

<div class="slider1">       
</div>
<input type="text" id="slider1-txt" />

If you do not want the input boxes you could just replace them with hidden fields.