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.

App.js.nodebox.CodeSandbox.mp4

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 #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;

Screen.Recording.2024-09-30.at.10.57.05.mov

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.

range-slider-input.examples.-.n3r4zzurr0.in.mp4

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!