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>

Answer 1

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.