[Incubator.Slider] Add useRelativeDrag prop for relative drag mode

[adids1221]

Description

Adds useRelativeDrag support to Incubator.Slider.

Uses a container-level RNGH Gesture.Pan() with pointerEvents="none" on the thumb — dragging anywhere on the slider moves the thumb relative to its current position instead of snapping to the touch point. Designed for single-thumb mode.

Changelog

Incubator.Slider - Added useRelativeDrag prop for relative drag mode.

Additional info

• MADS-4866

[github-actions]

✅ PR Description Validation Passed

All required sections are properly filled out:

• ✅ Description
• ✅ Changelog
• ✅ Additional info

Your PR is good for review! 🚀

---

This validation ensures all sections from the PR template are properly filled.

[adids1221]

How to reproduce

Drop this into PlaygroundScreen.tsx and test on Android and iOS:

import React, {useState} from 'react';
import {Platform} from 'react-native';
import {View, Text, Switch, Incubator} from 'react-native-ui-lib';

const TAG = `[Slider-${Platform.OS}]`;

export default function PlaygroundScreen() {
  const [disabled, setDisabled] = useState(false);

  return (
    <View flex padding-20>
      <Text text60 marginB-20>
        Slider Debug ({Platform.OS})
      </Text>

      <View row centerV marginB-20>
        <Text text70 marginR-10>
          Disabled
        </Text>
        <Switch value={disabled} onValueChange={setDisabled}/>
      </View>

      <Text text70 marginB-10>
        Incubator.Slider (normal)
      </Text>
      <View
        style={{width: '100%', height: 60, justifyContent: 'center'}}
        onTouchStart={() => console.log(`${TAG} - PARENT onTouchStart`)}
        onTouchEnd={() => console.log(`${TAG} - PARENT onTouchEnd`)}
      >
        <Incubator.Slider
          value={30}
          minimumValue={0}
          maximumValue={100}
          disabled={disabled}
          onSeekStart={() => console.log(`${TAG} - Incubator.Slider - onSeekStart`)}
          onSeekEnd={() => console.log(`${TAG} - Incubator.Slider - onSeekEnd`)}
          onValueChange={(v: number) => console.log(`${TAG} - Incubator.Slider - onValueChange: ${v.toFixed(1)}`)}
        />
      </View>

      <Text text70 marginT-40 marginB-10>
        Incubator.Slider (useRelativeDrag)
      </Text>
      <View
        style={{width: '100%', height: 60, justifyContent: 'center'}}
        onTouchStart={() => console.log(`${TAG} - PARENT onTouchStart (relative)`)}
        onTouchEnd={() => console.log(`${TAG} - PARENT onTouchEnd (relative)`)}
      >
        <Incubator.Slider
          value={30}
          minimumValue={0}
          maximumValue={100}
          disabled={disabled}
          useRelativeDrag
          onSeekStart={() => console.log(`${TAG} - Incubator.Slider (relative) - onSeekStart`)}
          onSeekEnd={() => console.log(`${TAG} - Incubator.Slider (relative) - onSeekEnd`)}
          onValueChange={(v: number) => console.log(`${TAG} - Incubator.Slider (relative) - onValueChange: ${v.toFixed(1)}`)}
        />
      </View>
    </View>
  );
}

What to test

• useRelativeDrag — relative movement: Drag anywhere on the slider (not just the thumb) → thumb should move relative to where the drag started, not snap to touch point
• useRelativeDrag — track tap: Tapping the track (without dragging) should not snap the thumb
• useRelativeDrag — thumb active style: Thumb should scale up while dragging from any point on the track
• Normal mode — track tap: Tap anywhere on the track away from the thumb → value should jump to that position
• Both modes — normal drag: Grab the thumb and drag → should work smoothly
• Both platforms — disabled: Toggle disabled switch → neither slider should respond to touches

[M-i-k-e-l]

Added a couple of comments but I did not go over everything, because:
The one downside to this version is not being able to click on the slider to move to the point automatically, if we can do that then why not make this the way it works? Is there any other downside I have missed?

Edit: you can re-add that functionality by reverting the change to onPress={useRelativeDrag ? undefined : onTrackPress}

[M-i-k-e-l]

Why is pointerEvents needed?

[M-i-k-e-l]

You can probably remove the ? (change to isActive={isContainerDragging} above)