Vertical sliders don't work unless trackClickable is true

[elliottkember]

I just set trackClickable to false on my vertical slider, and suddenly I can't scrub it downwards. Upwards works okay, but scrubbing downwards is broken.

I've tracked this down to the _getThumbLeft function, which uses vertical to discern between container width and height. However, my container seems to have a "width" of its visible height – not of its visible width. So the "width" is the draggable axis of the slider?

So the X and Y values are already flipped, but the function seems to be calculating incorrectly.

When the track is clickable, this resolves itself because clicking the track automatically jumps to the right position. But without that prop, the handle isn't scrubbable in a vertical context.

Anyway, this seems to fix it:

diff --git src/index.tsx src/index.tsx
index d288b65..3f5a8b1 100644
--- src/index.tsx
+++ src/index.tsx
@@ -392,16 +392,11 @@ export class Slider extends PureComponent<SliderProps, SliderState> {
     };
     _getThumbLeft = (value: number) => {
         const {containerSize, thumbSize} = this.state;
-        const {vertical} = this.props;
 
         const standardRatio = this._getRatio(value);
 
         const ratio = I18nManager.isRTL ? 1 - standardRatio : standardRatio;
-        return (
-            ratio *
-            ((vertical ? containerSize.height : containerSize.width) -
-                thumbSize.width)
-        );
+        return ratio * (containerSize.width - thumbSize.width);
     };
     _getValue = (gestureState: {dx: number; dy: number}) => {
         const {containerSize, thumbSize, values} = this.state;

Snack: https://snack.expo.dev/@elliottkember/cf066c