React Native Sticky Range Slider 🌟

A pure TS 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 fully compatible with both Android and iOS platforms.
Primarily forked from 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 🦋

Installation 📦

npm install react-native-sticky-range-slider

yarn add react-native-sticky-range-slider

Usage 🚀

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. 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