Html Slider

Bind to the change event by type: jqxSlider. Author: http://jqwidgets.com

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id="jqxSlider"></div>
<div id="log"></div>

CSS

#jqxSlider { margin-top: 50px; }

JavaScript

$('#jqxSlider').jqxSlider({
  theme: 'energyblue',
  tooltip: true,
  
});
$('#jqxSlider').on('change', function (event) {
  var value = new Number(event.args.value).toFixed(2);
  if(value > 8) {
    $('#jqxSlider').jqxSlider('setValue', 8);
  } else {
  	$("#log").html("The new value is "+ value);
  }
});