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-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.
Contact Us