https://dhtmlx.com/docs/products/dhtmlxSlider/ 

<script type="text/javascript" src="js/slider-bar/suite.js"></script>

<link rel="stylesheet" href="js/slider-bar/suite.css">

<div style="padding:10px 20px; text-align:center;">

<section class="dhx_sample-container">

<div class="dhx_sample-container__widget" id="slider"></div>

<div id="events" class="dhx_sample-container__sidebar"> </div>

</section>

</div>

<script type="text/javascript">

//https://dhtmlx.com/docs/products/dhtmlxSlider/

//https://docs.dhtmlx.com/suite/slider__api__refs__slider.html

var slider = new dhx.Slider("slider", {

min : 0,

max : 100,

step : 1,

tick : 10,

majorTick : 1,

value : 10,

tickTemplate: function(v){

return v;

} 

});

var info = document.getElementById("events");

var events = ["change",/*mousedown"*/,"mouseup"];

var leverage_number = 0;

events.forEach(function(event) {

slider.events.on(event, function(){

getEvent(event, arguments);

});

});

function getEvent(event, args)

{

if(event == "change")

{

leverage_number = args[0];

}

else if(event == "mouseup")

{

}

}

</script>