CODEWITHSUNDEEP
jqueryjquery-uijquery-ui-slider
Syon
Syon

Reputation: 1614

jQuery UI Slider Custom Step

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

Upvotes: 1

Views: 3013

Answers (1)

Esko Piirainen
Esko Piirainen

Reputation: 1379

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.

Upvotes: 1

Related Questions