Code Here:
<h5 class="card-title">Handles</h5>
<div class="form-group border-bottom pb-3">
<div id="slider-handles" class="mt-3 mb-3"></div>
</div>
<h5 class="card-title">Snapping between steps</h5>
<div class="form-group border-bottom pb-3">
<div id="slider-snap" class="mt-3 mb-3"></div>
</div>
<h5 class="card-title">Success Color</h5>
<div class="form-group border-bottom pb-3">
<fieldset>
<div class="form-group">
<div id="success-color-slider" class="circle-filled slider-success "></div>
</div>
</fieldset>
</div>
<h5 class="card-title">Left to right</h5>
<div class="form-group border-bottom pb-3">
<fieldset>
<div class="form-group">
<div id="pips-range" class="mt-3 mb-5"></div>
</div>
</fieldset>
</div>
<h5 class="card-title">Right to left</h5>
<div class="form-group border-bottom pb-3">
<fieldset>
<div class="form-group">
<div id="pips-range-rtl" class="mt-3 mb-5"></div>
</div>
</fieldset>
</div>
Init Code
// Handles
var handlesSlider = document.getElementById('slider-handles');
noUiSlider.create(handlesSlider, {
start: [4000, 8000],
range: {
'min': [2000],
'max': [10000]
}
});
// Snapping between steps
var snapSlider = document.getElementById('slider-snap');
noUiSlider.create(snapSlider, {
start: [0, 500],
snap: true,
connect: true,
range: {
'min': 0,
'10%': 50,
'20%': 100,
'30%': 150,
'40%': 500,
'50%': 800,
'max': 1000
}
});
// Success
var successColorSlider = document.getElementById('success-color-slider');
noUiSlider.create(successColorSlider, {
start: [40, 60],
behaviour: 'drag',
connect: true,
range: {
'min': 20,
'max': 80
}
});
// Range
var range_all_sliders = {
'min': [0],
'10%': [5, 5],
'50%': [40, 10],
'max': [100]
};
// Range
var pipsRange = document.getElementById('pips-range'),
pipsRangeRtl = document.getElementById('pips-range-rtl');
noUiSlider.create(pipsRange, {
range: range_all_sliders,
start: 0,
pips: {
mode: 'range',
density: 3
}
});
noUiSlider.create(pipsRangeRtl, {
range: range_all_sliders,
start: 0,
direction: 'rtl',
pips: {
mode: 'range',
density: 3
}
});
Required Files For Nouislider Here
<!-- CSS Here -->
<link href="../../assets/libs/nouislider/distribute/nouislider.min.css" rel="stylesheet">
<link href="../../assets/extra-libs/nouislider/palette-noui.css" rel="stylesheet">
<link href="../../assets/extra-libs/nouislider/noui-slider.min.css" rel="stylesheet">
<!-- Javascript Here -->
<script src="../../assets/libs/wnumb/wNumb.js"></script>
<script src="../../assets/libs/nouislider/distribute/nouislider.min.js"></script>
<script src="../../assets/extra-libs/nouislider/nouislider-init.js"></script>