Working with jQuery Slider - positions

Question

I have been working with the slider and am using the following code:

 $(function(){
  $('#slider').slider({
   animate: true,
   step: 1,
   min: 0,
   max: 10,
   orientation: 'vertical',
   start: function(event, ui){
    $('#current_value').empty();
    $('#current_value').fadeIn().append('Value is ' + ui.value);
   },
   change: function(event, ui){
    alert();
    //$('#current_value').empty();
   }

  });
 });

I am trying to get it for at the top it is a value of 10 and the bottom is a value of 1 and step 1. Does that look correct?

The other problem I am having is when you move from one position to another, I want it to show the position it stopped on (the current).

So if it is at 4 and you click 7, when you stop append to the DIV I tried changed and stop, but it isnt behaving that way. It is taking the wrong position value.

Link: http://www.ryancoughlin.com/demos/interactive-slider/index.html if you use the keyboard and go to the bottom my goal is to have it step from 1 to 10 in 1 increments

Any thoughts?

Answer 1

replace your CHANGE event with SLIDE ... i've asked similar question a while ago.

you might want to add STOP event as well ... move your logic from START to SLIDE and STOP