jquery-ui-slider: wrong steps after “step” size change on run time

Question

I've build a slider, that changes his step size with this ranges

• from 1 to 19 in steps of 1

• from 20 to 100 in steps of 10.

  //stepping from 1 to 20  in steps of 1
  if (ui.value < 20) {
      $(this).slider('option', 'step', 1);
  }
  
  //stepping from 20 to  100 in steps of 10
  if (ui.value >= 20 && ui.value <= 100) {
      $(this).slider('option', 'step', 10);
  }
  

Then I let calculate with ui.value some other values

Here is a fiddle: http://jsfiddle.net/Z5BYY/

But when I slide on this border, values aren't correct calculated and the sliding handle gets unwanted results

• handle jumps from 20 to 31, not to 30 and multipliers of 10
• result of my multiplication on 20 is 42
• maximum is set to 100, but I can slide to 101

Any ideas, how I can fix this? Thank you for your answers.

Answer 1

you can try with this

//stepping from 1 to 20  in steps of 1
if (ui.value < 20) {
    $( this ).slider( "option", "min", 1 );
    $(this).slider('option', 'step', 1);
}

//stepping from 20 to  100 in steps of 10
if (ui.value >= 20 && ui.value <= 100) {
    $( this ).slider( "option", "min", 0 );
    $(this).slider('option', 'step', 10);
}

I think it will work!