jQuery ui range slider set values after submit on new page

Question

I am trying to create a jquery ui range slider a link!. I am using it as a filter on a listing site which show results based on the filters applied. What I want is whenever the user changes the slider, the form must get submitted. I have successfully implemented this. The form action is the same page itself. The values are passed through the url although whenever the page loads again the slider is reset to the initial values. I want the slider to retain the submitted values.

Here's my entire code:

<link href="slider.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<!-- Javascript -->

<script>

$(document).ready(function() {

    $( "#slider-3" ).slider({
        range:true,
        min: 0,
        max: 3000,
        values: [ 0, 3000 ],
        slide: function( event, ui ) {
        $( "#price1" ).val(ui.values[ 0 ]);
        $("#price2").val(ui.values[1]);     
    },
    change:function() { 
        $("#highlights").submit(); 
    },

});

$( "#price1" ).val($( "#slider-3" ).slider( "values", 0 ));
$( "#price2" ).val($( "#slider-3" ).slider( "values", 1 ));

});

</script>
<?php

$mincost=$_GET['mincost'];
$maxcost=$_GET['maxcost'];

.....
?>
<form name="highlights" id="highlights" action="mypage.php"   method="GET">
<div id="costslider">
    <div id="slider-3"></div>
    <div id="mincost">
        <input type="text" id="price1" name="mincost" id="mincost"  style="background-color:#fff; border:0; color:#b81010; font-weight:bold;   width: 70px;" value="<?php echo $_GET['mincost'];?>" >
    </div>
    <div id="maxcost">
        <input type="text" id="price2" name="maxcost" style="background-  color:white ; border:0; color:'#b81010'; left: 400px; font-weight:bold; width: 70px;" value="<?php echo $_GET['maxcost'];?>" >
    </div>
</div>
</form>

Here I want the mincost and maxcost value after the form is submitted to appear on the slider as well. Please help out. Much appreciated.

score 3 · Accepted Answer · answered Feb 05 '15 at 08:16

You need to use "values" options, from slider function. You need to pase variable to the "values" options.

Here is the code:

<?php
// check if $_GET['mincost'] exists, if yes set javascript value to $_GET['mincost'], if not put the default value to 0 
// check if $_GET['maxcost'] exists, if yes set javascript value to $_GET['maxcost'], if not put the default value to 300 
?>

<script>
minconst = <?php echo (isset($_GET['mincost'])) ? $_GET['mincost'] : 0 ?>;
maxcost = <?php echo (isset($_GET['maxcost'])) ? $_GET['maxcost'] : 3000 ?>;
</script>

<script>
        $(document).ready(function() {

            $("#slider-3").slider({
                range : true,
                min : 0,
                max : 3000,

                values : [minconst, maxcost],
                slide : function(event, ui) {
                    $("#price1").val(ui.values[0]);
                    $("#price2").val(ui.values[1]);

                },
                change : function() {
                    $("#highlights").submit();
                },
            });

            $("#price1").val($("#slider-3").slider("values", 0));
            $("#price2").val($("#slider-3").slider("values", 1));

        });

    </script>

    <form name="highlights" id="highlights" action="mypage.php"   method="GET">
        <div id="costslider">
            <div id="slider-3"></div>
            <div id="mincost">
                <input type="text" id="price1" name="mincost" id="mincost"  style="background-color:#fff; border:0; color:#b81010; font-weight:bold;   width: 70px;" value="<?php echo $_GET['mincost']; ?>" >
            </div>
            <div id="maxcost">
                <input type="text" id="price2" name="maxcost" style="background-  color:white ; border:0; color:'#b81010'; left: 400px; font-weight:bold; width: 70px;" value="<?php echo $_GET['maxcost']; ?>" >
            </div>

        </div>
    </form>

jQuery ui range slider set values after submit on new page

1 Answers1