[Slider] Add useRelativeDrag prop for relative drag mode

packages/react-native-ui-lib/src/components/slider/Thumb.tsx

@@ -39,6 +39,10 @@ export interface ThumbProps extends ViewProps {
   disabled?: boolean;
   /** ref to thumb component */
   ref?: React.RefObject<RNView>;
+  /**
+   * External scale animation value (used by useRelativeDrag)
+   */
+  scaleAnimation?: Animated.Value;
 }
 type ThumbStyle = {style?: StyleProp<ViewStyle>; left?: StyleProp<number>};
 
@@ -58,6 +62,7 @@ const Thumb = forwardRef((props: ThumbProps, ref: any) => {
     thumbHitSlop,
     onTouchStart,
     onTouchEnd,
+    scaleAnimation,
     ...others
   } = props;
 
@@ -142,7 +147,7 @@ const Thumb = forwardRef((props: ThumbProps, ref: any) => {
         {
           transform: [
             {
-              scale: thumbScaleAnimation.current
+              scale: scaleAnimation ?? thumbScaleAnimation.current
             }
           ]
         }

packages/react-native-ui-lib/src/components/slider/index.tsx

@@ -74,6 +74,7 @@ class Slider extends PureComponent<InternalSliderProps, State> {
   private minThumb = React.createRef<RNView>();
   private activeThumbRef: React.RefObject<RNView>;
   private panResponder;
+  private containerPanResponder;
 
   private minTrack = React.createRef<RNView>();
   private _minTrackStyles: MinTrackStyle = {};
@@ -97,6 +98,8 @@ class Slider extends PureComponent<InternalSliderProps, State> {
   private dimensionsChangeListener: any;
 
   private didMount: boolean;
+  private _containerDragInitialValue = 0;
+  private _containerThumbScale = new Animated.Value(1);
 
   constructor(props: InternalSliderProps) {
     super(props);
@@ -123,6 +126,16 @@ class Slider extends PureComponent<InternalSliderProps, State> {
       onPanResponderEnd: () => true,
       onPanResponderTerminationRequest: () => false
     });
+
+    this.containerPanResponder = PanResponder.create({
+      onMoveShouldSetPanResponder: this.handleMoveShouldSetPanResponder,
+      onPanResponderGrant: this.handleContainerGrant,
+      onPanResponderMove: this.handleContainerMove,
+      onPanResponderRelease: this.handleContainerEnd,
+      onStartShouldSetPanResponder: () => true,
+      onPanResponderEnd: () => true,
+      onPanResponderTerminationRequest: () => false
+    });
   }
 
   reset() {
@@ -237,6 +250,42 @@ class Slider extends PureComponent<InternalSliderProps, State> {
     this.onSeekEnd();
   };
 
+  handleContainerGrant = () => {
+    this._containerDragInitialValue = this.getValueForX(this._x);
+    this.animateContainerThumbScale(1.5);
+    this.onSeekStart();
+  };
+
+  handleContainerMove = (_e: GestureResponderEvent, gestureState: PanResponderGestureState) => {
+    if (this.props.disabled) {
+      return;
+    }
+    const {minimumValue, maximumValue} = this.props;
+    const range = this.getRange();
+    const containerWidth = this.state.containerSize.width;
+    const dx = gestureState.dx * (Constants.isRTL && !this.disableRTL ? -1 : 1);
+    const deltaValue = (dx / containerWidth) * range;
+    const newValue = _.clamp(this._containerDragInitialValue + deltaValue, minimumValue, maximumValue);
+    const newX = this.getXForValue(newValue);
+    this.set_x(newX);
+    this.moveTo(newX);
+    this.updateValue(newX);
+  };
+
+  handleContainerEnd = () => {
+    this.bounceToStep();
+    this.animateContainerThumbScale(1);
+    this.onSeekEnd();
+  };
+
+  animateContainerThumbScale = (toValue: number) => {
+    Animated.timing(this._containerThumbScale, {
+      toValue,
+      duration: 100,
+      useNativeDriver: true
+    }).start();
+  };
+
   /* Actions */
 
   setActiveThumb = (ref: React.RefObject<RNView>) => {
@@ -564,7 +613,7 @@ class Slider extends PureComponent<InternalSliderProps, State> {
   };
 
   getThumbProps = () => {
-    const {thumbStyle, activeThumbStyle, disableActiveStyling, disabled, thumbTintColor, thumbHitSlop} = this.props;
+    const {thumbStyle, activeThumbStyle, disableActiveStyling, disabled, thumbTintColor, thumbHitSlop, useRelativeDrag} = this.props;
     const {thumbSize} = this.state;
     const verticalHitslop = Math.max(0, (48 - thumbSize.height) / 2);
     const horizontalHitslop = Math.max(0, (48 - thumbSize.width) / 2);
@@ -585,29 +634,34 @@ class Slider extends PureComponent<InternalSliderProps, State> {
       activeThumbStyle,
       disableActiveStyling,
       thumbHitSlop: thumbHitSlop ?? calculatedHitSlop,
-      onLayout: this.onThumbLayout
+      onLayout: this.onThumbLayout,
+      scaleAnimation: useRelativeDrag ? this._containerThumbScale : undefined
     };
   };
 
   /* Renders */
   renderMinThumb = () => {
+    const {useRelativeDrag} = this.props;
     return (
       <Thumb
         {...this.getThumbProps()}
         ref={this.minThumb}
-        onTouchStart={this.onMinTouchStart}
-        {...this.panResponder.panHandlers}
+        onTouchStart={useRelativeDrag ? undefined : this.onMinTouchStart}
+        pointerEvents={useRelativeDrag ? 'none' : undefined}
+        {...(useRelativeDrag ? {} : this.panResponder.panHandlers)}
       />
     );
   };
 
   renderThumb = () => {
+    const {useRelativeDrag} = this.props;
     return (
       <Thumb
         {...this.getThumbProps()}
         ref={this.thumb}
-        onTouchStart={this.onTouchStart}
-        {...this.panResponder.panHandlers}
+        onTouchStart={useRelativeDrag ? undefined : this.onTouchStart}
+        pointerEvents={useRelativeDrag ? 'none' : undefined}
+        {...(useRelativeDrag ? {} : this.panResponder.panHandlers)}
       />
     );
   };
@@ -664,20 +718,26 @@ class Slider extends PureComponent<InternalSliderProps, State> {
   }
 
   render() {
-    const {containerStyle, testID, migrate} = this.props;
+    const {containerStyle, testID, migrate, useRelativeDrag} = this.props;
 
     if (migrate) {
       return <IncubatorSlider {...this.props}/>;
     }
 
+    const containerGestureProps = useRelativeDrag
+      ? this.containerPanResponder.panHandlers
+      : {
+        onStartShouldSetResponder: this.handleContainerShouldSetResponder,
+        onResponderRelease: this.handleTrackPress
+      };
+
     return (
       <View
         style={[styles.container, containerStyle]}
         onLayout={this.onContainerLayout}
         onAccessibilityAction={this.onAccessibilityAction}
         testID={testID}
-        onStartShouldSetResponder={this.handleContainerShouldSetResponder}
-        onResponderRelease={this.handleTrackPress}
+        {...containerGestureProps}
         {...this.getAccessibilityProps()}
       >
         {this.renderTrack()}

packages/react-native-ui-lib/src/components/slider/slider.api.json

@@ -140,6 +140,12 @@
       "type": "string",
       "description": "The component test id"
     },
+    {
+      "name": "useRelativeDrag",
+      "type": "boolean",
+      "description": "If true, 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.",
+      "default": "false"
+    },
     {
       "name": "migrate",
       "type": "boolean",

packages/react-native-ui-lib/src/components/slider/types.ts

@@ -97,6 +97,11 @@ export type SliderProps = Omit<ThumbProps, 'ref'> & {
    * The slider's test identifier
    */
   testID?: string;
+  /**
+   * If true, 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.
+   */
+  useRelativeDrag?: boolean;
   /**
    * Whether to use the new Slider implementation using Reanimated
    */

packages/react-native-ui-lib/src/incubator/slider/Thumb.tsx

@@ -24,6 +24,7 @@ interface ThumbProps extends ViewProps {
   onSeekStart?: () => void;
   onSeekEnd?: () => void;
   enableShadow?: boolean;
+  isActive?: SharedValue<boolean>;
 }
 
 const SHADOW_RADIUS = 4;
@@ -53,7 +54,9 @@ const Thumb = (props: ThumbProps) => {
     stepInterpolatedValue,
     gap = 0,
     secondary,
-    enableShadow
+    enableShadow,
+    pointerEvents,
+    isActive
   } = props;
 
   const rtlFix = Constants.isRTL ? -1 : 1;
@@ -93,15 +96,16 @@ const Thumb = (props: ThumbProps) => {
         offset.value = Math.round(offset.value / stepInterpolatedValue.value) * stepInterpolatedValue.value;
       }
     });
-  gesture.enabled(!disabled);
+  gesture.enabled(!disabled && pointerEvents !== 'none');
 
   const animatedStyle = useAnimatedStyle(() => {
-    const customStyle = isPressed.value ? activeStyle?.value : defaultStyle?.value;
+    const active = isPressed.value || isActive?.value;
+    const customStyle = active ? activeStyle?.value : defaultStyle?.value;
     return {
       ...customStyle,
       transform: [
         {translateX: (offset.value - thumbSize.value.width / 2) * rtlFix},
-        {scale: withSpring(!disableActiveStyling && isPressed.value ? 1.3 : 1)}
+        {scale: withSpring(!disableActiveStyling && active ? 1.3 : 1)}
       ]
     };
   });
@@ -117,6 +121,7 @@ const Thumb = (props: ThumbProps) => {
     <GestureDetector gesture={gesture}>
       <View
         reanimated
+        pointerEvents={pointerEvents}
         style={[styles.thumbPosition, enableShadow && styles.thumbShadow, animatedStyle]}
         hitSlop={hitSlop}
         onLayout={onThumbLayout}

packages/react-native-ui-lib/src/incubator/slider/index.tsx

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import React, {ReactElement, useImperativeHandle, useCallback, useMemo, useEffect, useRef} from 'react';
 import {StyleSheet, AccessibilityRole, StyleProp, ViewStyle, GestureResponderEvent, LayoutChangeEvent, ViewProps, AccessibilityProps} from 'react-native';
 import {useSharedValue, useAnimatedStyle, runOnJS, useAnimatedReaction, withTiming} from 'react-native-reanimated';
-import {GestureHandlerRootView} from 'react-native-gesture-handler';
+import {GestureHandlerRootView, GestureDetector, Gesture} from 'react-native-gesture-handler';
 import {forwardRef, ForwardRefInjectedProps, Constants} from '../../commons/new';
 import {extractAccessibilityProps} from '../../commons/modifiers';
 import {Colors, Spacings} from '../../style';
@@ -15,6 +15,7 @@ import {
   getValueForOffset,
   getStepInterpolated
 } from './SliderPresenter';
+import View from '../../components/view';
 import Thumb from './Thumb';
 import Track from './Track';
 
@@ -139,6 +140,11 @@ export interface SliderProps extends AccessibilityProps {
    * Whether to use the new Slider implementation using Reanimated
    */
   migrate?: boolean;
+  /**
+   * If true, 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.
+   */
+  useRelativeDrag?: boolean;
   /** 
    * Control the throttle time of the onValueChange and onRangeChange callbacks
    */
@@ -193,6 +199,7 @@ const Slider = React.memo((props: Props) => {
     accessible = true,
     testID,
     enableThumbShadow = true,
+    useRelativeDrag,
     throttleTime = 200
   } = themeProps;
 
@@ -373,6 +380,42 @@ const Slider = React.memo((props: Props) => {
     }
   };
 
+  const containerDragStartOffset = useSharedValue(0);
+  const isContainerDragging = useSharedValue(false);
+
+  const clampOffset = (offset: number) => {
+    'worklet';
+    return Math.max(0, Math.min(trackSize.value.width, offset));
+  };
+
+  const snapToStep = () => {
+    'worklet';
+    if (shouldBounceToStep) {
+      const step = stepInterpolatedValue.value;
+      defaultThumbOffset.value = Math.round(defaultThumbOffset.value / step) * step;
+    }
+  };
+
+  const containerGesture = Gesture.Pan()
+    .onBegin(() => {
+      containerDragStartOffset.value = defaultThumbOffset.value;
+      isContainerDragging.value = true;
+      _onSeekStart();
+    })
+    .onUpdate(e => {
+      if (trackSize.value.width === 0) {
+        return;
+      }
+      const dx = e.translationX * (shouldDisableRTL ? 1 : rtlFix);
+      defaultThumbOffset.value = clampOffset(containerDragStartOffset.value + dx);
+    })
+    .onEnd(() => _onSeekEnd())
+    .onFinalize(() => {
+      isContainerDragging.value = false;
+      snapToStep();
+    });
+  containerGesture.enabled(!disabled && !!useRelativeDrag);
+
   const trackAnimatedStyles = useAnimatedStyle(() => {
     if (useRange) {
       return {
@@ -399,6 +442,8 @@ const Slider = React.memo((props: Props) => {
         onSeekEnd={_onSeekEnd}
         shouldDisableRTL={shouldDisableRTL}
         disabled={disabled}
+        pointerEvents={useRelativeDrag ? 'none' : undefined}
+        isActive={useRelativeDrag ? isContainerDragging : undefined}
         disableActiveStyling={disableActiveStyling}
         defaultStyle={_thumbStyle}
         activeStyle={_activeThumbStyle}
@@ -415,7 +460,7 @@ const Slider = React.memo((props: Props) => {
       <Track
         renderTrack={renderTrack}
         onLayout={onTrackLayout}
-        onPress={onTrackPress}
+        onPress={useRelativeDrag ? undefined : onTrackPress}
         animatedStyle={trackAnimatedStyles}
         disabled={disabled}
         maximumTrackTintColor={maximumTrackTintColor}
@@ -425,15 +470,29 @@ const Slider = React.memo((props: Props) => {
     );
   };
 
+  const renderSliderContent = () => (
+    <>
+      {_renderTrack()}
+      {renderThumb(ThumbType.DEFAULT)}
+      {useRange && renderThumb(ThumbType.RANGE)}
+    </>
+  );
+
   return (
     <GestureHandlerRootView
       style={[styles.container, containerStyle, shouldDisableRTL && styles.disableRTL]}
       testID={testID}
       {...accessibilityProps}
     >
-      {_renderTrack()}
-      {renderThumb(ThumbType.DEFAULT)}
-      {useRange && renderThumb(ThumbType.RANGE)}
+      {useRelativeDrag ? (
+        <GestureDetector gesture={containerGesture}>
+          <View style={styles.gestureContainer}>
+            {renderSliderContent()}
+          </View>
+        </GestureDetector>
+      ) : (
+        renderSliderContent()
+      )}
     </GestureHandlerRootView>
   );
 });
@@ -446,6 +505,10 @@ const styles = StyleSheet.create({
     height: THUMB_SIZE + SHADOW_RADIUS,
     justifyContent: 'center'
   },
+  gestureContainer: {
+    flex: 1,
+    justifyContent: 'center'
+  },
   disableRTL: {
     transform: [{scaleX: -1}]
   },