CODEWITHSUNDEEP
jquerysliderslide
Pabuc
Pabuc

Reputation: 5638

Jquery Slider Set Value after Slide

I'm trying to set the value of slider in slide event. Here is my code:

 $(document).ready(function () {
            $("#slider").slider({

                min: 0,
                max: 10000,
                step: 1, // Use this determine the amount of each interval
                values: [0], // The default range
                slide: function (event, ui) {
                    var slider = $("#slider").slider({
                        animate: true
                    });
                    slider.slider('value', 500);
                }
            });
        });

What am I missing? I can't seem to animate and set the value of the slider.

Edit: Ok now I can set the value of the slider BUT it happens too fast. I want it to slowly go to the value I set. Here is my edited code:

$(document).ready(function () {
            $("#slider").slider({

                min: 0,
                max: 10000,
                animate: "slow",
                step: 1,// Use this determine the amount of each interval
               // values: [0] // The default range
               change: function (event, ui) {
                   $("#slider").slider('value', 500);
                }
            });
        });

How can i make it slowly move to 500 instead of setting it right away?

Thank you

Upvotes: 2

Views: 5323

Answers (1)

arttronics
arttronics

Reputation: 9955

Reference:

jsFiddle

After moving the slider button and releasing it, the slider button will animate back to a locked value.

Code:

$(document).ready(function() {

    $('#slider').slider({
        min: 0,
        max: 10000,
        // Values "fast", "normal", "slow", or duration can be used.
        animate: 1500,
        step: 1,
        // Starting value is 500
        value: 500,
        animate: true,
        change: function(){
           // This setTimeout will allow the slider to animated correctly.
           setTimeout("$('#slider').slider('value', 500);", 350);
        }
    });

    // On page load, animate the slider to this value of 500.
    $('#slider').slider('value', 500);

});

Status Update: The SO Poster required the stop: event instead of the change: event in the UI Slider for other specific requirements, but there is no visual difference seen when that is used.

Upvotes: 1

Related Questions