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