react-native-fast-range-slider

A high-performance React Native range slider component built with react-native-reanimated and react-native-gesture-handler for smooth animations and precise touch control. Pure JavaScript implementation - no native code required.

Features

• 🚀 High performance using react-native-reanimated
• 🎯 Precise touch controls with react-native-gesture-handler
• 💨 Smooth animations running on UI thread
• 🔄 Real-time value updates
• 🎨 Fully customizable styling
• ♿️ Accessibility support
• 📱 Pure JavaScript implementation - no native code or linking needed
• 🔧 Configurable min/max values and step sizes
• 🎛 Support for minimum distance between thumbs
• 🌐 RTL (Right-to-Left) support
• ⚡️ Works with Expo out of the box

Performance Benefits

This slider leverages two powerful libraries for optimal performance, while maintaining a pure JavaScript implementation:

• react-native-reanimated: Runs animations directly on the UI thread, eliminating JS-bridge overhead and ensuring smooth 60 FPS animations
• react-native-gesture-handler: Provides native-driven gesture handling, resulting in more responsive touch interactions compared to React Native's PanResponder

Both dependencies are widely adopted in the React Native ecosystem and don't require any additional native code configuration.

Preview

Prerequisites

This library requires react-native-reanimated and react-native-gesture-handler.

Expo Users

Both libraries are supported out of the box:

1npx expo install react-native-reanimated react-native-gesture-handler

React Native CLI Users

1. Install the packages:

1yarn add react-native-reanimated react-native-gesture-handler

2. Follow the additional setup instructions in:

• Reanimated Installation Guide
• Gesture Handler Installation Guide

Installation

1npm install react-native-fast-range-slider
2# or
3yarn add react-native-fast-range-slider

Usage

1import RangeSlider from 'react-native-fast-range-slider';
2
3const YourComponent = () => {
4  const handleValuesChange = (values) => {
5    console.log('Current values:', values);
6  };
7
8  return (
9    <RangeSlider
10      initialMinValue={20}
11      initialMaxValue={80}
12      min={0}
13      max={100}
14      step={1}
15      // Style customization
16      width={300}
17      thumbSize={32}
18      trackHeight={2.5}
19      selectedTrackStyle={{ backgroundColor: '#2196F3' }}
20      unselectedTrackStyle={{ backgroundColor: '#CECECE' }}
21      thumbStyle={{ backgroundColor: 'white' }}
22      pressedThumbStyle={{ transform: [{ scale: 1.2 }] }}
23      // Behavior
24      enabled={true}
25      allowOverlap={false}
26      showThumbLines={true}
27      minimumDistance={16}
28      // Callbacks
29      onValuesChange={handleValuesChange}
30      onValuesChangeStart={(values) => console.log('Started:', values)}
31      onValuesChangeFinish={(values) => console.log('Finished:', values)}
32      // Accessibility
33      leftThumbAccessibilityLabel="Minimum value"
34      rightThumbAccessibilityLabel="Maximum value"
35    />
36  );
37};

Props

Prop	Type	Required	Default	Description
Core Props
min	number	Yes	-	Minimum allowed value
max	number	Yes	-	Maximum allowed value
initialMinValue	number	No	min	Initial minimum value
initialMaxValue	number	No	max	Initial maximum value
step	number	No	1	Step size for value changes
Customization Props
width	number	No	270	Width of the slider track
thumbSize	number	No	32	Size of thumb handles
trackHeight	number	No	2.5	Height of slider track
minimumDistance	number	No	16	Minimum distance between thumbs
showThumbLines	boolean	No	true	Show lines inside thumb handles
Style Props
selectedTrackStyle	object	No	-	Style object for selected track portion
unselectedTrackStyle	object	No	-	Style object for unselected track portion
thumbStyle	object	No	-	Style object for both thumbs
pressedThumbStyle	object	No	-	Style applied when thumb is pressed
containerStyle	object	No	-	Style for the container view
selectedTrackColor	string	No	'#2196F3'	Color of the selected track portion
Behavior Props
enabled	boolean	No	true	Enable/disable slider
allowOverlap	boolean	No	false	Allow thumbs to overlap
Callback Props
onValuesChange	function	No	() => {}	Called while dragging
onValuesChangeStart	function	No	() => {}	Called when drag starts
onValuesChangeFinish	function	No	() => {}	Called when drag ends
Accessibility Props
leftThumbAccessibilityLabel	string	No	"Left handle"	Accessibility label for left thumb
rightThumbAccessibilityLabel	string	No	"Right handle"	Accessibility label for right thumb

Styling

The component supports several style customization props:

1<RangeSlider
2  // Track styles
3  selectedTrackStyle={{
4    backgroundColor: '#2196F3',
5    height: 4,
6  }}
7  unselectedTrackStyle={{
8    backgroundColor: '#CECECE',
9    height: 4,
10  }}
11  
12  // Thumb styles
13  thumbStyle={{
14    backgroundColor: 'white',
15    borderColor: '#CECECE',
16    borderWidth: 0.5,
17    shadowColor: '#000',
18    shadowOffset: { width: 0, height: 2 },
19    shadowOpacity: 0.25,
20    shadowRadius: 3.84,
21  }}
22  
23  // Pressed thumb style
24  pressedThumbStyle={{
25    transform: [{ scale: 1.2 }],
26  }}
27  
28  // Container style
29  containerStyle={{
30    height: 50,
31  }}
32  
33  // Show/hide thumb lines
34  showThumbLines={true}
35/>

Callbacks

1<RangeSlider
2  onValuesChange={(values) => {
3    // Called while dragging
4  }}
5  onValuesChangeStart={(values) => {
6    // Called when drag starts
7  }}
8  onValuesChangeFinish={(values) => {
9    // Called when drag ends
10  }}
11/>

Accessibility

The slider supports screen readers with customizable labels:

1<RangeSlider
2  leftMarkerAccessibilityLabel="Minimum value"
3  rightMarkerAccessibilityLabel="Maximum value"
4/>

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Written by Amit Palomo

Made with create-react-native-library