CODEWITHSUNDEEP
jquery-mobile
Paul
Paul

Reputation: 5924

jQuery Mobile slider - make input be able to violate step

I have a jQuery Mobile Slider element. It's meant to be a percentage so it ranges from 0 to 100 for min/max. Because it is used on a phone, I have the step set to 5 which I feel is easier to hit things like 25% or 50%. But say someone wants 66%. I want them to be able to type this value into the input box and have it update the slider to 66%. Instead the slider falls back to 65%.

Can I allow a direct edit of the input box to alter the slider value?

enter image description here

Upvotes: 3

Views: 258

Answers (2)

mpoiu
mpoiu

Reputation: 26

I would suggest solution similar to Omar, but would leave step by default to lower value and use jQuery mobile slidestart and slidestop events. It works more reliable in my case.

$('#slider').on('slidestart', function(event) {
    $(this).attr('step', '5');
});

$('#slider').on('slidestop', function(event) {
    $(this).attr('step', '1');
});

JSFiddle example

Upvotes: 0

Omar
Omar

Reputation: 31732

You could change step value to whatever you want once a user enters a custom value. Later, change step to its original value.

Demo

$(document).on('focus', '#slider-1', function () {
 $(this).attr('step', '1');
});

$(document).on('click', '.ui-slider-handle', function () {
 $('#slider-1').attr('step', '10');
});

Upvotes: 2

Related Questions