Question

How can I set the handle to start on the last saved value? For some reason it’s always in the last position. I’m setting my start position and max value using values from the database but here is a working example:

http://jsfiddle.net/hcKwQ/ Slide should start at 5, not 10 the max value.. Please help I don’t know what I’m doing wrong.

Script:

$(function() {
    $( "#slider" ).slider({
        range: "min",
        value: $("input[name='shirts']").val(),
        min: 1,
        max: $("input[name='max_shirts']").val(),
        step: 1,
        slide: function( event, ui ) {
            $( "#amount" ).text( ui.value );
        },
        stop: function( event, ui ) {
            $( "#shirts" ).val( ui.value );
        }
    });
});

HTML:

<div id="slider"></div>
<div class="amount" id="amount"></div>

<input type="hidden" name="shirts" value="<?php echo $shirts; ?>" id="shirts">

<input type="hidden" name="max_shirts" value="<?php echo $max_shirts; ?>" id="max_shirts">

Answer 1

Change the value option to:

value: parseInt($("input[name='shirts']").val()),

Here is a full demo: http://jsfiddle.net/lucuma/hcKwQ/1/

The plugin is expecting a number so you need to parse it..

http://jqueryui.com/demos/slider/#option-value