Question

I have the following JQuery function about a range slider. It’s just working fine.

<script type="text/javascript">
    jQuery(function() {         

        jQuery("#slider-range").slider({
            range: true,            
            min: 55, 
            max: 50000,
            values: [55, 50000],
            slide: function(event, ui) {
                jQuery("#minValue").val(ui.values[0]);
                jQuery("#maxValue").val(ui.values[1]);
            }
        });
        jQuery("#minValue").val(jQuery("#slider-range").slider("values", 0));
        jQuery("#maxValue").val(jQuery("#slider-range").slider("values", 1));
});
</script>

Now, I need to pass the values of max and min within the function dynamically at run time from MySql database that indicate the range of the slider.

I have tried to set those values by using hidden fields something like the following.

<script type="text/javascript">
    jQuery(function() {         

     var mini=document.getElementById("hid_min_price").value;
     var maxi=document.getElementById("hid_max_price").value; 

        jQuery("#slider-range").slider({
            range: true,            
            min: mini, 
            max: maxi,
            values: [mini, maxi],
            slide: function(event, ui) {
                jQuery("#minValue").val(ui.values[0]);
                jQuery("#maxValue").val(ui.values[1]);
            }
        });
        jQuery("#minValue").val(jQuery("#slider-range").slider("values", 0));
        jQuery("#maxValue").val(jQuery("#slider-range").slider("values", 1));
});
</script>

but it isn’t working. How can then I set the values of max and min dynamically at run time?

Answer 1

You could fetch min max values from database and then assign them to javascript variables inside of the tag.

Let’s assume you’re using php, the code would look something like that:

…

echo '
<script type="text/javascript">
    jQuery(function() {         

        var mini='.$min.';
        var maxi='.$max.';

        jQuery("#slider-range").slider({
            range: true,            
            min: mini, 
            max: maxi,
            values: [mini, maxi],
            slide: function(event, ui) {
                jQuery("#minValue").val(ui.values[0]);
                jQuery("#maxValue").val(ui.values[1]);
            }
        });
        jQuery("#minValue").val(jQuery("#slider-range").slider("values", 0));
        jQuery("#maxValue").val(jQuery("#slider-range").slider("values", 1));
});
</script>';

…

Where $min and $max contian data from DB.