Draggable range between handles.

[vogelino]

First of all great library, love it! ❤️

Describe the feature I'd like to be able to drag the border between the two handles (in my case a date range picker with start and end date) and have both handles move simultaneously, while keeping the same distance btw one another.

https://github.com/user-attachments/assets/3dca2c24-70f5-4b96-90e6-fe58545a22f5

Explain it's value / reasoning This is particularly useful in date ranges, so that the covered duration between two dates remains the same. For example, I use it brush a line chart that shows values over time. When selecting a specific time range, like a month, it would very handy to be able to move the time range around to see how different months compare.

Additional context This React library react-range-slider-input supports that and your can see on this code sandbox how it behaves. For example, try to drag the area between two handles: https://codesandbox.io/p/sandbox/react-range-slider-input-demo-ymw2kp?file=%2Fsrc%2FApp.js

[simeydotme]

thanks @vogelino

I think this is similar in nature to https://github.com/simeydotme/svelte-range-slider-pips/issues/105 ? You can read a little there my thoughts on the matter of linking the rangeStart and rangeEnd...

but after hearing a couple of requests for it... and the use-cases... perhaps I need to study deeper if/how other libraries manage it.

Any thoughts from your side?

[vogelino]

Thx for the quick answer @simeydotme! Unfortunately, I'm not experienced at all in writing draggable components. I might have a look during the week anyway, but I'm not too confident about my ability to solve it.

I think this is similar in nature to #105 ?

Not exactly. Both feature requests require the handles to maintain the distance btw each other consistent. However, #105 is about ensuring this while dragging any handle. My suggestion is about being able to drag the range bar between the handles (The range area).

[simeydotme]

hmm... interesting, lol. they are not even bothering to deal with it... causing quite a jank experience;

https://github.com/user-attachments/assets/b74617a1-7646-4ce8-8f91-f3440be5cb31

maybe I could follow suit and just cut off the end of a mis-aligned step and min/max/range when dragRange is set true

[vogelino]

they are not even bothering to deal with it... causing quite a jank experience;

Where did you capture this from. On the demo page I shared to you, the experience is as I would expect it to be, not like in your example. This might be a cross-browser issue maybe.

https://github.com/user-attachments/assets/88c70430-f587-481d-aa9f-ed9d34619cfd

Here the demo of the original library (not the react wrapper):

https://n3r4zzurr0.in/range-slider-input/

[simeydotme]

Where did you capture this from. On the demo page I shared to you, the experience is as I would expect it to be, not like in your example.

Oh I Forked the sandbox you linked and edited the props to set the "step" to a non-divisible number (my concern from #105) ... And found indeed that other library simply doesn't care ... I assume the thought process is that the person putting the library on their website needs to consider this before they use it

[vogelino]

Oh I get it now. Yes I agree with you. It's probably a consideration that authors should make

[simeydotme]

Although it doesnt fully cover your use-case (still thinking about it)

I just updated the dosc with this nice example which may be helpful to you; https://simeydotme.github.io/svelte-range-slider-pips/en/examples/range/#pushy-with-gap

[vogelino]

Hi @simeydotme! Thx for taking the time to show me this example! It doesn't exactly do what I described indeed, as I want to allow smaller gaps and this example would prevent that. However, there might still be something to take from it. I'll have a deeper look at it!

[simeydotme]

hey @vogelino heads-up on the next branch I have this feature in final stages of testing.

https://svelte.dev/playground/cdcb5312f3354003b07a0d886d70b1e3?version=5.23.0 ^ here's a demo with all the new features on display ... please try your best to break it... oh and also try to recreate your slider you needed to make sure it fits the purpose.

these features add significant complexity, so I though it was time to add some tests, too. that's why this branch taking a while to come out, I need over a thousand tests I believe :')

[vogelino]

Hey @simeydotme ! That so awesome! Thank you so much! Next week I should have time to test it out. I'll let you know if I find anything that breaks.

That's so cool thx! 🙏 Cheers!

[vogelino]

@simeydotme This is very very cool. It really tried to break the heck out of it. I also tested on mobile. I had no issues so far. I can't wait to use it as soon as it releases. The UX improvement on that is just clutch! Thx!

[simeydotme]

Heeey! that's great! I found a couple of small things I missed (not really broken) during my testing, one of which was styling/interaction on vertical sliders.

fixed that now locally.

the next release will have to be v4, though, as I've made some style changes which would be considered breaking changes (floats on left of vertical sliders) and fixed a long-standing bug which users might have been doing workarounds for.

will try to drop it this week, documentation will have to come later as it's a lot!

[vogelino]

@simeydotme true, I did not test vertical sliders. I'm glad you did catch those 🪲🦟🪳.

No worries about v4. I'll keep my eyes peeled for the release! Thank you again!

[simeydotme]

resolved in v4, and here's the docs; https://simeydotme.github.io/svelte-range-slider-pips/en/examples/range/#draggy-ranges

---

remember to check the upgrade details before moving from v3 -> v4 🙂