@jellify-music/react-native-reanimated-slider

A performant, customizable slider component for React Native, powered by React Native Gesture Handler and Reanimated.

Intro

We built this slider for Jellify to have an easily customizable and performant slider with minimal dependencies. Leveraging Reanimated and Gesture Handler, this library uses the modules you already know and love - and works instantly in your project.

Features

• Smooth gesture handling with tap and pan support
• Powered by Reanimated for 60fps animations
• Fully customizable colors and shadows
• Works on iOS and Android

Installation

npm install @jellify-music/react-native-reanimated-slider
# or
yarn add @jellify-music/react-native-reanimated-slider
# or
bun add @jellify-music/react-native-reanimated-slider

Peer Dependencies

This library requires the following peer dependencies:

• react-native-reanimated >= 3.0.0
• react-native-gesture-handler >= 2.0.0

Usage

import Slider from '@jellify-music/react-native-reanimated-slider';
import { useSharedValue } from 'react-native-reanimated';

function MyComponent() {
  const progress = useSharedValue(0);

  return (
    <Slider
      value={progress}
      onValueChange={(value) => {
        console.log('Slider value:', value);
      }}
      maxValue={100}
      thumbWidth={24}
      trackHeight={8}
      backgroundColor="#e0e0e0"
      color="#6200ee"
      thumbShadowColor="#000"
    />
  );
}

Props

Prop	Type	Required	Description
value	SharedValue<number>	✓	A Reanimated shared value that controls the slider position
onValueChange	(value: number) => void	✓	Callback fired when the user releases the slider
maxValue	number	✓	The maximum value of the slider
thumbWidth	number	✓	The width and height of the thumb (circular)
trackHeight	number	✓	The height of the track
backgroundColor	string	✓	The color of the background track
color	string	✓	The color of the progress track and thumb
thumbShadowColor	string		The shadow color of the thumb
gestureActiveRef	RefObject<boolean>		A ref indicating whether the slider is being used
hitSlop	object		A hitSlop object

Example Project

To run the example project locally:

# Clone the repo
git clone https://github.com/Jellify-Music/react-native-animated-slider.git
cd react-native-animated-slider

# Install dependencies
bun install

# Navigate to the example folder
cd example

# Generate native projects
bun prebuild

# Run on iOS
bun ios

# Or run on Android
bun android

Contributing

• Development workflow
• Sending a pull request

License

MIT

---

Made with create-react-native-library