JQuery Rangeslider step change issue

Question

I am using a JQuery rangeslider.

I want the minimum value to be 6, and the maximum to be 60 which I have set in the html code...

<input type="range" value="18" min="6" max="60" step="6" >

The step size should increase by 6 until it gets to 36. When the slider reaches 36 the step size increases by 12 (as it should do)... it should then snap to 48 and then 60 but instead it increases to 42, then 54 and 66!

So instead of going 6,12,18,24,30,36,48,60

it seems to go..

6,12,18,24,30,36,42,54,66

Does anyone know what I can do to ensure the step size increases where it is being told to and displays the correct amounts?

Check this Codepen which works in a similar way

Thanks

I'm sorry, but your codepen html is different. please change that — Darkmouse, Mar 10 '15 at 16:38

score 0 · Answer 1 · answered Mar 10 '15 at 16:29

0

The code is explicit, right there in the codepen:

if (v>=36) {
  $r.data().plugin_rangeslider.step = 12;
} else {
  $r.data().plugin_rangeslider.step = 6;
}

If the value is greater than or equal to 36, the step becomes 12.

If you want to keep the step at 6, you can remove this snippet of code entirely.

answered Mar 10 '15 at 16:29

Brennan

5,632
2
17
24

Thanks, but I want the step size to increase by 6 until it gets to 36, then I want it to increase by 12 until it reaches 60, its maximum – Chris Mar 10 '15 at 17:05

score 0 · Answer 2 · answered Mar 10 '15 at 16:33

You need to use jquery for that. You are passing in the step attribute to the input element. This means, the value increases by the step amount

You first need to remove the attribute if the value is higher than 36. You then use the attr function to add the step attribute and set a value equal to 12.

if ($(input[type="range").val() >= 36) {
  $(this).removeAttr('step')
         .attr('step', 12);
}

Note: This will change the attributes for all input range fields. If you want to change only one, you need to add an id to the input field.

Then use the id selector

$('#range1')

JQuery Rangeslider step change issue

2 Answers2