react-native-sticky-range-slider
Version:
[React Native | TypeScript] A pure TypeScript component offering a customizable range slider optimized for performance. It supports dragging functionalities for selecting a range of values, with values that smoothly follow the thumb. This component is ful
164 lines (135 loc) • 10.1 kB
Markdown
# React Native Sticky Range Slider 🌟
A pure TS component offering a customizable range slider optimized for performance. <br />It supports dragging functionalities for selecting a range of values, with values that **smoothly follow the thumb**.<br /> This component is fully compatible with both **Android** and **iOS** platforms. <br />Primarily forked from [rn-range-slider](https://www.npmjs.com/package/rn-range-slider).
## Features ✨
* **Optimized Performance**: Designed to ensure smooth and responsive interactions even with complex UI components.
* **Full Customization**: Highly customizable to fit your application's specific requirements.
* **Cross-Platform Compatibility**: Works seamlessly on both Android and iOS platforms.
* **Responsive**: Provides a responsive user experience, adapting to various screen sizes and orientations.
* **Programmatic Control**: Offers methods to programmatically control the slider behavior.
## Preview 🦋
<p align="center">
<img src="https://github.com/hancandice/react-native-sticky-range-slider/assets/64334381/352d075d-22f2-41eb-a0da-84631ccea7c0" width="369">
</p>
## Installation 📦
```sh
npm install react-native-sticky-range-slider
```
```sh
yarn add react-native-sticky-range-slider
```
## Usage 🚀
```jsx
import React, { useCallback, useState } from "react";
import { Button, StyleSheet, Text, View } from "react-native";
import RangeSlider from "react-native-sticky-range-slider";
const MIN_AGE = 18;
const MAX_AGE = 60;
const Thumb = (type: "high" | "low") => (
<View
style={[styles.thumb, { backgroundColor: type === "high" ? "lime" : "purple" }]}
/>
);
const Rail = () => <View style={styles.rail} />;
const RailSelected = () => <View style={styles.railSelected} />;
const App = () => {
const [min, setMin] = useState(MIN_AGE);
const [max, setMax] = useState(MAX_AGE);
const [disableRange, setDisableRange] = useState(false);
const handleValueChange = useCallback((newLow: number, newHigh: number) => {
setMin(newLow);
setMax(newHigh);
}, []);
const handleToggle = () => {
setDisableRange((prev) => !prev);
};
return (
<View style={styles.container}>
<Text style={styles.title}>{disableRange ? "Set your age" : "Set Age Range"}</Text>
<RangeSlider
style={styles.slider}
min={MIN_AGE}
max={MAX_AGE}
step={1}
minRange={5}
low={min}
high={max}
onValueChanged={handleValueChange}
renderLowValue={(value) => <Text style={styles.valueText}>{value}</Text>}
renderHighValue={(value) => (
<Text style={styles.valueText}>{value === MAX_AGE ? `+${value}` : value}</Text>
)}
renderThumb={Thumb}
renderRail={Rail}
renderRailSelected={RailSelected}
disableRange={disableRange}
/>
<Button
onPress={handleToggle}
title={disableRange ? "Switch to double control" : "Switch to single control"}
/>
</View>
);
};
const THUMB_RADIUS = 10;
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
padding: 20,
},
title: {
fontSize: 24,
textAlign: "center",
marginBottom: 20,
},
slider: {
marginVertical: 20,
},
valueText: {
color: "black",
},
thumb: {
width: THUMB_RADIUS * 2,
height: THUMB_RADIUS * 2,
borderRadius: THUMB_RADIUS,
borderWidth: 3,
borderColor: "black",
backgroundColor: "red",
},
rail: {
flex: 1,
height: 3,
borderRadius: 3,
backgroundColor: "grey",
},
railSelected: {
height: 3,
backgroundColor: "red",
},
});
export default App;
```
### Props 🎨
| Name | Description | Type | Default Value |
|----------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------|:-------------------------------------------------:|
| `min` | Minimum value for the slider. | `number` | _**required**_ |
| `max` | Maximum value for the slider. | `number` | _**required**_ |
| `minRange` | Minimum range between the low and high values. <br /> It is set to `0` if **disableRange** is `true`. | `number` | _**0**_ |
| `step` | Step value for the slider. | `number` | _**required**_ |
| `low` | Low value for the slider. | `number` | _**required**_ |
| `high` | High value for the slider. | `number` | _**required**_ |
| `onValueChanged` | Callback function that gets called when the slider values change. Receives the new low and high values as arguments. | `(low: number, high: number) => void` | _**required**_ |
| `renderThumb` | Function to render the thumb component. Accepts a type parameter which can be either high or low. | `(type: 'high' or 'low') => React.ReactNode` | _**Default Thumb**_ |
| `renderRail` | Function to render the rail component. | `() => React.ReactNode` | _**Default Rail**_ |
| `renderRailSelected` | Function to render the selected rail component. | `() => React.ReactNode` | _**Default RailSelected**_ |
| `renderLowValue` | Function to render the component displaying the low value. Receives the low value as an argument. | `(low: number) => React.ReactNode` | _**Default LowValueText**_ |
| `renderHighValue` | Function to render the component displaying the high value. Receives the high value as an argument. | `(high: number) => React.ReactNode` | _**Default HighValueText**_ |
| `pannableAreaStyle` | Style for the pannable area. | `StyleProp<ViewStyle>` | _**Default Pannable Area Style**_ |
| `disableRange` | When set to `true`, the slider functions as a standard slider with a single control. | `boolean` | _**false**_ |
| `disabled` | User interactions will be ignored when set to `true`. | `boolean` | _**false**_ |
## Contributions 🤝
Contributions are welcome! If you have any suggestions, feature requests, or bug reports, feel free to open an issue or submit a pull request. Let's make this component even better together! 😃
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)