DocumentationGet Started

Getting Started

Installation

First, you need to follow the installation instructions for Reanimated v2 and react-native-gesture-handler.

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',
  }}
/>
IndexAPI Reference