CODEWITHSUNDEEP
jqueryjquery-ui
user967451
user967451

Reputation:

Is it possible to define custom interval numbers for jQuery UI slider?

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);
    }
});

Upvotes: 0

Views: 5161

Answers (1)

Mohammed Safeer
Mohammed Safeer

Reputation: 21535

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]);
  }
});

Upvotes: 2

Related Questions