Question

I am using the jQuery UI range slider demo code (http://jqueryui.com/demos/slider/#range) to create a price range slider. I want to transfer the values selected from this range slider to the get params of minValue & maxValue.

I have been trying to do this by getting the JavaScript to update the hidden fields in the form below but this doesn’t seem to work as at the moment the page reloads with the URL query string looking like this: ?minValue=&maxValue=&submit=go and no values have been transferred from the range slider. How do I get the values from the range slider to the query string?

Thanks in advance.

<script type="text/javascript" language="javascript">
$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 1,
        max: 3000,
        values: [ 1, 300 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ]);
        }
    });
    $( "#amount" ).val( "£" + $( "#slider-range" ).slider( "values", 0 ) + " - £" + $( "#slider-range" ).slider( "values", 1 ) );
    $( "#minValue" ).val( ui.values[ 0 ] );
    $( "#maxValue" ).val( ui.values[ 1 ] );
});
</script>

<form action="">
    <div id="slider-range"></div>
    <label for="amount">Price range:</label><input type="text" id="amount" style="border:0; color:#28b1ff; font-weight:bold;" />
    <input id="minValue" name="minValue" type="hidden" />
    <input id="maxValue" name="maxValue" type="hidden" />
    <input id="randomGiftButton" type="submit" name="submit" value="go" />
</form>

Answer 1

You’re setting the min/maxValues outside of the slider’s code. Move those lines into the slide callback function.

slide: function( event, ui ) {
    $( "#amount" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ]);
    $( "#minValue" ).val( ui.values[ 0 ] );
    $( "#maxValue" ).val( ui.values[ 1 ] );
}