Skip to content

Commit 11a33af

Browse files
committed
feat: add RangeSlider component with customizable props and update README
1 parent c49c7eb commit 11a33af

18 files changed

+15202
-140
lines changed

README.md

Lines changed: 118 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,134 @@
1-
# react-native-range-slider
1+
# React Native Range Slider
22

3-
123123
3+
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.
4+
5+
## Features
6+
7+
- 🚀 High performance using react-native-reanimated
8+
- 🎯 Precise touch controls with react-native-gesture-handler
9+
- 💨 Smooth animations running on UI thread
10+
- 🔄 Real-time value updates
11+
- 🎨 Fully customizable styling
12+
- ♿️ Accessibility support
13+
- 📱 Pure JavaScript implementation
14+
- 🔧 Configurable min/max values and step sizes
15+
- 🎛 Support for minimum distance between markers
16+
- 🔒 Optional snap-to-step behavior
17+
- 🌐 RTL (Right-to-Left) support (automatic)
18+
19+
## Performance Benefits
20+
21+
This slider leverages two powerful libraries for optimal performance:
22+
23+
- **react-native-reanimated**: Runs animations directly on the UI thread, eliminating JS-bridge overhead and ensuring smooth 60 FPS animations even during complex interactions
24+
- **react-native-gesture-handler**: Provides native-driven gesture handling, resulting in more responsive touch interactions compared to React Native's PanResponder
425

526
## Installation
627

7-
```sh
28+
```bash
829
npm install react-native-range-slider
30+
# or
31+
yarn add react-native-range-slider
32+
```
33+
34+
### Dependencies
35+
36+
This library requires:
37+
```bash
38+
yarn add react-native-reanimated react-native-gesture-handler
939
```
1040

1141
## Usage
1242

43+
```javascript
44+
import RangeSlider from 'react-native-range-slider';
1345

14-
```js
15-
import { multiply } from 'react-native-range-slider';
46+
const YourComponent = () => {
47+
const handleValuesChange = (values) => {
48+
console.log('Current values:', values);
49+
};
50+
51+
return (
52+
<RangeSlider
53+
values={[20, 80]}
54+
min={0}
55+
max={100}
56+
step={1}
57+
onValuesChange={handleValuesChange}
58+
// Customize appearance
59+
selectedTrackColor="#2196F3"
60+
unselectedTrackColor="#CECECE"
61+
markerColor="white"
62+
// Optional behavior props
63+
snapsToStep={true}
64+
allowOverlap={false}
65+
/>
66+
);
67+
};
68+
```
1669

17-
// ...
70+
## Props
1871

19-
const result = await multiply(3, 7);
72+
| Prop | Type | Required | Default | Description |
73+
|------|------|----------|---------|-------------|
74+
| values | [number, number] | Yes | - | Current values array [min, max] |
75+
| min | number | Yes | - | Minimum allowed value |
76+
| max | number | Yes | - | Maximum allowed value |
77+
| step | number | No | 1 | Step size for value changes |
78+
| sliderWidth | number | No | 270 | Width of the slider track |
79+
| markerSize | number | No | 32 | Size of marker handles |
80+
| trackHeight | number | No | 2.5 | Height of slider track |
81+
| minimumDistance | number | No | 16 | Minimum distance between markers |
82+
| enabled | boolean | No | true | Enable/disable slider |
83+
| snapsToStep | boolean | No | false | Snap values to steps |
84+
| allowOverlap | boolean | No | false | Allow markers to overlap |
85+
86+
## Styling
87+
88+
The component is highly customizable through style props:
89+
90+
```javascript
91+
<RangeSlider
92+
// Colors
93+
selectedTrackColor="#2196F3"
94+
unselectedTrackColor="#CECECE"
95+
markerColor="white"
96+
97+
// Custom styles
98+
selectedStyle={{...}}
99+
unselectedStyle={{...}}
100+
markerStyle={{...}}
101+
pressedMarkerStyle={{...}}
102+
containerStyle={{...}}
103+
/>
20104
```
21105

106+
## Callbacks
107+
108+
```javascript
109+
<RangeSlider
110+
onValuesChange={(values) => {
111+
// Called while dragging
112+
}}
113+
onValuesChangeStart={(values) => {
114+
// Called when drag starts
115+
}}
116+
onValuesChangeFinish={(values) => {
117+
// Called when drag ends
118+
}}
119+
/>
120+
```
121+
122+
## Accessibility
123+
124+
The slider supports screen readers with customizable labels:
125+
126+
```javascript
127+
<RangeSlider
128+
leftMarkerAccessibilityLabel="Minimum value"
129+
rightMarkerAccessibilityLabel="Maximum value"
130+
/>
131+
```
22132

23133
## Contributing
24134

@@ -30,4 +140,4 @@ MIT
30140

31141
---
32142

33-
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
143+
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

example/app.json

Lines changed: 0 additions & 30 deletions
This file was deleted.

example/assets/adaptive-icon.png

-17.1 KB
Binary file not shown.

example/assets/favicon.png

-1.43 KB
Binary file not shown.

example/assets/icon.png

-21.9 KB
Binary file not shown.

example/assets/splash-icon.png

-17.1 KB
Binary file not shown.

example/babel.config.js

Lines changed: 0 additions & 16 deletions
This file was deleted.

example/index.js

Lines changed: 0 additions & 8 deletions
This file was deleted.

example/metro.config.js

Lines changed: 0 additions & 18 deletions
This file was deleted.

example/package.json

Lines changed: 0 additions & 25 deletions
This file was deleted.

0 commit comments

Comments
 (0)