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!