CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-pluginsjquery-ui-slider
Roy Lee
Roy Lee

Reputation: 10862

Displaying Animation Effect on slider's value

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:

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?

Upvotes: 1

Views: 1644

Answers (4)

septemberbrain
septemberbrain

Reputation: 1008

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

Upvotes: 1

arttronics
arttronics

Reputation: 9955

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.

Upvotes: 1

Roy Lee
Roy Lee

Reputation: 10862

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. :)

Upvotes: 1

user967451
user967451

Reputation:

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.

Upvotes: 0

Related Questions