How to use
Copy-paste the stylesheet <link> into your <head> to load the CSS.
<link rel="stylesheet" href="./node_modules/nouislider/dist/nouislider.min.css">
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./node_modules/nouislider/dist/nouislider.min.js"></script>
Copy-paste the following <script> near the end of your pages under JS Implementing Plugins to enable it.
<script src="./assets/js/hs.nouislider.js"></script>
Copy-paste the init function under JS Plugins Init., before the closing </body> tag, to enable it.
<script>
(function() {
// INITIALIZATION OF NOUISLIDER
// =======================================================
HSCore.components.HSNoUISlider.init('.js-nouislider')
})()
</script>
Basic example
<div class="range-slider">
<div class="js-nouislider"
data-hs-nouislider-options='{
"range": {
"min": 0,
"max": 100
},
"connect": [true, false],
"start": 40
}'>
</div>
</div>
With tooltip
<div class="range-slider">
<div class="js-nouislider"
data-hs-nouislider-options='{
"range": {
"min": 0,
"max": 100
},
"showTooltips": true,
"connect": [true, false],
"start": 40
}'>
</div>
</div>
Range example
<div class="range-slider">
<div class="js-nouislider"
data-hs-nouislider-options='{
"range": {
"min": 0,
"max": 1000
},
"start": [250, 750]
}'>
</div>
</div>
Range with tooltip
Pips
<div class="range-slider">>
<div class="js-nouislider"
data-hs-nouislider-options='{
"range": {
"min": 0,
"max": 500
},
"pips": {
"mode": "values",
"values": [0, 125, 250, 375, 500],
"density": 20
},
"start": [140, 300],
"showTooltips": true
}'>
</div>
</div>
Pips auto values
<div class="range-slider">>
<div class="js-nouislider"
data-hs-nouislider-options='{
"range": {
"min": 0,
"max": 500
},
"pips": {
"mode": "count",
"values": 5
},
"start": [140, 300],
"showTooltips": true,
"tooltip": {
"prefix": "$"
}
}'>
</div>
</div>
Output as text
Result:
<div class="range-slider">
<div class="js-nouislider"
data-hs-nouislider-options='{
"range": {
"min": 0,
"max": 1000
},
"connect": [true, false],
"start": [750],
"showTooltips": true,
"result_min_target_el": "#rangeSliderExample1MinResult"
}'>
</div>
</div>
<div class="mt-4">
<span class="text-muted">Result:</span>
<span id="rangeSliderExample1MinResult" class="text-primary"></span>
</div>
Min value input
<div class="range-slider">>
<div class="js-nouislider"
data-hs-nouislider-options='{
"range": {
"min": 0,
"max": 1000
},
"connect": [true, false],
"start": [750],
"showTooltips": true,
"result_min_target_el": "#rangeSliderExample2MinResult"
}'>
</div>
</div>
<div class="row mt-4">
<div class="col">
<input type="number" class="form-control form-control-sm" id="rangeSliderExample2MinResult">
</div>
</div>
Min and max values input
Min price:
Max price:
<div class="range-slider">>
<div class="js-nouislider"
data-hs-nouislider-options='{
"range": {
"min": 0,
"max": 1000
},
"start": [250, 750],
"showTooltips": true,
"result_min_target_el": "#rangeSliderExampleDouble4MinResult",
"result_max_target_el": "#rangeSliderExampleDouble4MaxResult"
}'>
</div>
</div>
<div class="row justify-content-center mt-5">
<div class="col">
<span class="d-block small mb-9">Min price:</span>
<input type="text" class="form-control form-control-sm" id="rangeSliderExampleDouble4MinResult">
</div>
<!-- End Col -->
<div class="col">
<span class="d-block small mb-9">Max price:</span>
<input type="text" class="form-control form-control-sm" id="rangeSliderExampleDouble4MaxResult">
</div>
<!-- End Col -->
</div>
<!-- End Row -->
Chart example
<!-- Bar Chart -->
<div class="position-relative overflow-hidden" style="height: 6rem;">
<div class="position-absolute w-100 overflow-hidden">
<div style="height: 6rem;">
<canvas class="js-chart"
data-hs-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": {
"responsive": true,
"scales": {
"y": {
"display": false,
"gridLines": {
"display": false,
"drawBorder": false
},
"ticks": {
"beginAtZero": true
}
},
"x": {
"display": false,
"gridLines": {
"display": false,
"drawBorder": false
}
}
},
"plugins": {
"tooltip": {
"external": false
}
}
}
}'></canvas>
</div>
</div>
<div id="foregroundBarChartDoubleResult" class="position-absolute overflow-hidden">
<div style="height: 6rem; width: 18rem;">
<canvas class="js-chart"
data-hs-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": {
"y": {
"display": false,
"gridLines": {
"display": false,
"drawBorder": false
},
"ticks": {
"beginAtZero": true
}
},
"x": {
"display": false,
"gridLines": {
"display": false,
"drawBorder": false
}
}
},
"plugins": {
"tooltip": {
"external": false
}
}
}
}'></canvas>
</div>
</div>
</div>
<!-- End Bar Chart -->
<div class="range-slider">
<div class="js-nouislider"
data-hs-nouislider-options='{
"range": {
"min": 0,
"max": 1000
},
"start": [250, 750],
"foreground_target_el": "#foregroundBarChartDoubleResult"
}'>
</div>
</div>
<!-- JS Implementing Plugins -->
<script src="../node_modules/chart.js/dist/Chart.min.js"></script>
<!-- JS Front -->
<script src="../assets/js/hs.chartjs.js"></script>
<!-- JS Plugins Init. -->
<script>
(function() {
// INITIALIZATION OF CHARTJS
// =======================================================
document.querySelectorAll('.js-chart').forEach(item => {
HSCore.components.HSChartJS.init(item)
})
})()
</script>
;
Methods
| Parameters | Description | Default value |
|---|---|---|
|
|
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 |
|
|
Chart ID in the foreground, this chart will change the width depending on the position of the sliders | null |
|
|
Tooltip options. | {prefix: null, postfix: null} |