|
1 |
| -# react-native-range-slider |
| 1 | +# React Native Range Slider |
2 | 2 |
|
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 |
4 | 25 |
|
5 | 26 | ## Installation
|
6 | 27 |
|
7 |
| -```sh |
| 28 | +```bash |
8 | 29 | 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 |
9 | 39 | ```
|
10 | 40 |
|
11 | 41 | ## Usage
|
12 | 42 |
|
| 43 | +```javascript |
| 44 | +import RangeSlider from 'react-native-range-slider'; |
13 | 45 |
|
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 | +``` |
16 | 69 |
|
17 |
| -// ... |
| 70 | +## Props |
18 | 71 |
|
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 | +/> |
20 | 104 | ```
|
21 | 105 |
|
| 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 | +``` |
22 | 132 |
|
23 | 133 | ## Contributing
|
24 | 134 |
|
|
30 | 140 |
|
31 | 141 | ---
|
32 | 142 |
|
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) |
0 commit comments