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/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>
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. For more information about Bar charts, see Charts page.
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. For more information about Area charts, see Charts page.
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>
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 |
|---|---|---|
|
|
Choose slider type, could be single - for one handle, or double for two handles |
'single' |
|
|
Hides min and max labels |
true |
|
|
Hide from and to labels |
true |
|
|
Chart ID in the foreground, this chart will change the width depending on the position of the sliders | null |
|
|
ID of the block to which the value from secondary_val.values will be transferred |
null |
|
|
the value of the main chart upon reaching which the corresponding value from secondary_val.values will be displayed |
null |
|
|
background graph values | null |
|
|
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 |
|
|
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 |