Question

I am using the jquery UI slider, it is working fine. But if i refresh the page the slider is going back to the default values instead of retaining the selected value. Please help me to fix this issue.

Javascript:

 var selected = $( "#selectedValue" ).html();

    $("#valueSlider").slider({
        min: 0,
        max: 100,
        range: "min",
        slide: function( event, ui ) {
            $('#selectedValue').html(ui.value);
            selected = ui.value;
        },
        value: selected,
    });
    $('#selectedValue').html($( "#valueSlider" ).slider( "value" ));

HTML:

<div class="valueSliderContainer">
                <label>
                    Value: <span id="selectedValue">45</span>                                           
                    <div id="valueSlider"></div>
                </label>
</div>

Answer 1

unless you put your selected value in a storage, like client side storage e.g cookies etc, your slider will be set back to the default value. (That’s what the refreshing does)

For using the cookies and setting the values here is a good tutorial

http://www.w3schools.com/js/js_cookies.asp