How to use
Copy-paste the stylesheet <link>
into your <head>
to load the CSS.
<link rel="stylesheet" href="./assets/vendor/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="./assets/vendor/nouislider/dist/nouislider.min.js"></script>
Copy-paste the following <script>
near the end of your pages under JS Implementing Plugins to enable it.
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="../assets/vendor/chart.js/dist/Chart.min.js"></script>
<!-- JS Front -->
<!-- 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} |