0

According to the site and all the demos I've seen the values for the slider must always be evenly divisible. So for example if I set the min and max options to 10 and 100, then the slider would increment by 10's, like 10, 20, 30, etc.

I need to define some preselected numbers that aren't evenly divisible like:

20, 60, 100, 150, 300

Is there any way to do this with the existent slider without having to create a whole new plugin?

$('.slider').slider({
    animate: true,
    value: 20,
    range: 'min',
    min: 10,
    max: 100,
    step: 10,
    slide: function(event, ui) {
        $('span#amount').text(ui.value);
    },
    change: function(event, ui) {
        $('input#range').val(ui.value);
    }
});
  • 1
    you may find this post useful http://stackoverflow.com/questions/967372/jquery-slider-how-to-make-step-size-change – kaveman Apr 07 '12 at 07:18
  • @kaveman thanks, one of the answers in that post helped me. I'm now just doing a switch statement and based on the value of the slider I am determining my actual values. For example if slider says 10 I know it's 100, if slider says 15 I know it's 130, etc. –  Apr 07 '12 at 07:40

1 Answers1

2

Try this,

var amounts = [20, 60, 100, 150, 300];
$(".slider").slider({
  animate: true,
  value: 20,
  range: 'min',
  min: 0,
  max: sizes.length - 1,
  step: 1,
  slide: function(event, ui) {
    $('span#amount').text(amounts[ui.value]);
  }
});
Mohammed Safeer
  • 20,751
  • 8
  • 75
  • 78