Html Slider

Set the mode property of the jqxSlider. Author: http://jqwidgets.com

HTML

<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id="container" style="width: 100%; background-color:red;">
  <div id="slider"></div>
</div>

JavaScript

$(document).ready(function() {
  var containerWidth = $("#container").width();
  $("#slider").jqxSlider({
    theme: 'fluent',
    height: 60,
    width: containerWidth,
  });
  $("#slider").on('slide', function(event) {
    var value = $("#slider").jqxSlider('value');
    console.log(value);
  })
})