Code Sample

<div class="form-group">
  <label class="c-price__label"> Price </label>
  <div class="slider">
    <input class="minimum" type="hidden">
    <input class="maximum" type="hidden">
  </div>
</div>

<script>
jQuery(function ($) {
  $('.slider').flexPriceRangeSlider();
});
</script>

• Two hidden <input> elements are used for output of the values; one for 'minimum', one for 'maximum'.
• One <input> element must have a class of 'minimum', the other a class of 'maximum'.
• The component is based on noUiSlider. See the site for complete documentation.
• The options shown in the following code sample are the defaults for the control. They can be overridden as needed.

  $('.slider').flexPriceRangeSlider({
    currencySymbol: '$',
    start: [0, 20000],
    connect: true,
    range: {
      'min': [0, 5],
      '25%': [250, 10],
      '50%': [500, 25],
      '70%': [1000, 250],
      '85%': [5000, 500],
      'max': 20000
    }
  });