Coding solution: How to redraw JQuery Slider?

Coding solution: How to redraw JQuery Slider?

In this example we are going to fine-tune wonderful JQuery Slider Plugin written by Egor Khmelev.

This is the official page of the Slider:

Everything is great about this Slider except that it doesn’t allow you to refresh it settings live without reloading the page. For example it would be very useful to be able to change the slider scale, dimension / currency and/or other settings. And it is must have if you building Jquery Price Slider and need to change scale depending on user input.

Here is the solution from Plumrocket developers:

$("#Slider1").slider("redraw", { from: 0, to: 1000, scale: [0, '|', 500, '|', '1000+']});

Add this javascript code in FILE /javascripts/jquery.slider.js LINE: 420

 case "redraw":
 self.settings.interval = - self.settings.from;
 self.settings.value = self.inputNode.attr("value"); = {
 init: false
 self.o = {};

Hopefully this little fix will make someone’s day better.


  • chetaru


    Thanks for sharing this information and resources its really
    help full for me with the  help of this
    we can improve our designs and development I really inspire with this
    information thanks

  • Manan


    Is it possible with on onstatechange? I don’t want to redraw on click event.