JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/bootstrap-slider.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.9.0/css/bootstrap-slider.css">
<input id="ex13" type="text" />
JavaScript
/* Let's say we want to define the min and the max and offer 10 possibilities of amount */
var min = 15
var max = 75;
var interval = (max - min) / 9;
var ticksValues = [];
for (i = 0; i < 10; i++) {
value = min + Math.round(interval * i);
ticksValues.push(value);
console.log(ticksValues);
}
var slider = new Slider("#ex13", {
step: interval,
ticks_labels: ticksValues,
ticks_snap_bounds: min // This allows to go on the integer value of the ticks (on move only, not on click)
});
slider.on('change', function(){
var value = slider.getValue();
console.log(value);
});
/* ISSUE: How to get the values specified in ticks in all cases? Even by clicking somewhere in the slider (not only by moving like drag and drop) */