Download nouislider.css & nouislider.js before try the example below.
noUiSlider code example
<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <link href="nouislider.css" rel="stylesheet"> <script src="nouislider.js"></script </head> <body> <div style="width: 90%; margin-left: 5%; padding-top: 30px;"> <div class="parent"> <h3> <i>NoUiSlider_1 = <span class="slider_value"></span></i> <input type="button" class="reset_1" value="Reset"/> <input type="button" class="disable disable_1" value="Disable"/> <input type="button" class="enable enable_1" value="Enable" style="display: none;"/> </h3> <div class="slider slider_1"></div> </div> <div class="parent"> <h3> <i>NoUiSlider_2 = <span class="slider_value"></span></i> <input type="button" class="reset_2" value="Reset"/> </h3> <div class="slider slider_2"></div> </div> <div class="parent"> <h3><i>Slider Example</i></h3> <div style="width: 120px;" class="slider-toggle"></div> </div> </div> </body> <script type="text/javascript"> createSimpleSlider(); createToggleSlider(); function createSimpleSlider() { for(var i = 1; i <= 2; i++) { var range = $('.slider_' + i)[0]; noUiSlider.create(range, { start: 40, tooltips: [ true ], connect: [true, false], range: { 'min': 0, 'max': 100 }, format: { to: function ( value ) { return parseInt(value); }, from: function ( value ) { return value; } } }).on('update', function( values, handle ) { var target = $(this.target); var slider_tooltip = target.find(".noUi-handle"); if(values[handle] > 50) { slider_tooltip.addClass("half_way_pass"); } else { slider_tooltip.removeClass("half_way_pass"); } var slider_value = target.closest(".parent").find(".slider_value")[0]; slider_value.innerHTML = values[handle]; }); $('.reset_' + i).click(function() { var target = $(this); target.closest(".parent").find(".slider")[0].noUiSlider.set([15]); }) $('.disable_' + i).click(function() { var target = $(this); target.closest(".parent").find(".slider").attr("disabled", "disabled"); target.hide(); target.closest(".parent").find(".enable").show(); }) $('.enable_' + i).click(function() { var target = $(this); target.closest(".parent").find(".slider").removeAttr("disabled"); target.hide(); target.closest(".parent").find(".disable").show(); }) } } function createToggleSlider() { var toggleSlider = $('.slider-toggle')[0]; noUiSlider.create(toggleSlider, { start: 0, range: { 'min': [0, 1], 'max': 1 }, format: { to: function ( value ) { return parseInt(value); }, from: function ( value ) { return value; } } }); toggleSlider.noUiSlider.on('update', function( values, handle ) { var target = $(this.target); var slider_tooltip = target.find(".noUi-handle"); if(values[handle] > 0) { slider_tooltip.addClass("half_way_pass"); } else { slider_tooltip.removeClass("half_way_pass"); } var slider_value = target.closest(".parent").find(".slider_value")[0]; slider_value.innerHTML = values[handle]; }); } </script>