Animating a range slider back and forth (loop)

Question

I am trying to animate a range slider that slides to the max and down to the minimum over a duration of about 2 seconds for each movement and in increments of 1. I do not want to it to be instantaneous; I want the user to see the slider go back and forth. Here is my current code:

var slider = $("#battleslider").slider({
animate: 900
});

$('#move').click(function(){
slider.slider('value', slider.slider('value') + 500);
slider.slider('value', slider.slider('value') - 500);
});

The problem is that when the browser loads and the button is activated, the slider is nearly instantaneously at the max and then decreases for the proper duration. I also need the slide to go change in increments of 1 so that the user can get exactly what the position is. However to do that I would need a loop and this basically causes my browser (Chrome) to freeze up.

Any alternative methods or anything else would be great!

I hope this makes sense and let me know if any more clarification is needed.

Thanks in advance!

EDIT: JSFiddle: http://jsfiddle.net/5j2f0L2t/1/

Answer 1

I suggest you just use css3 (and javascript/jQuery) for this. You can set an animation using css3 animations and the rest of the functionality can be added when needed.

I created and example here.

@keyframes slide
{
  0% { left: 10px; }
  50% { left: 160px; }
  100% { left: 10px; }
}

#slider
{
   animation-name: slide;
   animation-duration: 2s;
   animation-iteration-count: 1;
   animation-delay: 1s; 
}