jQuery - slider with ajax and mysql by Norlihazmey Ghazali

http://stackoverflow.com/questions/32325502/display-products-from-database-on-filtering-of-price-based-slider-in-php-using-a/32325926?noredirect=1#comment52526864_32325926

HTML

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.0.13/js/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.0.13/css/ion.rangeSlider.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.0.13/css/ion.rangeSlider.skinModern.css">
<label class="element-top-10 widget-title ">Budget (per day)</label>
<input type="text" id="range" value="" name="range" />
<input type="hidden" name="budget" id="budget" value=" " disabled />
<br/>

JavaScript

$("#range").ionRangeSlider({
    hide_min_max: true,
    keyboard: true,
    min: 50,
    max: 500,
    from: 55,
    to: 300,
    type: 'double',
    step: 1,
    prefix: "£",
    grid: true,
    onChange: function (val) {
        // see inside console developer tools to see returned properties
        console.log(val);
        // here you put ajax request
        var firstValue = val.from;
        var secondValue = val.to;
        
        $.ajax({
            type: 'POST',
            url: 'phpProcess.php', // create this file with php+mysql(any db)
            data: {
                first: firstValue, // send this paramter
                second: secondValue // send this parameter
            },
            dataType: 'json',
            success: function (data) { // on success request
                // remember we use echo json_encode($data); in php page
                // those data supposed to be available here
                // try console.log(data) to view data
                // on success, populate data into any type of HTML element
                // either li, table, etc... something like this

            }
        });
    }
});