Documentation
NoUiSlider
Use the required class varient (e.g. slider-secondary, slider-success, slider-warning, slider-danger, slider-dark ) for different background-color.
HTML Code
<div class="form-group">
<div class="slider noUi-target noUi-ltr noUi-horizontal noUi-txt-dir-ltr">
<div class="noUi-base">
<div class="noUi-connects"></div>
<div class="noUi-origin" style="transform: translate(-500%, 0px); z-index: 4;"></div>
</div>
</div>
</div>
Script
const rangeSlider = document.querySelectorAll('.range-slider');
Array.from(rangeSlider, (elem) => {
noUiSlider.create(elem, {
start: [20, 80],
connect: true,
range: {
'min': 0,
'max': 100
}
})
})
Range Slider
HTML Code
<div class="form-group">
<div class="range-slider noUi-target noUi-ltr noUi-horizontal noUi-txt-dir-ltr">
<div class="noUi-base">
<div class="noUi-connects"></div>
<div class="noUi-origin" style="transform: translate(-800%, 0px); z-index: 5;"></div>
<div class="noUi-origin" style="transform: translate(-200%, 0px); z-index: 4;"></div>
</div>
</div>
</div>
Script
const slider = document.querySelectorAll('.slider');
Array.from(slider, (elem) => {
noUiSlider.create(elem, {
start: 50,
connect: [true, false],
range: {
'min': 0,
'max': 100
}
})
})