jqueryUI slider with auto and smooth move

by Ayyappan Sakthivadivel

HTML

<div id="wrapper">
    <div id="slider"></div>
</div>

CSS

#wrapper {
    width: 500px;
    margin: 0 auto;
    text-align: center;
}
#slider {
    width: 200px;
    text-align: center;
    margin: 0 auto;
    display: block;
}

.ui-slider-handle{
  display: none;
}

span.ui-slider-handle.ui-state-default.ui-corner-all {
    transition: all .1s;
}

span.ui-slider-handle.ui-state-default.ui-corner-all.ui-state-active {
    transition: none;
}

JavaScript

$(function () {
    $('#slider').slider({
        value: 0,
        min: 0,
        max: 5,
        step: 1,
        animate:"slow",
        range: "min"
    });

    $(function AutoSlider() {
        setInterval(function () {
            var value = $('#slider').slider("value");
            var max = $('#slider').slider( "option", "max" );
            $("#slider").slider("value", (value + 1)% (max+1));
        }, 3000);
    });
});