How to use
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="../node_modules/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="../node_modules/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/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 examples
Start without parameters.
Set min value, max value and start point.
Set type to double and specify range, also showing grid and adding prefix "$".
Set up range and step
Set up range with negative values.
Using step 250.
Set up range with fractional values, using fractional step.
Select required amount
Set up range with a single range result.
Set up range with a single (editable) result.
Set up range with double range results.
Modal example
Range bar with Bar charts
Set up range with bar chart.
Set up range with double bar chart results.
Range bar with Area charts
Set up range with area chart.
Set up range with double bar chart results.
Methods
| Parameters | Description | Default value |
|---|---|---|
type
|
Choose slider type, could be single - for one handle, or double for two handles. |
single
|
hide_min_max
|
Hide min and max labels. |
true
|
hide_from_to
|
Hide from and to labels. |
true
|
result_min_target_el
|
Element for output min value result. |
null
|
result_max_target_el
|
Element for output max value result. |
null
|