API Reference

Props

Core Props

Prop	Type	Required	Default	Description
`progress`	`Animated.SharedValue<number>`	✓	`0`	Current value of the slider
`minimumValue`	`Animated.SharedValue<number>`	✓	-	Minimum value of the slider
`maximumValue`	`Animated.SharedValue<number>`	✓	-	Maximum value of the slider
`cache`	`Animated.SharedValue<number>`	-	`0`	Cache value for the slider (useful for video/audio players)
`bubble`	`(value: number) => string`	-	`value => ${Math.round(value * 100) / 100}`	Function to format bubble text

Callbacks

Prop	Type	Required	Default	Description
`onSlidingStart`	`() => void`	-	-	Called when sliding starts
`onValueChange`	`(value: number) => void`	-	-	Called when the slider value changes
`onSlidingComplete`	`(value: number) => void`	-	-	Called when sliding completes
`onTap`	`() => void`	-	-	Called when the slider is tapped
`onHapticFeedback`	`() => void`	-	-	Called to trigger haptic feedback

Appearance

Prop	Type	Required	Default	Description
`theme`	`SliderTheme`	-	See below	Theme configuration for the slider
`style`	`ViewStyle`	-	-	Style for the container view
`containerStyle`	`ViewStyle`	-	See below	Style for the slider track container
`bubbleContainerStyle`	`ViewStyle`	-	-	Style for the bubble container
`bubbleTextStyle`	`TextStyle`	-	-	Style for the bubble text
`marksStyle`	`ViewStyle`	-	See below	Style for step marks
`sliderHeight`	`number`	-	`5`	Height of the slider track
`thumbWidth`	`number`	-	`15`	Width of the thumb
`thumbTouchSize`	`number`	-	`thumbWidth`	Touch area size around thumb
`markWidth`	`number`	-	`4`	Width of step marks
`bubbleMaxWidth`	`number`	-	`100`	Maximum width of bubble
`bubbleWidth`	`number`	-	`0`	Fixed bubble width
`bubbleTranslateY`	`number`	-	`-25`	Vertical offset of bubble
`bubbleOffsetX`	`number`	-	`0`	Horizontal offset of bubble

Custom Rendering

Prop	Type	Required	Default	Description
`renderBubble`	`() => React.ReactNode`	-	-	Custom bubble component
`renderThumb`	`() => React.ReactNode`	-	-	Custom thumb component
`renderMark`	`({ index: number }) => React.ReactNode`	-	-	Custom mark component
`renderTrack`	`({ index: number }) => React.ReactNode`	-	-	Custom track component

Behavior

Prop	Type	Required	Default	Description
`disable`	`boolean`	-	`false`	Disables all interactions
`disableTapEvent`	`boolean`	-	`true`	Disables tap-to-seek behavior
`step`	`number`	-	-	Step value for discrete slider
`steps`	`number`	-	-	Number of steps
`snapToStep`	`boolean`	-	`true`	Whether to snap to steps
`heartbeat`	`boolean`	-	`false`	Enables heartbeat animation
`disableTrackFollow`	`boolean`	-	`false`	Disable thumb following track
`disableTrackPress`	`boolean`	-	`false`	Only allow dragging thumb
`stepTimingOptions`	`WithTimingConfig \| false`	-	`false`	Animation config for steps
`snapThreshold`	`number`	-	`0`	Threshold for snapping to steps
`snapThresholdMode`	`'percentage' \| 'absolute'`	-	`'absolute'`	Mode for snap threshold
`forceSnapToStep`	`boolean`	-	`false`	Always snap to nearest step
`hapticMode`	`'none' \| 'step' \| 'both'`	-	`'none'`	When to trigger haptics
`isRTL`	`boolean`	-	`I18nManager.isRTL`	Enable RTL (right-to-left) mode

Gesture Configuration

Prop	Type	Required	Default	Description
`activeOffsetX`	`number \| number[]`	-	-	Active offset for horizontal gesture
`activeOffsetY`	`number \| number[]`	-	-	Active offset for vertical gesture
`failOffsetX`	`number \| number[]`	-	-	Fail offset for horizontal gesture
`failOffsetY`	`number \| number[]`	-	-	Fail offset for vertical gesture
`panHitSlop`	`object`	-	See below	Hit slop for pan gesture

State Management

Prop	Type	Required	Default	Description
`isScrubbing`	`Animated.SharedValue<boolean>`	-	-	Track scrubbing state
`thumbScaleValue`	`Animated.SharedValue<number>`	-	-	Control thumb scale animation
`panDirectionValue`	`Animated.SharedValue<PanDirectionEnum>`	-	-	Track pan direction

Pan Direction Enum

enum PanDirectionEnum {
  START = 0, // Pan gesture started
  LEFT = 1, // Panning left
  RIGHT = 2, // Panning right
  END = 3, // Pan gesture ended
}

Default Values

Default Theme

{
  minimumTrackTintColor: '#1890ff',
  maximumTrackTintColor: '#e5e5e5',
  cacheTrackTintColor: '#cacaca',
  disableMinTrackTintColor: '#999999',
  bubbleBackgroundColor: '#ffffff',
  heartbeatColor: '#1890ff'
}

Default Container Style

{
  width: '100%',
  height: 5,
  borderRadius: 2,
  borderColor: 'transparent',
  overflow: 'hidden',
  borderWidth: 1,
  backgroundColor: maximumTrackTintColor
}

Default Pan Hit Slop

{
  top: 8,
  left: 0,
  bottom: 8,
  right: 0
}

Default Marks Style

{
  width: 4,
  height: 4,
  backgroundColor: '#fff',
  position: 'absolute',
  top: 2
}

Theme Configuration

The slider can be themed using the theme prop:

interface SliderTheme {
  minimumTrackTintColor: string; // Progress track color
  maximumTrackTintColor: string; // Background track color
  cacheTrackTintColor: string; // Cache track color
  disableMinTrackTintColor: string; // Disabled track color
  bubbleBackgroundColor: string; // Bubble background color
  heartbeatColor: string; // Heartbeat animation color
}

Get Started Examples