Displaying Animation Effect on slider's value

Question

I am using jQuery UI slider. Is there any way to display current animated slider value if I click on any slider-range?

Currently, the slider value doesn't get animated while the slider is 'sliding', provided slider's animate: true;

---

For example:

• Slider starting value: 0.
• I clicked on Slider range: 20.
• Final Slider value: 20.

---

It just changed from 0 to 20 instead of 0->1->2->3->4->5->6 ... ->19->20. (Animation effect on changed value). Which is similar to this web's slider: Slider Example . Anyone can do this?

Answer 1

I think your wanting to have the Slider Button move to and from different parts of the Slider Bar with Numeric Updates seen on the webpage.

This jsFiddle does that, as well as animates the Button automatically when a preset value is clicked on.

EDIT: Per your recent requirements via clarified example, here's a better method that achieves the same thing using already known values... no need to calculate using expensive JavaScript Math.ceil().

New jsFiddle

The bonus is that the known percentage is provided as a floating point value which can make a difference on how it's to be used or if there are markers/hotspots on top/bottom of the Slider Bar.