Disable functionality?

[nigow]

Hi there!

I'm using compare slider I want to disable the sliding functionality while showing the slider bar on some occasions. Is there a way to keep the slider bar at a fixed position and not make it draggable? onlyHandleDraggable prop doesn't help because I want to disable also when user drags the bar.

Thank you,
nigow

[nerdyman]

Hey @nigow!

There's no built in functionality disable the slider at the moment but it should be simple enough to do with a custom pointer event.

I've hacked together a quick demo that applies its own onPointerDown binding to the slider which prevents the slider from moving when enabled is false. enabled is toggled by a button in the top left of the demo.

return (
	<ReactCompareSlider
	  	  // ...
	      onPointerDown={(ev) => {
	        if (!enabled) {
	          ev.preventDefault();
	        }
	      }}
	/>
)

https://codesandbox.io/s/react-compare-slider-disable-enable-slider-qk8pb?file=/src/App.jsx:886-1035

Let me know if this does what you need.

*Edit I changed the demo so it disables the entire slider instead of just the handle.

[nigow]

Hi Ricky,

Thanks for the demo! Yes, it solved the problem that I was looking for. Quite amazed how you can just manipulate onPointerDown and I appreciate your help.

Thank you,
nigow

[rsumit123]

Hi @nerdyman ,

Can you suggest whether there is an alternative of onPointerDown prop for mobile devices? I have tried onTouchStart and onTouchEnd but it doesn't seem to work

[nerdyman]

Hey @rsumit123, that's weird I thought the pointer events would stop the others from firing but you're right it, they don't on mobile. You could apply a blanket pointer-events: none !important to everything in the slider when you want to disable it although that it pretty hacky.

There are a lot of accessiblity enhancements coming in the next major version of the library, I'll add a disabled prop to the roadmap for v3.

In the meantime I've updated the link above to apply a disabled class name which disables all pointer events within the slider.

[rsumit123]

Hi @nerdyman ,

Thanks so much for responding so fast. Somehow, I am not able to get it working on my code by adding pointer-events: none !important. But I will wait for v3. Thanks again.

[nerdyman]

No probs! If you check out the demo it should now work on mobile on desktop https://codesandbox.io/s/react-compare-slider-disable-enable-slider-qk8pb?file=/src/styles.css:140-175

The pointer events need to be disabled on both the root and all children so CSS should be:

.disabled, 
.disabled * {
  pointer-events: none !important;
}

Edit: I've created a ticket for adding a disabled prop too #91

[rsumit123]

Hi @nerdyman ,

You are absolutely right. This was the issue
.disabled, .disabled * { pointer-events: none !important; }
Completely solved it. Thankyou so much, you have been of great help. Looking forward to V3.

[nerdyman]

This has been released in v3!

See the disabled example for usage.

npm install react-compare-slider@latest
yarn add react-compare-slider@latest
pnpm install react-compare-slider@latest