Simple Price Range Slider In Javascript

For this to be working we need a simple html range slider, so you can use simple  Min <input type="range" id="sliderange" min="1" max="200" /> Max

in which i have used min and max val for sliding value. You can go much better by using any free customized jquery range sliders.

Normally to make this we have to write an ajax which in result get products from backend and bind to html.

so copy Min <input type="range" id="sliderange" min="1" max="200" /> Max
and paste in your view or html then add below javascript in your page

<script type="text/javascript>

//////////////////Getting   range   slider////////////////////

        var slider = document.getElementById("sliderange");

//////////////////Adding a change event in javascript//////////////////////

        slider.addEventListener("change", function () {
            var rangevalue = $(this).val();
            $.ajax({
                        type: "GET",
                        url: "/home/getproductsbyprice",
                        data: { start: rangevalue},           //parsing slider value to ajax
                        success: function (data) {
                            if (data.success) {
                                var list = data.Result;       //Getting data
                                var isProduct = false;       
                                console.log(list);
                                var html = '';                 //Creating an html

/////////////////////////based on result value getting product detail by foreach in jquery and decorating based on need of product design you can even use css used for classes in designs//////////////////////////////////

                                $.each(list, function (key, value) {
                                       console.log(value.Image);                                   
                                       isProduct = true;
                                    
                                        html+= ' <div class="col-md-3 col-sm-4">'
                                        html+=  '<div class="product">'
                                        html+=  '<div class="flip-container">'
                                        html+= '<div class="flipper">'
                                        html+= ' <div class="front">'
                                        html+=  '<a href="detail.html">'
                                        html+= '  <img src="'+value.Image+'" alt="" class="img-responsive">'
                                        html+=     '  </a>'
                                        html+=    ' </div>'
                                        html+=    ' <div class="back">'
                                        html+=       '  <a href="detail.html">'
                                        html+= ' <img src="'+value.Image+'" alt="" class="img-responsive">'
                                        html+=           '</a>'
                                        html+=         ' </div>'
                                        html+=     ' </div>'
                                        html+=  '</div>'
                                        html+=  '<a href="detail.html" class="invisible">'
                                        html += ' <img src="'+value.Image+'" alt="" class="img-responsive">'
                                        html+=  '</a>'
                                        html+= ' <div class="text">'
                                        html += '  <h3><a href="detail.html">'+value.productName+'</a></h3>'
                                        html += ' <p class="price">$'+value.ourPrice+' </p>'
                                        html+=     ' <p class="buttons">'
                                        html+=              '   <a href="detail.html" class="btn btn-default">View detail</a>'
                                        html+=               '  <a href="basket.html" class="btn btn-primary"><i class="fa fa-shopping-cart"></i>Add to cart</a>'
                                        html+=            ' </p>'
                                        html+=        ' </div>'                           
                                        html+=      ' </div>'                           
                                        html += ' </div>';                                    
                                });

                                if (isProduct) {
                                    $('#myprod').html(html);
                                } else {
                                    $('#myprod').html('<div class="col-md-3 col-sm-4"><p><i>No any Product founds!</i></p></div>');
                                }
                                
                            }
                        },
                        error: function (req, error) {
                            if (error === 'error') { error = req.statusText; }
                            var errormsg = 'There was a communication error: ' + error;
                            console.log(errormsg);
                            $("#loader").hide();
                        },
                        beforeSend: function (data) {
                            //$("#loader").show();
                        }

                    });

</script>

And here i got my result.