Range Slider

It is an easy and responsive range slider.

Ion RangeSlider.js documentation

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/hs.ion-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 ion range slider
                    $('.js-ion-range-slider').each(function () {
                      $.HSCore.components.HSIonRangeSlider.init($(this));
                    });
                  });
                </script>
              
            

Examples

Basic parameters

Start without parameters

                    
                      <!-- Range Slider -->
                      <input class="js-ion-range-slider" type="text"
                             data-hs-ion-range-slider-options='{
                               "extra_classes": "range-slider"
                             }'>
                      <!-- End Range Slider -->
                    
                  

Set min value, max value and start point

                    
                      <!-- Range Slider -->
                      <input class="js-ion-range-slider" type="text"
                         data-hs-ion-range-slider-options='{
                           "extra_classes": "range-slider range-slider-indicator",
                           "hide_from_to": false,
                           "min": 100,
                           "max": 1000,
                           "from": 500
                         }'>
                      <!-- End Range Slider -->
                    
                  

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

                    
                      <!-- Range Slider -->
                      <input class="js-ion-range-slider" type="text"
                             data-hs-ion-range-slider-options='{
                               "extra_classes": "range-slider range-slider-indicator range-slider-grid",
                               "type": "double",
                               "grid": true,
                               "hide_from_to": false,
                               "prefix": "$",
                               "min": 0,
                               "max": 500,
                               "from": 25,
                               "to": 475
                             }'>
                      <!-- End Range Slider -->
                    
                  

Set up range and step

Set up range with negative values

                    
                      <!-- Range Slider -->
                      <input class="js-ion-range-slider" type="text"
                         data-hs-ion-range-slider-options='{
                           "extra_classes": "range-slider range-slider-indicator range-slider-grid",
                           "type": "double",
                           "grid": true,
                           "hide_from_to": false,
                           "min": -1000,
                           "max": 1000,
                           "from": -500,
                           "to": 500
                         }'>
                      <!-- End Range Slider -->
                    
                  

Using step 250

                    
                      <!-- Range Slider -->
                      <input class="js-ion-range-slider" type="text"
                         data-hs-ion-range-slider-options='{
                           "extra_classes": "range-slider range-slider-indicator range-slider-grid",
                           "type": "double",
                           "grid": true,
                           "hide_from_to": false,
                           "min": -1000,
                           "max": 1000,
                           "from": -500,
                           "to": 500,
                           "step": 250
                         }'>
                      <!-- End Range Slider -->
                    
                  

Set up range with fractional values, using fractional step

                    
                      <!-- Range Slider -->
                      <input class="js-ion-range-slider" type="text"
                         data-hs-ion-range-slider-options='{
                           "extra_classes": "range-slider range-slider-indicator range-slider-grid",
                           "type": "double",
                           "grid": true,
                           "hide_from_to": false,
                           "min": -12.8,
                           "max": 12.8,
                           "from": -3.2,
                           "to": 3.2,
                           "step": 0.1
                         }'>
                      <!-- End Range Slider -->
                    
                  

Select required amount

Set up range with a single range result

Result:
                    
                      <!-- Range Slider -->
                      <input class="js-ion-range-slider" type="text"
                             data-hs-ion-range-slider-options='{
                               "extra_classes": "range-slider",
                               "min": 0,
                               "max": 1000,
                               "from": 250,
                               "to": 750,
                               "result_min_target_el": "#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-ion-range-slider" type="text"
                         data-hs-ion-range-slider-options='{
                           "extra_classes": "range-slider range-slider-indicator range-slider-grid",
                           "grid": true,
                           "hide_from_to": false,
                           "prefix": "$",
                           "min": 0,
                           "max": 1000,
                           "from": 250,
                           "to": 750,
                           "result_min_target_el": "#rangeSliderExample2MinResult"
                         }'>

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

Set up range with double range results

                    
                      <!-- Range Slider -->
                      <input class="js-ion-range-slider" type="text"
                             data-hs-ion-range-slider-options='{
                               "extra_classes": "range-slider range-slider-indicator range-slider-grid",
                               "type": "double",
                               "grid": true,
                               "hide_from_to": false,
                               "prefix": "$",
                               "min": 0,
                               "max": 500,
                               "from": 25,
                               "to": 475,
                               "result_min_target_el": "#rangeSliderExample3MinResult",
                               "result_max_target_el": "#rangeSliderExample3MaxResult"
                             }'>
                      <div class="d-flex justify-content-between mt-4">
                        <input type="text" class="form-control max-w-9rem" id="rangeSliderExample3MinResult">
                        <input type="text" class="form-control max-w-9rem mt-0" id="rangeSliderExample3MaxResult">
                      </div>
                      <!-- End Range Slider -->
                    
                  

Range with Bar charts

Set up range with bar chart.

Min price:
                    
                      <!-- Bar Chart -->
                      <div class="position-relative overflow-hidden" style="height: 100px;">
                        <div class="position-absolute w-100 overflow-hidden">
                          <div style="height: 100px;">
                            <canvas class="js-chart"
                                    data-chartjs-options='{
                                      "type": "bar",
                                      "data": {
                                        "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
                                        "datasets": [{
                                          "data": [2, 3, 5, 7, 8, 5, 3, 2, 3, 6, 5, 4, 7, 5, 4, 3, 2],
                                          "backgroundColor": "#377dff",
                                          "borderColor": "#377dff"
                                        }]
                                      },
                                      "options": {
                                        "scales": {
                                          "yAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            },
                                            "ticks": {
                                              "beginAtZero": true
                                            }
                                          }],
                                          "xAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            }
                                          }]
                                        },
                                        "tooltips": {
                                          "custom": false
                                        }
                                      }
                                    }'></canvas>
                          </div>
                        </div>

                        <div id="foregroundBarChartSingleResult" class="position-absolute w-100 overflow-hidden">
                          <div style="height: 100px;">
                            <canvas class="js-chart"
                                    data-chartjs-options='{
                                      "type": "bar",
                                      "data": {
                                        "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
                                        "datasets": [{
                                          "data": [2, 3, 5, 7, 8, 5, 3, 2, 3, 6, 5, 4, 7, 5, 4, 3, 2],
                                          "backgroundColor": "#e7eaf3",
                                          "borderColor": "#e7eaf3"
                                        }]
                                      },
                                      "options": {
                                        "scales": {
                                          "yAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            },
                                            "ticks": {
                                              "beginAtZero": true
                                            }
                                          }],
                                          "xAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            }
                                          }]
                                        },
                                        "tooltips": {
                                          "custom": false
                                        }
                                      }
                                    }'></canvas>
                          </div>
                        </div>
                      </div>
                      <!-- End Bar Chart -->

                      <!-- Range Slider -->
                      <input class="js-ion-range-slider" type="text"
                             data-hs-ion-range-slider-options='{
                               "extra_classes": "range-slider",
                               "min": 0,
                               "max": 1000,
                               "from": 500,
                               "result_min_target_el": "#rangeSliderExample4MinResult",
                               "foreground_target_el": "#foregroundBarChartSingleResult"
                             }'>

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

                      <!-- JS Front -->
                      <script src="../../assets/js/hs.chartjs.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // initialization of chartjs
                          $('.js-chart').each(function () {
                            var chart = $.HSCore.components.HSChartJS.init($(this));
                          });
                        });
                      </script>
                    
                  

Set up range with double bar chart results

Min price:
Max price:
                    
                      <!-- Bar Chart -->
                      <div class="position-relative overflow-hidden" style="height: 100px;">
                        <div class="position-absolute w-100 overflow-hidden">
                          <div style="height: 100px;">
                            <canvas class="js-chart"
                                    data-chartjs-options='{
                                      "type": "bar",
                                      "data": {
                                        "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
                                        "datasets": [{
                                          "data": [2, 3, 5, 7, 8, 5, 3, 2, 3, 6, 5, 4, 7, 5, 4, 3, 2],
                                          "backgroundColor": "#e7eaf3",
                                          "borderColor": "#e7eaf3"
                                        }]
                                      },
                                      "options": {
                                        "scales": {
                                          "yAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            },
                                            "ticks": {
                                              "beginAtZero": true
                                            }
                                          }],
                                          "xAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            }
                                          }]
                                        },
                                        "tooltips": {
                                          "custom": false
                                        }
                                      }
                                    }'></canvas>
                          </div>
                        </div>

                        <div id="foregroundBarChartDoubleResult" class="position-absolute overflow-hidden">
                          <div style="height: 100px;">
                            <canvas class="js-chart"
                                    data-chartjs-options='{
                                      "type": "bar",
                                      "data": {
                                        "labels": ["", "", "", "", "", "", "", "", "", "", "", "", "", "", "", "", ""],
                                        "datasets": [{
                                          "data": [2, 3, 5, 7, 8, 5, 3, 2, 3, 6, 5, 4, 7, 5, 4, 3, 2],
                                          "backgroundColor": "#377dff",
                                          "borderColor": "#377dff"
                                        }]
                                      },
                                      "options": {
                                        "scales": {
                                          "yAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            },
                                            "ticks": {
                                              "beginAtZero": true
                                            }
                                          }],
                                          "xAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            }
                                          }]
                                        },
                                        "tooltips": {
                                          "custom": false
                                        }
                                      }
                                    }'></canvas>
                          </div>
                        </div>
                      </div>
                      <!-- End Bar Chart -->

                      <!-- Range Slider -->
                      <input class="js-ion-range-slider" type="text"
                             data-hs-ion-range-slider-options='{
                               "type": "double",
                               "extra_classes": "range-slider",
                               "min": 0,
                               "max": 1000,
                               "from": 250,
                               "to": 750,
                               "result_min_target_el": "#rangeSliderExampleDouble4MinResult",
                               "result_max_target_el": "#rangeSliderExampleDouble4MaxResult",
                               "foreground_target_el": "#foregroundBarChartDoubleResult"
                             }'>

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

                      <!-- JS Front -->
                      <script src="../../assets/js/hs.chartjs.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // initialization of chartjs
                          $('.js-chart').each(function () {
                            var chart = $.HSCore.components.HSChartJS.init($(this));
                          });
                        });
                      </script>
                    
                  

Range with Area charts

Set up range with area chart.

Min price:
                    
                      <!-- Area Chart -->
                      <div class="position-relative overflow-hidden" style="height: 100px;">
                        <div class="position-absolute w-100 overflow-hidden">
                          <div style="height: 100px;">
                            <canvas class="js-chart"
                                    data-chartjs-options='{
                                      "type": "line",
                                      "data": {
                                        "labels": ["", "", "", "", "", "", "", "", ""],
                                        "datasets": [{
                                          "data": [0, 100, 700, 500, 1500, 200, 100, 50, 0],
                                          "backgroundColor": "#377dff",
                                          "borderColor": "#377dff"
                                        }]
                                      },
                                      "options": {
                                        "layout": {
                                          "padding": {
                                            "top": 1.5
                                          }
                                        },
                                        "scales": {
                                          "yAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            }
                                          }],
                                          "xAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            }
                                          }]
                                        },
                                        "tooltips": {
                                          "custom": false
                                        },
                                        "elements": {
                                          "point": {
                                            "radius": 0
                                          }
                                        }
                                      }
                                    }'></canvas>
                          </div>
                        </div>

                        <div id="foregroundAreaChartSingleResult" class="position-absolute w-100 overflow-hidden">
                          <div style="height: 100px;">
                            <canvas class="js-chart"
                                    data-chartjs-options='{
                                      "type": "line",
                                      "data": {
                                        "labels": ["", "", "", "", "", "", "", "", ""],
                                        "datasets": [{
                                          "data": [0, 100, 700, 500, 1500, 200, 100, 50, 0],
                                          "backgroundColor": "#e7eaf3",
                                          "borderColor": "#e7eaf3"
                                        }]
                                      },
                                      "options": {
                                        "layout": {
                                          "padding": {
                                            "top": 1.5
                                          }
                                        },
                                        "scales": {
                                          "yAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            },
                                            "ticks": {
                                              "beginAtZero": true
                                            }
                                          }],
                                          "xAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            }
                                          }]
                                        },
                                        "tooltips": {
                                          "custom": false
                                        },
                                        "elements": {
                                          "point": {
                                            "radius": 0
                                          }
                                        }
                                      }
                                    }'></canvas>
                          </div>
                        </div>
                      </div>
                      <!-- End Area Chart -->

                      <!-- Range Slider -->
                      <input class="js-ion-range-slider" type="text"
                             data-hs-ion-range-slider-options='{
                               "extra_classes": "range-slider",
                               "min": 0,
                               "max": 1000,
                               "from": 500,
                               "result_min_target_el": "#rangeSliderExample5MinResult",
                               "foreground_target_el": "#foregroundAreaChartSingleResult"
                             }'>

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

                      <!-- JS Front -->
                      <script src="../../assets/js/hs.chartjs.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // initialization of chartjs
                          $('.js-chart').each(function () {
                            var chart = $.HSCore.components.HSChartJS.init($(this));
                          });
                        });
                      </script>
                    
                  

Set up range with double area chart results

Min price:
Max price:
                    
                      <!-- Area Chart -->
                      <div class="position-relative overflow-hidden" style="height: 100px;">
                        <div class="position-absolute w-100 overflow-hidden">
                          <div style="height: 100px;">
                            <canvas class="js-chart"
                                    data-chartjs-options='{
                                      "type": "line",
                                      "data": {
                                        "labels": ["", "", "", "", "", "", "", "", ""],
                                        "datasets": [{
                                          "data": [0, 100, 700, 500, 1500, 200, 100, 50, 0],
                                          "backgroundColor": "#e7eaf3",
                                          "borderColor": "#e7eaf3"
                                        }]
                                      },
                                      "options": {
                                        "layout": {
                                          "padding": {
                                            "top": 1.5
                                          }
                                        },
                                        "scales": {
                                          "yAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            },
                                            "ticks": {
                                              "beginAtZero": true
                                            }
                                          }],
                                          "xAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            }
                                          }]
                                        },
                                        "tooltips": {
                                          "custom": false
                                        },
                                        "elements": {
                                          "point": {
                                            "radius": 0
                                          }
                                        }
                                      }
                                    }'></canvas>
                          </div>
                        </div>

                        <div id="foregroundAreaChartDoubleResult" class="position-absolute overflow-hidden">
                          <div style="height: 100px;">
                            <canvas class="js-chart"
                                    data-chartjs-options='{
                                      "type": "line",
                                      "data": {
                                        "labels": ["", "", "", "", "", "", "", "", ""],
                                        "datasets": [{
                                          "data": [0, 100, 700, 500, 1500, 200, 100, 50, 0],
                                          "backgroundColor": "#377dff",
                                          "borderColor": "#377dff"
                                        }]
                                      },
                                      "options": {
                                        "layout": {
                                          "padding": {
                                            "top": 1.5
                                          }
                                        },
                                        "scales": {
                                          "yAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            },
                                            "ticks": {
                                              "beginAtZero": true
                                            }
                                          }],
                                          "xAxes": [{
                                            "display": false,
                                            "gridLines": {
                                              "display": false,
                                              "drawBorder": false
                                            }
                                          }]
                                        },
                                        "tooltips": {
                                          "custom": false
                                        },
                                        "elements": {
                                          "point": {
                                            "radius": 0
                                          }
                                        }
                                      }
                                    }'></canvas>
                          </div>
                        </div>
                      </div>
                      <!-- End Area Chart -->

                      <!-- Range Slider -->
                      <input class="js-ion-range-slider" type="text"
                             data-hs-ion-range-slider-options='{
                               "type": "double",
                               "extra_classes": "range-slider",
                               "min": 0,
                               "max": 1000,
                               "from": 250,
                               "to": 750,
                               "result_min_target_el": "#rangeSliderExampleDouble5MinResult",
                               "result_max_target_el": "#rangeSliderExampleDouble5MaxResult",
                               "foreground_target_el": "#foregroundAreaChartDoubleResult"
                             }'>

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

                      <!-- JS Front -->
                      <script src="../../assets/js/hs.chartjs.js"></script>

                      <!-- JS Plugins Init. -->
                      <script>
                        $(document).on('ready', function () {
                          // initialization of chartjs
                          $('.js-chart').each(function () {
                            var chart = $.HSCore.components.HSChartJS.init($(this));
                          });
                        });
                      </script>
                    
                  

SCSS

SCSS-files of the component can be found here assets/scss/front/vendor/range-slider/

JavaScript behavior

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

Extend

By assigning a variable, you can call the standard methods of the plugin:

              
                <script>
                  $(document).on('ready', function () {
                    // initialization of range slider
                    $.HSCore.components.HSIonRangeSlider.init($(this), {
                      onFinish: function () {
                        console.log('Finished!!!');
                      }
                    });
                  });
                </script>
              
            

Attributes

By assigning a variable, you can call the standard methods of the plugin:

              
                data-hs-ion-range-slider-options='{
                 ...

                 // Custom
                 "foreground_target_el": null,
                 "secondary_target_el": "tooltip",
                 "secondary_val": {
                   "steps": null,
                   "values": null
                 },
                 "result_min_target_el": null,
                 "result_max_target_el": null
              }' - array
              
            

Methods

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-hs-ion-range-slider-options='{}'. For more detailed or missing attributes/functions, see the official Ion RangeSlider.js documentation page.

Parameters Description Default value

type

Choose slider type, could be single - for one handle, or double for two handles 'single'

hide_min_max

Hides min and max labels true

hide_from_to

Hide from and to labels true

foreground_target_el

Chart ID in the foreground, this chart will change the width depending on the position of the sliders null

secondary_target_el

ID of the block to which the value from secondary_val.values will be transferred null

secondary_val.steps

the value of the main chart upon reaching which the corresponding value from secondary_val.values will be displayed null

secondary_val.values

background graph values null

result_min_target_el

If type is single, then the ID of the block to which the current value will be transmitted. If type is set to double, then the ID of the block to which the value will be transferred from the left slider null

result_max_target_el

If type is in the value double, then the ID of the block to which the value from the right slider will be transferred null