[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}

[adids1221]

Fixed, now pressing on the Thumb working also along side the new behavior

[M-i-k-e-l]

Are you aware that useRange + useRelativeDrag is "silently broken"
In range mode it would only ever move the min thumb

[M-i-k-e-l]

Double onSeekStart when starting on the thumb (only on thumb)

Move _onSeekStart to onStart, also move the one in thumb to onStart

[M-i-k-e-l]

slider.api.json note updated

[M-i-k-e-l]

Unrelated to your changes, please remove (as it sometimes breaks the screen):

// @ts-expect-error
ref={this.gradientSlider}