Range Slider

It is an easy and responsive range slider.

Official documentation

For more detailed information and examples, see the official documentation: Ion RangeSlider.js .

How to use?

Copy-paste the stylesheet <link> into your <head> to load the CSS.

<link rel="stylesheet" href="../../assets/vendor/ion-rangeslider/css/ion.rangeSlider.css">
Copy

Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.

<script src="../../assets/vendor/ion-rangeslider/js/ion.rangeSlider.min.js"></script>
Copy

Copy-paste the following <script> near the end of your pages under JS Front to enable it.

<script src="../../assets/js/components/hs.range-slider.js"></script>
Copy

Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.

<script>
  $(document).on('ready', function () {
    // initialization of forms
    $.HSCore.components.HSRangeSlider.init('.js-range-slider');
  });
</script>
Copy

Examples

Basic parameters

Start without parameters

<!-- Range Slider -->
<input class="js-range-slider" type="text"
       data-extra-classes="u-range-slider">
<!-- End Range Slider -->
Copy

Set min value, max value and start point

<!-- Range Slider -->
<input class="js-range-slider" type="text"
       data-extra-classes="u-range-slider u-range-slider-indicator"
       data-type="single"
       data-hide-from-to="false"
       data-min="100"
       data-max="1000"
       data-from="550">
<!-- End Range Slider -->
Copy

Set type to double and specify range, also showing grid and adding prefix "$"

<!-- Range Slider -->
<input class="js-range-slider" type="text"
       data-extra-classes="u-range-slider u-range-slider-grid"
       data-type="double"
       data-grid="true"
       data-hide-from-to="false"
       data-min="0"
       data-max="1000"
       data-from="200"
       data-to="800"
       data-prefix="$">
<!-- End Range Slider -->
Copy

Set up range and step

Set up range with negative values

<!-- Range Slider -->
<input class="js-range-slider" type="text"
       data-extra-classes="u-range-slider u-range-slider-indicator u-range-slider-grid"
       data-type="double"
       data-grid="true"
       data-hide-from-to="false"
       data-min="-1000"
       data-max="1000"
       data-from="-500"
       data-to="500">
<!-- End Range Slider -->
Copy

Using step 250

<!-- Range Slider -->
<input class="js-range-slider" type="text"
       data-extra-classes="u-range-slider u-range-slider-indicator u-range-slider-grid"
       data-type="double"
       data-grid="true"
       data-hide-from-to="false"
       data-min="-1000"
       data-max="1000"
       data-from="-500"
       data-to="500"
       data-step="250">
<!-- End Range Slider -->
Copy

Set up range with fractional values, using fractional step

<!-- Range Slider -->
<input class="js-range-slider" type="text"
       data-extra-classes="u-range-slider u-range-slider-grid"
       data-type="double"
       data-grid="true"
       data-hide-from-to="false"
       data-min="-12.8"
       data-max="12.8"
       data-from="-3.2"
       data-to="3.2"
       data-step="0.1">
<!-- End Range Slider -->
Copy

Select required amount

Set up range with a single range result

Result: 
<!-- Range Slider -->
<input class="js-range-slider" type="text"
       data-extra-classes="u-range-slider"
       data-type="single"
       data-min="0"
       data-max="1000"
       data-from="250"
       data-to="750"
       data-result-min="#rangeSliderExample1MinResult">

<div class="mt-4">
  <span class="text-muted">Result:</span>
  <span id="rangeSliderExample1MinResult" class="text-primary"></span>
</div>
<!-- End Range Slider -->
Copy

Set up range with a single (editable) result

Select required amount 
<!-- Range Slider -->
<input class="js-range-slider" type="text"
       data-extra-classes="u-range-slider u-range-slider-indicator u-range-slider-grid"
       data-type="single"
       data-grid="true"
       data-hide-from-to="false"
       data-min="0"
       data-max="1000"
       data-from="250"
       data-to="750"
       data-result-min="#rangeSliderExample2MinResult">

<div class="d-flex justify-content-between align-items-center mt-4">
  <span class="text-muted">Select required amount</span>
  <div class="js-focus-state">
    <div class="input-group">
      <div class="input-group-prepend">
        <span class="input-group-text">
          <span class="fas fa-dollar-sign"></span>
        </span>
      </div>
      <input type="text" class="form-control max-width-9" id="rangeSliderExample2MinResult">
    </div>
  </div>
</div>
<!-- End Range Slider -->
Copy

Set up range with double range results

<!-- Range Slider -->
<input class="js-range-slider" type="text"
       data-extra-classes="u-range-slider u-range-slider-indicator u-range-slider-grid"
       data-type="double"
       data-grid="true"
       data-hide-from-to="false"
       data-min="0"
       data-max="1000"
       data-from="250"
       data-to="750"
       data-result-min="#rangeSliderExample3MinResult"
       data-result-max="#rangeSliderExample3MaxResult">
<div class="d-flex justify-content-between mt-4">
  <input type="text" class="form-control max-width-9" id="rangeSliderExample3MinResult">
  <input type="text" class="form-control max-width-9 mt-0" id="rangeSliderExample3MaxResult">
</div>
<!-- End Range Slider -->
Copy

Range with Bar charts

Set up range with bar chart. For more information about Bar charts, see Charts page.

Min price: 
<!-- Bar Charts -->
<div class="position-relative overflow-hidden" style="height: 100px;">
  <div class="js-bar-chart position-absolute w-100"
       data-series='[
          [2,3,5,7,8,5,3,2,3,6,5,4,7,5,4,3,2]
       ]'
       data-is-show-axis-x="false"
       data-is-show-axis-y="false"
       data-is-full-width="true"
       data-is-stack-bars="true"
       data-height="100px"
       data-high="8"
       data-low="0"
       data-distance="0"
       data-stroke-width="50"
       data-stroke-color="#377dff"></div>

  <div id="foregroundBarChartSingleResult" class="position-absolute w-100 h-100 overflow-hidden">
    <div class="js-bar-chart position-absolute"
         data-series='[
          [2,3,5,7,8,5,3,2,3,6,5,4,7,5,4,3,2]
         ]'
         data-is-show-axis-x="false"
         data-is-show-axis-y="false"
         data-is-full-width="true"
         data-is-stack-bars="true"
         data-height="100px"
         data-high="8"
         data-low="0"
         data-distance="0"
         data-stroke-width="50"
         data-stroke-color="#e7eaf3"></div>
  </div>
</div>
<!-- End Bar Charts -->

<!-- Range Slider -->
<input class="js-range-slider" type="text"
       data-extra-classes="u-range-slider"
       data-type="single"
       data-foreground-target="#foregroundBarChartSingleResult"
       data-min="0"
       data-max="1000"
       data-from="500"
       data-result-min="#rangeSliderExample4MinResult">

<div class="d-flex justify-content-between align-items-center mt-4">
  <div>
    <span class="text-muted">Min price:</span>
    <span id="rangeSliderExample4MinResult" class="text-muted"></span>
  </div>
  <div>
    <span class="text-muted">Max price:</span>
    <span id="rangeSliderExample4MaxResult" class="text-muted"></span>
  </div>
</div>
<!-- End Range Slider -->
Copy
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/chartist/dist/chartist.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/chartist/dist/chartist.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.chartist-bar-chart.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of chartist bar chart
    $.HSCore.components.HSChartistBarChart.init('.js-bar-chart');
  });

  $(window).on('resize', function() {
    setTimeout(function() {
      $.HSCore.components.HSChartistBarChart.init('.js-bar-chart');
    }, 800);
  });
</script>
Copy

Set up range with double bar chart results

Min price:
Max price: 
<!-- Bar Charts -->
<div class="position-relative overflow-hidden" style="height: 100px;">
  <div class="js-bar-chart position-absolute w-100"
       data-series='[
          [2,3,5,7,8,5,3,2,3,6,5,4,7,5,4,3,2]
       ]'
       data-is-show-axis-x="false"
       data-is-show-axis-y="false"
       data-is-full-width="true"
       data-is-stack-bars="true"
       data-height="100px"
       data-high="8"
       data-low="0"
       data-distance="0"
       data-stroke-width="50"
       data-stroke-color="#e7eaf3"></div>

  <div id="foregroundBarChartDoubleResult" class="position-absolute h-100 overflow-hidden">
    <div class="js-bar-chart position-absolute"
         data-series='[
          [2,3,5,7,8,5,3,2,3,6,5,4,7,5,4,3,2]
         ]'
         data-is-show-axis-x="false"
         data-is-show-axis-y="false"
         data-is-full-width="true"
         data-is-stack-bars="true"
         data-height="100px"
         data-high="8"
         data-low="0"
         data-distance="0"
         data-stroke-width="50"
         data-stroke-color="#377dff"></div>
  </div>
</div>
<!-- End Bar Charts -->

<!-- Range Slider -->
<input class="js-range-slider" type="text"
       data-extra-classes="u-range-slider"
       data-type="double"
       data-foreground-target="#foregroundBarChartDoubleResult"
       data-min="0"
       data-max="1000"
       data-from="250"
       data-to="750"
       data-result-min="#rangeSliderExample5MinResult"
       data-result-max="#rangeSliderExample5MaxResult">

<div class="d-flex justify-content-between align-items-center mt-4">
  <div>
    <span class="text-muted">Min price:</span>
    <span id="rangeSliderExample5MinResult" class="text-muted"></span>
  </div>
  <div>
    <span class="text-muted">Max price:</span>
    <span id="rangeSliderExample5MaxResult" class="text-muted"></span>
  </div>
</div>
<!-- End Range Slider -->
Copy
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/chartist/dist/chartist.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/chartist/dist/chartist.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.chartist-bar-chart.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of chartist bar chart
    $.HSCore.components.HSChartistBarChart.init('.js-bar-chart');
  });

  $(window).on('resize', function() {
    setTimeout(function() {
      $.HSCore.components.HSChartistBarChart.init('.js-bar-chart');
    }, 800);
  });
</script>
Copy

Range with Area charts

Set up range with area chart. For more information about Area charts, see Charts page.

Min price: 
<!-- Area Charts -->
<div class="position-relative overflow-hidden" style="height: 100px;">
  <div class="js-area-chart position-absolute w-100"
       data-height="100px"
       data-high="1500"
       data-low="0"
       data-offset-x="0"
       data-offset-y="0"
       data-is-show-area="true"
       data-is-show-line="false"
       data-is-show-point="false"
       data-is-full-width="true"

       data-is-stack-bars="true"
       data-is-show-axis-x="false"
       data-is-show-axis-y="false"
       data-is-show-tooltips="false"
       data-fill-opacity="1"
       data-fill-colors='["#377dff"]'
       data-stroke-color="#377dff"
       data-text-color-x="#77838f"
       data-text-offset-top-x="0"

       data-text-size-y=".75rem"
       data-text-color-y="#77838f"
       data-points-colors='["#377dff"]'
       data-series='[
         [
           {"value": 0},
           {"value": 100},
           {"value": 700},
           {"value": 500},
           {"value": 1500},
           {"value": 200},
           {"value": 100},
           {"value": 50},
           {"value": 0}
         ]
       ]'
       data-labels='["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"]'></div>

    <div id="foregroundAreaChartSingleResult" class="position-absolute w-100 h-100 overflow-hidden">
      <div class="js-area-chart position-absolute"
           data-height="100px"
           data-high="1500"
           data-low="0"
           data-offset-x="0"
           data-offset-y="0"
           data-is-show-area="true"
           data-is-show-line="false"
           data-is-show-point="false"
           data-is-full-width="true"

           data-is-stack-bars="true"
           data-is-show-axis-x="false"
           data-is-show-axis-y="false"
           data-is-show-tooltips="false"
           data-fill-opacity="1"
           data-fill-colors='["#e7eaf3"]'
           data-stroke-color="#e7eaf3"
           data-text-color-x="#77838f"
           data-text-offset-top-x="0"

           data-text-size-y=".75rem"
           data-text-color-y="#77838f"
           data-points-colors='["#e7eaf3"]'
           data-series='[
             [
               {"value": 0},
               {"value": 100},
               {"value": 700},
               {"value": 500},
               {"value": 1500},
               {"value": 200},
               {"value": 100},
               {"value": 50},
               {"value": 0}
             ]
           ]'
           data-labels='["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"]'></div>
    </div>
</div>
<!-- End Area Charts -->

<!-- Range Slider -->
<input class="js-range-slider" type="text"
       data-extra-classes="u-range-slider"
       data-type="single"
       data-foreground-target="#foregroundAreaChartSingleResult"
       data-min="0"
       data-max="1000"
       data-from="500"
       data-result-min="#rangeSliderExample6MinResult">

<div class="mt-4">
  <span class="text-muted">Min price:</span>
  <span id="rangeSliderExample6MinResult" class="text-muted"></span>
</div>
<!-- End Range Slider -->
Copy
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/chartist/dist/chartist.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/chartist/dist/chartist.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.chartist-area-chart.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of chartist area chart
    $.HSCore.components.HSChartistAreaChart.init('.js-area-chart');
  });

  $(window).on('resize', function() {
    setTimeout(function() {
      $.HSCore.components.HSChartistAreaChart.init('.js-area-chart');
    }, 800);
  });
</script>
Copy

Set up range with double area chart results

Min price:
Max price: 
<!-- Area Charts -->
<div class="position-relative overflow-hidden" style="height: 100px;">
  <div class="js-area-chart position-absolute w-100"
       data-height="100px"
       data-high="1500"
       data-low="0"
       data-offset-x="0"
       data-offset-y="0"
       data-is-show-area="true"
       data-is-show-line="false"
       data-is-show-point="false"
       data-is-full-width="true"

       data-is-stack-bars="true"
       data-is-show-axis-x="false"
       data-is-show-axis-y="false"
       data-is-show-tooltips="false"
       data-fill-opacity="1"
       data-fill-colors='["#e7eaf3"]'
       data-stroke-color="#e7eaf3"
       data-text-color-x="#77838f"
       data-text-offset-top-x="0"

       data-text-size-y=".75rem"
       data-text-color-y="#77838f"
       data-points-colors='["#e7eaf3"]'
       data-series='[
         [
           {"value": 0},
           {"value": 100},
           {"value": 700},
           {"value": 500},
           {"value": 1500},
           {"value": 200},
           {"value": 100},
           {"value": 50},
           {"value": 0}
         ]
       ]'
       data-labels='["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"]'></div>

    <div id="foregroundAreaChartDoubleResult" class="position-absolute h-100 overflow-hidden">
      <div class="js-area-chart position-absolute"
           data-height="100px"
           data-high="1500"
           data-low="0"
           data-offset-x="0"
           data-offset-y="0"
           data-is-show-area="true"
           data-is-show-line="false"
           data-is-show-point="false"
           data-is-full-width="true"

           data-is-stack-bars="true"
           data-is-show-axis-x="false"
           data-is-show-axis-y="false"
           data-is-show-tooltips="false"
           data-fill-opacity="1"
           data-fill-colors='["#377dff"]'
           data-stroke-color="#377dff"
           data-text-color-x="#77838f"
           data-text-offset-top-x="0"

           data-text-size-y=".75rem"
           data-text-color-y="#77838f"
           data-points-colors='["#377dff"]'
           data-series='[
             [
               {"value": 0},
               {"value": 100},
               {"value": 700},
               {"value": 500},
               {"value": 1500},
               {"value": 200},
               {"value": 100},
               {"value": 50},
               {"value": 0}
             ]
           ]'
           data-labels='["2010", "2011", "2012", "2013", "2014", "2015", "2016", "2017", "2018"]'></div>
    </div>
</div>
<!-- End Area Charts -->

<!-- Range Slider -->
<input class="js-range-slider" type="text"
       data-extra-classes="u-range-slider"
       data-type="double"
       data-foreground-target="#foregroundAreaChartDoubleResult"
       data-min="0"
       data-max="1000"
       data-from="250"
       data-to="750"
       data-result-min="#rangeSliderExample7MinResult"
       data-result-max="#rangeSliderExample7MaxResult">

<div class="d-flex justify-content-between align-items-center mt-4">
  <div>
    <span class="text-muted">Min price:</span>
    <span id="rangeSliderExample7MinResult" class="text-muted"></span>
  </div>
  <div>
    <span class="text-muted">Max price:</span>
    <span id="rangeSliderExample7MaxResult" class="text-muted"></span>
  </div>
</div>
Copy
<!-- CSS Implementing Plugins -->
<link rel="stylesheet" href="../../assets/vendor/chartist/dist/chartist.min.css">
Copy
<!-- JS Implementing Plugins -->
<script src="../../assets/vendor/chartist/dist/chartist.min.js"></script>

<!-- JS Front -->
<script src="../../assets/js/components/hs.chartist-are-chart.js"></script>

<!-- JS Plugins Init. -->
<script>
  $(document).on('ready', function () {
    // initialization of chartist area chart
    $.HSCore.components.HSChartistAreaChart.init('.js-area-chart');
  });

  $(window).on('resize', function() {
    setTimeout(function() {
      $.HSCore.components.HSChartistAreaChart.init('.js-area-chart');
    }, 800);
  });
</script>
Copy

JavaScript behavior

For a full JavaScript behavior, see the official documentation: Settings .

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-type="".

Attribute Description

data-result-min

 If data-type="" is set to single, then the block ID to which the current value will be transmitted. If data-type="double", then the block ID to which the value will be transmitted from the left slider.

data-result-max

 If data-type="double", then the block ID to which the value will be transmitted from the right slider.

data-result-secondary

 ID of the block to which the value will be transmitted from data-secondary-value='{"values": [1,2,3,4,5,6]}'

data-secondary-value

 An array with data for a chart, in which values are the values of the minor chart, and steps — the value of the main chart upon reaching which the corresponding value from the values will be displayed.

data-grid

 If is set to true, it turns on the slider mode with graphs.

data-foreground-target

 Graph ID in the foreground - this graph will change the width depending on the position of the sliders.
Previous Password strength
Next Slick carousel
Contact Us