RANGE SLIDER: Different steps for each handler

[ardiaca]

Hello,

I have a range slider with 2 handlers and a range from 0 to 1 million.

Every time the slider change, the steps are recalculated according to the value. This way I'm stepping from 10 to 10 under 200 or from 20.000 to 20.000 over 100.000.

My question is if it is possible to assign different steps to different handlers (not just one step for the whole slider). It would be useful on range sliders to avoid unwanted jumps when selecting extreme values.

Thanks,

Issues

NOTE: Before filing a new issue, please search through the open issues list and check to see if an existing issue already exists that describes your problem. If so, leave a comment within that issue with the checklist items described below.

Please make sure you include the following in your issue report where appropriate:

• [ ] JSFiddle (or an equivalent such as CodePen, Plunker, etc) with the an example demonstrating the bug
• [ ] Instructions to replicate the bug in the Fiddle

[MathiasHC]

Use the slide event @ardiaca. Upon slide, you could calculate the current slideEvt.value and set up some if statements, which re-defines the properties given on instantiation of your slider.

• I made a similar solution for a problem I had myself.

Just make sure to set an interval on the calculations, so you don't explode the memory of the browser/RAM/computer (which shouldn't be a problem these days, but still) 👍

[jespirit]

Right now, this isn't possible for range sliders, although it is possible for a single slider.

You would have to create two sliders to handle this. See: https://jsfiddle.net/jespiritu/mp9bvy3d/4/

[klihelp]

Thanks @jespirit This function should be added to core, adding manual step options to ranges on the slider.

[klihelp]

Challenge about the steps are when you have a responsive slider, where ranges will show up in different pixel sizes; dragging over the steps would be not as smooth.

[seiyria]

for this to be feasible, all tick-related features would need to be implemented per handle instead of per slider, which is not currently possible. this would likely provide bad UX so it is not recommended - the solution @jespirit suggests (use two sliders) is the better choice here IMO.

[klihelp]

I added custom code to the change event to dynamically change the range steps; the challenging part when traversing into other ranges have to do the logic to changes the step based on the direction; also have to think about the snap feature. I will post the code soon.