JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/css/bootstrap-slider.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.7.2/bootstrap-slider.min.js"></script>
<input id="slider" />
CSS
body {
padding: 20px;
}
JavaScript
$(document).ready(function() {
slider = $("#slider").slider({
min: 0,
max: 10000,
ticks: [0, 3000, 5000, 10000],
ticks_labels: ['0', '3000', '5000', '10000'],
ticks_positions: [0, 30, 50, 100],
step: 1,
value: 10000,
tooltip: 'hide',
handle: 'round',
orientation: 'vertical'
});
});