jQuery UI Slider - need to remember values on browser "Back"

Question

I'm using the jQuery UI Slider in an Advanced Search form (im using the Range Slider to be precise). Im using it to filter videos by duration (by minutes).

So far, it's working great.

The default values are from 5 to 55.

Now what I want to do is: When I change it to 20-30, submit the form, see the results. When I hit "Back" on my browser, I want the value to be 20-30, instead if the default value. So, I basically want the slider to remember the value I chose when I go back.

First of all, is it possible to do this? If so, I would need help as I have no clue how!

Here's a working Fiddle to see my Slider in action: http://jsfiddle.net/nbjgH/

Here's my html form:

<form id="advancedSearch" name="advancedSearch" class="search" action="/advancedsearchrun/">
    <input type="text" name="query" autofocus="autofocus" value="{{ query|default('') }}" >

    <div class="slider-time">
        <label for="timeRange">Filter by duration:</label>
        <input type="text" id="timeRange" />
        <input type="hidden" id="min_minutes" name="min_minutes" value="0" />
        <input type="hidden" id="max_minutes" name="max_minutes" value="5" />
    </div>

        <input class="not_rounded_right float-left" type="submit" value="Search">
</form>

It's impossible to send parameters backwards.. You may be able to save the variables to session if you add your own "back" button. And then on the back page check to see if those variables are populated. Why not just submit or post to a new page instead? — Jonathan Payne, Jun 14 '12 at 16:02

score 6 · Accepted Answer · answered Jun 14 '12 at 16:22

You can use jQuery cookie to achieve this in a very clean way.

load cookie, or set default values if null:

if ($.cookie('min')==null){
    $.cookie('min',5);
}
if ($.cookie('max')==null){
    $.cookie('max',55);
}

pass

values: [ $.cookie('min'), $.cookie('max')]

to your slider constructor

fire

$( "#min_minutes" ).val(  ui.values[ 0 ] );
$( "#max_minutes" ).val(  ui.values[ 1 ] );

on slide

DEMO
If you visit the demo, change slider, then visit again, or refresh... it will save the values.

score 2 · Answer 2 · answered Jun 14 '12 at 16:12

You could use a cookie, localStorage or sessionStorage to save the last submitted range. You try to read the stored value first:

var getLastRange = function(){
    // return data from cookie/local or session storage
};

$( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 60,
    values: getLastRange() || [ 5, 55 ],
    ...
});

score 1 · Answer 3 · answered Jun 14 '12 at 16:01

You did not specify the scope of the solution required, but I would use PHP to solve something like this. When you submit the form, you can save the variables into a $_SESSION, and then on the page with the slider you can check to see if those variables are available, and if so, you can pass them to the javascript that initializes the slider.

jQuery UI Slider - need to remember values on browser "Back"

3 Answers3