在滑块的值上显示动画效果

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.

Answer 2

Check My Solution on animated slider value . Credited @arttronics as I updated my solution on top of his jsFiddle . :)

Try to click on the slider bar to see the value get animated. :)

Answer 3

I believe you just need to add the animate property to the slider. For example:

  $( "#slider-range-max" ).slider({
        range: "max",
        min: 1,
        max: 100,
        value: 1,
        animate: true,
        slide: function( event, ui ) {              
             $('#amount').val(ui.value);                 
         }

});

Here is jquery UI slider example:

http://jqueryui.com/demos/slider/#multiple-vertical

Answer 4

If you are referring to the jQuery UI slider, try:

$('div#foo')
    .slider({
        animate: true,
        slide: function(event, ui) {
           $('div#bar').text(ui.value);         
        }
    });

EDIT

I found this code somewhere on the web (can't remember who to give credit) when I had a need to show the animation effect on increasing and decreasing numbers:

var num_holder = $('#foo');
        $({ someValue: 0 }).animate({
            someValue: 100
        }, {
            duration: 1000,
            easing:'swing',
            step: function() {
                num_holder.text(Math.ceil(this.someValue))
            }
        });

http://jsfiddle.net/cVndp/

This is totally untested but perhaps it will work:

$('div#foo')
    .slider({
        animate: true,
        slide: function(event, ui) {

            $({ someValue: 0 }).animate({
                someValue: ui.value
            }, {
                duration: 1000,
                easing:'swing',
                step: function() {
                    $('div#bar').text(Math.ceil(this.someValue))
                }
            });

        }
    });

You probably have to change the someValue from 0 to whatever the previous place's value was. And also change the direction of the animation depending on which way the slider is being pulled, but it's a starting point.