Installation

First you have to follow installation instructions of Reanimated v2 and react-native-gesture-handler

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

yarn add react-native-awesome-slider

else:

yarn add react-native-awesome-slider@1

Example usage

Basic use:

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 slider theme color?

Use the Theme object.

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

For more usage, please view Example.

Add pan haptic feedback?

1. You need add haptics feedback lib to you project.

• Expo
• NON-Expo

2. Add onHapticFeedback callback to you slider component.

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

3. Set haptic mode, if you open 'step' prop, you need set hapticMode=HapticModeEnum.STEP, otherwise set to hapticMode=HapticModeEnum.BOTH.

4. ✅ Finish!

Why use this library?

• Pure javascript slider implementations usually rely on react-native's gesture events which may inadvertently trigger 'swipe to go back' events as you pan the slider. ❌
• Native sliders rely on state updates, which can cause performance issues. ❌

react-native-awesome-slider relies on reanimated's ShareValue ability to run code directly in the UIThread to enhance performance, and react-native-gesture-handle won't interfere with your swiping gestures. ✨

Features

• 100% written in TypeScript.
• 100% built upon react-native-reanimated and react-native-gesture-handler.
• Supports Tap & Pan triggering.
• Support for a discrete slider.
• Support haptic feedback.
• and more...

TODO list

• ~~Support step props~~
• ~~Optimize bubble & thumb~~
• ~~Rewrite using react-native-gesture-handler v2~~
• ~~Support marks props~~
• Web Support

Configuration

The <Slider/> component has the following configuration properties: