[Slider] Fix Android hitSlop by replacing touchArea overlay with responder system

[adids1221]

Description

Fixes an Android bug where touches near the Slider thumb fail to start a drag.
The touchArea overlay (absoluteFillObject) intercepted touches in the thumb's hitSlop zone before they reached the PanResponder.

Replaced it with the container's Gesture Responder System (onStartShouldSetResponder + onResponderRelease) — the thumb (deepest child) wins for direct touches, the container handles track taps.
hitSlop now works consistently on both platforms.

Note: Incubator.Slider has the same issue but uses react-native-gesture-handler, which requires a different fix — will be addressed separately.

Changelog

Slider - Fixed Android bug where touches near the thumb failed to start a drag due to touchArea overlay intercepting hitSlop touches.

Additional info

• MADS-4866
• React Native Gesture Responder System docs

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

import React, {useState} from 'react';
import {Platform} from 'react-native';
import {View, Text, Slider, 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>
        Slider
      </Text>
      <View
        style={{width: '100%', height: 60, justifyContent: 'center'}}
        onTouchStart={() => console.log(`${TAG} - PARENT onTouchStart`)}
        onTouchEnd={() => console.log(`${TAG} - PARENT onTouchEnd`)}
      >
        <Slider
          value={30}
          minimumValue={0}
          maximumValue={100}
          disabled={disabled}
          onSeekStart={() => console.log(`${TAG} - Slider - onSeekStart`)}
          onSeekEnd={() => console.log(`${TAG} - Slider - onSeekEnd`)}
          onValueChange={(v: number) => console.log(`${TAG} - Slider - onValueChange: ${v.toFixed(1)}`)}
        />
      </View>

      <Text text70 marginT-40 marginB-10>
        Incubator.Slider
      </Text>
      <View
        style={{width: '100%', height: 60, justifyContent: 'center'}}
        onTouchStart={() => console.log(`${TAG} - PARENT onTouchStart (Incubator)`)}
        onTouchEnd={() => console.log(`${TAG} - PARENT onTouchEnd (Incubator)`)}
      >
        <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>
    </View>
  );
}

What to test

• Android — main fix: Touch near the thumb (not exactly on it) and drag → should start dragging immediately
• Both platforms — track tap: Tap anywhere on the track away from the thumb → value should jump to that position
• Both platforms — normal drag: Grab the thumb and drag → should work smoothly