How to reset the jquery-UI slider range value on click of a button

Question

I have a Jquery UI slider, On click of reset button, I need to reset the slider value. Here I can able to reset the value but can't change the background color to initial position.I have used the slider function into script file and css into style.css for styling the slider and the contents. I have used here jquery UI library but I am not getting the solution.

 (function() { // Helper function var update_handle_track_pos; update_handle_track_pos = function(slider, ui_handle_pos) { var handle_track_xoffset, slider_range_inverse_width; handle_track_xoffset = -((ui_handle_pos / 100) * slider.clientWidth); $(slider).find(".handle-track").css("left", handle_track_xoffset); slider_range_inverse_width = (100 - ui_handle_pos) + "%"; return $(slider).find(".slider-range-inverse").css("width", slider_range_inverse_width); }; $(".trybtn").click(function() { $("#js-slider").slider("value", $(this).val()); }); // Init slider $("#js-slider").slider({ range: "min", max: 100, value: 50, create: function(event, ui) { var slider; slider = $(event.target); // Append the slider handle with a center dot and it's own track slider.find('.ui-slider-handle').append('<span class="dot"><span class="handle-track"></span></span>'); // Append the slider with an inverse range slider.prepend('<div class="slider-range-inverse"></div>'); // Set initial dimensions slider.find(".handle-track").css("width", event.target.clientWidth); // Set initial position for tracks return update_handle_track_pos(event.target, $(this).slider("value")); }, slide: function(event, ui) { // Update position of tracks return update_handle_track_pos(event.target, ui.value); } }); }).call(this);

 .ui-slider, .ui-slider.slider-range-inverse, .ui-slider.ui-slider-range { height: 14px; border-radius: 10px; border-width: 0; } body { background: #F0F0F0; font-family: Helvetica, Arial; } h1 { text-align: center; color: #444; margin-top: 50px; } #slider-container { width: 80%; height: 80px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; top: 50%; margin: 0 auto; text-align: center; background: #FFF; border-radius: 5px; padding: 35px 40px 30px 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }.ui-slider { background-color: #1ABC9C; background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%); background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%); }.ui-slider * { outline: none; }.ui-slider.slider-range-inverse { background: #CCC; position: absolute; right: 0; }.ui-slider.ui-slider-range { background: transparent; }.ui-slider.ui-slider-handle { width: 28px; height: 28px; cursor: pointer; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); background: #FFF; top: -7px; border-radius: 50%; border-width: 0; }.ui-slider.ui-slider-handle:active { box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5); }.ui-slider.ui-slider-handle.dot { width: 18px; height: 18px; border-radius: 50%; position: absolute; top: 5px; left: 5px; background: transparent; overflow: hidden; }.ui-slider.ui-slider-handle.dot.handle-track { display: block; height: 18px; background-color: #1ABC9C; background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%); background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%); position: absolute; padding-right: 18px; }

 <link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="./style.css"> <div id="slider-container"> <div id="js-slider"></div> </div> <div class="trybtn"> <span>Reset</span> </div> <:-- partial --> <script src='https.//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min:js'></script> <script src='https.//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

Answer 1

 (function() { // Helper function var update_handle_track_pos; update_handle_track_pos = function(slider, ui_handle_pos) { var handle_track_xoffset, slider_range_inverse_width; handle_track_xoffset = -((ui_handle_pos / 100) * slider.clientWidth); $(slider).find(".handle-track").css("left", handle_track_xoffset); slider_range_inverse_width = (100 - ui_handle_pos) + "%"; return $(slider).find(".slider-range-inverse").css("width", slider_range_inverse_width); }; $(".trybtn").click(function() { $("#js-slider").slider("value", $(this).val()); $('.slider-range-inverse').css('width', 100-$(this).val() + '%'); }); // Init slider $("#js-slider").slider({ range: "min", max: 100, value: 50, create: function(event, ui) { var slider; slider = $(event.target); // Append the slider handle with a center dot and it's own track slider.find('.ui-slider-handle').append('<span class="dot"><span class="handle-track"></span></span>'); // Append the slider with an inverse range slider.prepend('<div class="slider-range-inverse"></div>'); // Set initial dimensions slider.find(".handle-track").css("width", event.target.clientWidth); // Set initial position for tracks return update_handle_track_pos(event.target, $(this).slider("value")); }, slide: function(event, ui) { // Update position of tracks return update_handle_track_pos(event.target, ui.value); } }); }).call(this);

 .ui-slider, .ui-slider.slider-range-inverse, .ui-slider.ui-slider-range { height: 14px; border-radius: 10px; border-width: 0; } body { background: #F0F0F0; font-family: Helvetica, Arial; } h1 { text-align: center; color: #444; margin-top: 50px; } #slider-container { width: 80%; height: 80px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; position: relative; top: 50%; margin: 0 auto; text-align: center; background: #FFF; border-radius: 5px; padding: 35px 40px 30px 40px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); }.ui-slider { background-color: #1ABC9C; background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%); background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%); }.ui-slider * { outline: none; }.ui-slider.slider-range-inverse { background: red; position: absolute; right: 0; }.ui-slider.ui-slider-range { background: transparent; }.ui-slider.ui-slider-handle { width: 28px; height: 28px; cursor: pointer; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4); background: #FFF; top: -7px; border-radius: 50%; border-width: 0; }.ui-slider.ui-slider-handle:active { box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5); }.ui-slider.ui-slider-handle.dot { width: 18px; height: 18px; border-radius: 50%; position: absolute; top: 5px; left: 5px; background: transparent; overflow: hidden; }.ui-slider.ui-slider-handle.dot.handle-track { display: block; height: 18px; background-color: #1ABC9C; background-image: -webkit-linear-gradient(left, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%); background-image: linear-gradient(to right, #1ABC9C 0%, #F1C40F 50%, #E74C3C 100%); position: absolute; padding-right: 18px; }

 <link rel='stylesheet' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'> <link rel="stylesheet" href="./style.css"> <div id="slider-container"> <div id="js-slider"></div> </div> <div class="trybtn"> <span>Reset</span> </div> <:-- partial --> <script src='https.//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min:js'></script> <script src='https.//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>

A bit hacky but update the css width

Answer 2

U need to call your method under trybtn click event.

JS:

$(".trybtn").click(function() {
    $("#js-slider").slider("value", $(this).val());
    update_handle_track_pos($("#js-slider"), $(this).val());
  });

Working fiddle: https://jsfiddle.net/psx57Lc6/