Consider reseting the handle to the "defaultValue"/"initialValue" on double click

[Artem Zakharchenko]

Hey. Thank you for an awesome library! I've integrated it into my project and it works like a charm.

Following an established pattern, I keep wanting for the handle's position to reset to the defaultValue when I double click on it. Have you considered this behavior?

[Matt Rothenberg]

I've never seen this pattern – can you please share a few examples of this in the wild?

[Artem Zakharchenko]

Whenever you resize panels you can double click on the resizing element to reset it to a certain position. The most prominent example is when you resize the explorer panel in VS Code. Try resizing it to some extent and clicking on the vertical line that acts as a resizing handle—it will get the explorer panel's width reset. This is a common pattern anywhere a similar resizing is introduced.

I understand that in the case of the comparison slider it's not resizing per se, but it felt intuitive to me so I've raised this.

[Matt Rothenberg]

Interesting, I see what you mean. For what it's worth, I think this is a significantly different experience than resizing panels in VSCode, but it would be cool if you could do this in user land.

I don't think this is possible with the current implementation, as I'm effectively using input type="range" to handle the scrubbing but I'll do some investigation.

[Artem Zakharchenko]

@mattrothenberg at first glance looks like a matter of updating an internal state of the range input on double click, resetting it to the defaultValue/initialValue (in the case of the controlled component).

I understand this is a corner case, so feel free to close this if you find it is outside of the library's responsibilities.

[Matt Rothenberg]

@kettanaito Yeah, I understand the approach. Can you clarify though – double clicking the handle should reset the slider to the default value, or double clicking anywhere should reset to the default value?

[Matt Rothenberg]

With 1.0.0, you should be able to do this in user land.

https://react-comparison-slider.vercel.app/?path=/story/comparisonslider--double-click-reset

export const DoubleClickReset = () => {
  const [value, setValue] = useState(50);
  return (
    <div className="max-w-lg border border-black">
      <ComparisonSlider
        value={value}
        onValueChange={setValue}
        itemOne={
          <img className="w-full h-full object-cover" src={images[0][0]} />
        }
        itemTwo={
          <img className="w-full h-full object-cover" src={images[0][1]} />
        }
        handleAfter={<div className="bg-black w-1 bottom-0 h-full"></div>}
        handleBefore={<div className="bg-black w-1 bottom-0 h-full"></div>}
        aspectRatio={4 / 3}
        handle={(props) => {
          return (
            <div
              onDoubleClick={() => {
                setValue(50);
              }}
              className="bg-black text-white h-10 w-10 rounded-full flex items-center justify-center"
            >
              <BiMoveHorizontal size={24} />
            </div>
          );
        }}
      />
    </div>
  );
};