svelte-range-slider-pips icon indicating copy to clipboard operation
svelte-range-slider-pips copied to clipboard

[feature] a 'range gap' or similar property that maintains a gap between range slider handles

Open ananmaysharan opened this issue 2 years ago • 2 comments

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. image

ananmaysharan avatar Jun 01 '23 17:06 ananmaysharan

nice idea, need to sit down and think on the UX though for different scenarios ( steps, pips, etc )

simeydotme avatar Jun 05 '23 06:06 simeydotme

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

simeydotme avatar Aug 30 '23 07:08 simeydotme