Price Range Slider

General Info

Price range slider is a module used as a filter in the theme but it can have any other applicability.

Plugin used to add the functionality noUISlider .

Structure

Structure of a price range slider is as follows:

Price Range

HTML code


<div class="price-range-slider">
   <span class="price-range-placeholder">
       <span>Price </span><span>Range</span>
   </span>
   <div id="price-range-slider" class="price-range-slider-base"></div>
</div>

Js Code


var startSlider = document.getElementById('price-range-slider');

noUiSlider.create(startSlider, {
    start: [150, 750],
    tooltips: true,
    format: wNumb({
        decimals: 3,
        thousand: '.',
        postfix: '$'
    }),
    connect: true,
    range: {
        'min': [0],
        'max': [1000]
    }
});