Customizable, Performant React Native Slider with Reanimated Support

Description:

react-native-reanimated-slider is a UI component for React Native that creates customizable, draggable, mobile-first sliders in your apps.

The library utilizes react-native-reanimated and react-native-gesture-handler to manage touch interactions and visual updates on the UI thread.

It replaces standard JS-driven sliders with a native-backed implementation to maintain 60fps performance during complex gestures.

The development team at Jellify created this library to handle audio scrubbing and volume control within their music application.

It avoids heavy external dependencies by relying on the standard animation and gesture libraries found in most modern React Native environments.

You can configure the slider using shared values rather than standard React state to prevent unnecessary re-renders across the JavaScript bridge.

Features

Native Performance: The component executes animations on the UI thread via Reanimated to prevent frame drops.
Gesture Support: It recognizes both tap and pan interactions through React Native Gesture Handler.
Visual Customization: You can define exact dimensions and hex codes for the track, thumb, and shadows.
Cross-Platform Rendering: The slider functions identically on both iOS and Android devices.

Use Cases

Audio Scrubbing: Control playback position in music or podcast applications with high precision.
Volume Adjustment: Manage global audio levels in media players.
Form Inputs: Select numeric values within a specific range for user profile settings.
Brightness Control: Adjust screen or image brightness in photo editing tools.

How to Use It

1. Add the package to your project using your preferred package manager.

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

2. This library relies on specific versions of animation and gesture packages. You must install these if they are not already present in your project.

npm install react-native-reanimated react-native-gesture-handler

react-native-reanimated must be version 3.0.0 or higher.
react-native-gesture-handler must be version 2.0.0 or higher.

3. The slider requires a Reanimated SharedValue to track its position. This differs from standard React state. You pass this shared value directly to the component.

import React from 'react';
import { View, Text } from 'react-native';
import Slider from '@jellify-music/react-native-reanimated-slider';
import { useSharedValue } from 'react-native-reanimated';
export default function VolumeControl() {
  // Initialize the shared value
  const progress = useSharedValue(0);
  return (
    <View style={{ padding: 20 }}>
      <Text>Adjust Volume</Text>
      <Slider
        value={progress}
        onValueChange={(val) => {
          // This callback runs when the user releases the slider
          console.log('New volume level:', val);
        }}
        maxValue={100}
        thumbWidth={24}
        trackHeight={8}
        backgroundColor="#e0e0e0"
        color="#6200ee"
        thumbShadowColor="#000"
      />
    </View>
  );
}

4. Available props for the Slider component.

Prop	Type	Required	Description
`value`	`SharedValue<number>`	Yes	The Reanimated shared value that tracks the slider’s current position.
`onValueChange`	`(value: number) => void`	Yes	A function that executes when the user finishes dragging or tapping.
`maxValue`	`number`	Yes	The upper limit of the slider’s range.
`thumbWidth`	`number`	Yes	Sets the diameter (width and height) of the circular thumb.
`trackHeight`	`number`	Yes	Sets the vertical thickness of the track.
`backgroundColor`	`string`	Yes	Hex color code for the inactive portion of the track.
`color`	`string`	Yes	Hex color code for the active track and the thumb.
`thumbShadowColor`	`string`	No	Hex color code for the shadow behind the thumb.
`gestureActiveRef`	`RefObject<boolean>`	No	A ref that tracks whether the user is currently interacting with the slider.
`hitSlop`	`object`	No	Extends the touchable area around the slider. Follows standard Gesture Handler configuration.

Related Resources

React Native Reanimated: The animation library that powers the slider’s movement on the UI thread.
React Native Gesture Handler: The library responsible for detecting touch, tap, and pan gestures.
Best Range Slider: 10 Best Range Slider Components For React And React Native.

FAQs

Q: Does this work with Expo?
A: Yes, it works with Expo projects as long as you include the config plugins for Reanimated and Gesture Handler in your app.json.

Q: Can I change the shape of the thumb?
A: The current API restricts the thumb to a circular shape defined by thumbWidth. You must modify the source code to render a different shape.

Q: Why does the slider require a SharedValue instead of useState?
A: A SharedValue allows the animation to run synchronously on the UI thread. This setup prevents the JavaScript thread from blocking the slider movement during heavy operations.

Q: How do I handle continuous updates while dragging?
A: The onValueChange prop triggers only on release. To track values during the drag, you can attach a useDerivedValue or useAnimatedReaction to the value prop within your component.