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?
To add hs.range-slider.js in your page, wrap any block in
a parent element with an ID or class and add the same ID or the class in the JS INIT function of the
plugin.
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link href="../../assets/vendor/ion-rangeslider/css/ion.rangeSlider.css"></link>
Copy-paste the following <script> near the end of your pages under JS
Nova 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>
// initialization of summernote plugin
$(document).on('ready', function () {
$.HSCore.components.HSRangeSlider.init('.js-range-slider');
});
</script>
Min and max value
Use data-min="100" and data-max="1000" attributes
<input type="text" class="js-range-slider"
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">
Grid
Use data-grid="true" attribute
<input type="text" class="js-range-slider"
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="200"
data-to="800">
Steps
Use data-step="250" attribute
<input type="text" class="js-range-slider"
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">
Prefix "$"
Use data-prefix="$" attribute
<input type="text" class="js-range-slider"
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="200"
data-to="800"
data-prefix="$">
Fractional Values
<input type="text" class="js-range-slider"
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="-12.8"
data-max="12.8"
data-from="-3.2"
data-to="3.2"
data-step="0.1">
Modal
<!-- Button Trigger Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Open modal
</button>
<!-- End Button Trigger Modal -->
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Example Title </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">× </span>
</button>
</div>
<div class="modal-body">
<input type="text" class="js-range-slider"
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="200"
data-to="800">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close </button>
<button type="button" class="btn btn-primary">Continue </button>
</div>
</div>
</div>
</div>
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 |
|---|---|
|
|
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. |
|
|
If data-type="double", then the block ID to which the value will be transmitted from the right slider. |
|
|
ID of the block to which the value will be transmitted from data-secondary-value='{"values": [1,2,3,4,5,6]}' |
|
|
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. |
|
|
If is set to true, it turns on the slider mode with graphs. |
|
|
Graph ID in the foreground - this graph will change the width depending on the position of the sliders. |