jQuery UI Slider Custom Step

Question

I have a slider with a range from 1007-13138 and a step of 75. But I need to add 2 custom steps that are outside the 75 range, ex. 2013 & 8759. These two values are what specify the start and end points of the slider so I want to be able to select them when sliding. Any suggestions or help would be appreciated - it's my first time using the slider and not quite sure of its capabilities, thanks.

HTML

<div id="slider" data-start="2013" data-end="8759"></div>
<div id="slider-result"></div>

jQuery

$('#slider').slider({
    value: $('#slider').data('end'),
    min: Math.round($('#slider').data('start') / 2),
    max: Math.round($('#slider').data('end') * 1.5),
    step: 75,
    slide: function (event, ui) {
        $('#slider-result').html(ui.value);
    }
});
$('#slider-result').html($('#slider').slider('option', 'value'));

jsFiddle

I think there's no way to do that (without modify sources)

Luca Rainone
– Luca Rainone

2013-01-07 13:45:32 +00:00
Commented Jan 7, 2013 at 13:45 — Luca Rainone
– Luca Rainone, Commented Jan 7, 2013 at 13:45

Esko Piirainen · Accepted Answer · 2013-02-27 15:01:02Z

1

You could keep step at 1, and in change -event, if the selected value is not a multiple of 75 (value % 75 != 0), add (or subtract..) the reminder to the value to get a multiple of 75, and set it as the value.

Then add exceptions for those two specific values that are not multiples of 75.

And propably you want some kind of buttons (in either end of the slider) that set the slider to your two magic values.

You don't give the details about why you would want this functionality, so it is difficult to say what would be best usability-wise.

answered Feb 27, 2013 at 15:01

Esko Piirainen

1,4092 gold badges17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery UI Slider Custom Step

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related