Skip to main content

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/

Comments

Popular posts from this blog

Run and compile sass scss file to css using node

  Today we learn how to use scss and generate css using node  or Run and compile sass scss file to css using node   So please follow simple  steps :-   Today we will create a project that can read scss file and generates css with it  Note: Make sure you have installed node in your system. If you want to help to install node js based on your system then check our other tutorial or check node js official website. Now create a blank folder and open  terminal(linux) or cmd(windows) and navigate to your current project folder by using cd command Now run below command npm init after enter it will ask you some package info that you can fill according to you or just keep enter until it finished. The above command will generate package.json file Now  we will install npm module that will convert our scss to css Run below command: npm install node-sass So we have installed node-sass package . Now open package.json file in your editor and add below code into it into

jQuery Datatable add date range filter

jQuery Datatable add date range filter Datatable is most useful jQuery plugin that helps to make our html tables more powerful and give powers to user to filter , search, sort, pagination etc, But Data table provides a common filter only and yes we can customize and add filter for each column, but still sometimes we need an advance filter like show results only between a date range, So today we will learn how to create a minimum and maximum date range fields and show date picker on it, and user can fill dates by selecting dates and data table will auto filter records based on it. Keep follow below steps :- I am using Bootstrap if you want to use any other framework then you can use. Create a new index.php file  and paste below code in it, i have used all required CDN like bootstrap, datatable, datepicker etc. <!DOCTYPE html> <html> <head>     <title>Datatable Date Range Filter Example</title>     <link rel="stylesheet" href="https://maxcd

How to retrieve Facebook Likes, share , comment Counts

function facebook_count($url){     // Query in FQL     $fql  = "SELECT share_count, like_count, comment_count ";     $fql .= " FROM link_stat WHERE url = '$url'";     $fqlURL = "https://api.facebook.com/method/fql.query?format=json&query=" . urlencode($fql);     // Facebook Response is in JSON     $response = file_get_contents($fqlURL);     return json_decode($response); } $fb = facebook_count('https://www.facebook.com/BahutHoGyiPadhai'); // facebook share count echo $fb[0]->share_count;  echo "like"; // facebook like count echo $fb[0]->like_count ; echo "comment"; // facebook comment count echo $fb[0]->comment_count;  ?>