Question

I’m using the jQuery UI slider and having trouble saving the position of the slider when using more then one.

Markup:

<label for="amount">Selected Value:</label>
<input  type="text" class="amount" name="mytheme_options[' . $id . ']" value="' . esc_attr( $options[$id] ) . '" />
<div class="slider"></div>

JS:

 jQuery(document).ready(function() {
        var position = jQuery('.slider').prev('input').val(); //cache the position of the slider so we can recall that on page reload

        jQuery( ".slider" ).slider({
            value: position,
            min: 0,
            range: "max",
            max: 500,
            step: 50,
            slide: function( event, ui ) {
                jQuery(this).prev( ".amount" ).val(ui.value );
            }
        });
 });

That, of course works fine for setting the slider postion if there is just one. However, I’m having trouble writing a proper methed for the “value” element.

I though this would work, but no dice.

value: function(event, ui ) {
                jQuery(this).prev('.amount').val();
            }

Answer 1

You could do a .each() and then you would have access to jQuery(this):

jQuery(document).ready(function() {
    jQuery(".slider").each(function() {
        jQuery(this).slider({
            value: jQuery(this).prev('.amount').val(),
            min: 0,
            range: "max",
            max: 500,
            step: 50,
            slide: function(event, ui) {
                jQuery(this).prev(".amount").val(ui.value);
            }
        });
    });
});

http://jsfiddle.net/jtbowden/KZWTs/