How to use jquery price slider min and max price

How to use jquery price slider min and max price

Solution 1-

<?php
if(isset($_POST['isvaluesubmit']))
{

$minprice =  $_POST['minPrice'];
$maxprice = $_POST['maxPrice'];
}
?>

<div class="row">
                <div class="col-lg-12">
                  <h4 data-toggle="" data-target="#cost">Cost&apos;s</h4>
                  <div class="">
                    <p>
                      <label for="amount">Price range:</label>
                      <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
                    </p>
                         <div id="slider-range"></div>
                         <input type="hidden" class="boxpricefilter" id="minPrice" name="minPrice" value="<?php echo (isset($_POST['minPrice'])) ? $_POST['minPrice'] : '0'; ?>" />
                         <input type="hidden" class="boxpricefilter" id="maxPrice" name="maxPrice" value="<?php echo (isset($_POST['maxPrice'])) ? $_POST['maxPrice'] : $max_price; ?>" />
                   </div>
                </div>
              </div>

<script>
var opnc = jQuery.noConflict();

  opnc(function() {
    opnc( "#slider-range" ).slider({
      range: true,
      min: <?php echo '0';  ?>,
      max: <?php  echo $max_price; ?>,
      values: [<?php if(isset($_POST['minPrice'])) { echo $_POST['minPrice']; } else { echo '0'; } ?>, <?php if(isset($_POST['maxPrice'])) { echo $_POST['maxPrice']; } else { echo $max_price; } ?>],
      slide: function( event, ui ) {
        opnc( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        opnc("#minPrice").val( ui.values[0] );
        opnc("#maxPrice").val( ui.values[1] );
        },
        change: function(event, ui) {
            opnc("#form_filter").submit();
        }
    });

 //alert(opnc( "#slider-range" ).slider( "option", "min" ));
    opnc( "#amount" ).val( "$" + opnc( "#slider-range" ).slider( "values", 0 ) +
      " - $" + opnc( "#slider-range" ).slider( "values", 1 ) );
  
  });

</script>



Solution 2

Give your list of products an id attribute and give each product a data-price attribute that is equal to the price of the item:

    <ul id="products">
        <li data-price="10"> product - £10 </li>
        <li data-price="50"> product - £50 </li>
        <li data-price="100"> product - £100 </li>
        <li data-price="150"> product - £150 </li>
        <li data-price="200"> product - £200 </li>
    </ul>

    Add a function that will show or hide those products when a slide event occurs:

    function showProducts(minPrice, maxPrice) {
        $("#products li").hide().filter(function() {
            var price = parseInt($(this).data("price"), 10);
            return price >= minPrice && price <= maxPrice;
        }).show();
    }
    Call that function from the slide event handler:

    slide: function(event, ui) {
        var min = ui.values[0],
            max = ui.values[1];

        $("#amount").val("$" + min + " - $" + max);
        showProducts(min, max);
    }

    Also call that function right after the slider is initialized so that the correct products are hidden initially:

    var options = {
       /* snip */
    }, min, max;

    $("#slider-range").slider(options);

    min = $("#slider-range").slider("values", 0);
    max = $("#slider-range").slider("values", 1);

    $("#amount").val("$" + min + " - $" + max);

    showProducts(min, max);
The entire snippet:

function showProducts(minPrice, maxPrice) {
    $("#products li").hide().filter(function() {
        var price = parseInt($(this).data("price"), 10);
        return price >= minPrice && price <= maxPrice;
    }).show();
}

$(function() {
    var options = {
        range: true,
        min: 0,
        max: 500,
        values: [50, 300],
        slide: function(event, ui) {
            var min = ui.values[0],
                max = ui.values[1];

            $("#amount").val("$" + min + " - $" + max);
            showProducts(min, max);
        }
    }, min, max;

    $("#slider-range").slider(options);

    min = $("#slider-range").slider("values", 0);
    max = $("#slider-range").slider("values", 1);

    $("#amount").val("$" + min + " - $" + max);

    showProducts(min, max);
});​


jsfiddle -- http://jsfiddle.net/5aPg7/