Range Slider

It is an easy and responsive range slider.

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-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-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-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>
            
          

Examples

Basic parameters

Start without parameters

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

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 -->
                  
                

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 -->
                  
                

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 -->
                  
                

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 -->
                  
                

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 -->
                  
                

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 -->
                  
                

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 -->
                  
                

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 -->
                  
                

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="#e7eaf3"></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="#377dff"></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 -->
                  
                
                  
                    <!-- CSS Implementing Plugins -->
                    <link rel="stylesheet" href="../../assets/vendor/chartist/dist/chartist.min.css">
                  
                
                  
                    <!-- 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>
                  
                

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 -->
                  
                
                  
                    <!-- CSS Implementing Plugins -->
                    <link rel="stylesheet" href="../../assets/vendor/chartist/dist/chartist.min.css">
                  
                
                  
                    <!-- 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>
                  
                

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='["#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="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='["#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="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 -->
                  
                
                  
                    <!-- CSS Implementing Plugins -->
                    <link rel="stylesheet" href="../../assets/vendor/chartist/dist/chartist.min.css">
                  
                
                  
                    <!-- 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>
                  
                

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>
                  
                
                  
                    <!-- CSS Implementing Plugins -->
                    <link rel="stylesheet" href="../../assets/vendor/chartist/dist/chartist.min.css">
                  
                
                  
                    <!-- 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>
                  
                

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.