Getting Started

Getting Started

Installation

First, you need to follow the installation instructions for Reanimated v2 (opens in a new tab) and react-native-gesture-handler (opens in a new tab).

If you are using react-native-gesture-handler version >= 2:

yarn add react-native-awesome-slider

Otherwise:

yarn add react-native-awesome-slider@1

Basic Usage

import { useSharedValue } from 'react-native-reanimated';
import { Slider } from 'react-native-awesome-slider';
 
export const Example = () => {
  const progress = useSharedValue(30);
  const min = useSharedValue(0);
  const max = useSharedValue(100);
 
  return (
    <Slider
      style={styles.container}
      progress={progress}
      minimumValue={min}
      maximumValue={max}
    />
  );
};

Change Theme

Use the Theme object to customize colors:

<Slider
  theme={{
    disableMinTrackTintColor: '#fff',
    maximumTrackTintColor: '#fff',
    minimumTrackTintColor: '#000',
    cacheTrackTintColor: '#333',
    bubbleBackgroundColor: '#666',
    heartbeatColor: '#999',
  }}
/>

Add Haptic Feedback

  1. Add haptics feedback library to your project:

  2. Add onHapticFeedback callback to your slider component:

<Slider
  onHapticFeedback={() => {
    ReactNativeHapticFeedback.trigger('impactLight', {
      enableVibrateFallback: true,
      ignoreAndroidSystemSettings: false,
    });
  }}
/>

  1. Set haptic mode - use HapticModeEnum.STEP if you have enabled the 'step' prop, otherwise use HapticModeEnum.BOTH.

  2. ✅ Done!

For more usage examples, please check out the Example (opens in a new tab) directory.

IntroductionUsage