svelte-range-slider-pips
svelte-range-slider-pips copied to clipboard
[feature] a 'range gap' or similar property that maintains a gap between range slider handles
Describe the feature A 'range gap' or similar property that maintains a gap between range slider handles that prevents the handles from resting on top of each other.
Explain it's value / reasoning Especially when working with the slider as a time slider, preventing users from being able to have both sliders rest on the same year / date has benefits in terms of filtering data associated with the slider values, and results in slightly more clear UX.
Additional context
For example, in the image below, a range gap of '1' would not allow the user to move the handle on '2014' any further back.
nice idea, need to sit down and think on the UX though for different scenarios ( steps, pips, etc )
I had a quick go at this with as little effort as possible, but I ran into massive problems with step ... for example, if a rangeGap is set at 5, but the step is set at 3, it can never work
|--|--|--|--|--|--|--|--|
|--|--o===o-|--|--|--|--|
^^ see the second handle would not be on a step ..
I could restrict it so that the range-gap is divisible by the step value , but then it gets impossible at the max...
like if the step is 5, and rangeGap is 5 , but the max is 22
|----|----|----|----|-|
|----|----|----|--o===o <-- first handle not on step
|----|----|----|----o===o <-- second handle past end of slider
the max problem seems un-resolvable, because the way the slider currently designed. I would need to change the behaviour of the max setting for rangeGap sliders.
It's very complicated