react-native-lite-range-slider

A two-thumb range slider for React Native and Expo with zero dependencies: no Reanimated, no Gesture Handler, no native code. It only uses PanResponder and View, so it works in Expo Go, on the web and with the New Architecture.

Installation

npm install react-native-lite-range-slider

Usage

import { useState } from "react";
import { RangeSlider } from "react-native-lite-range-slider";

export function PriceFilter() {
  const [range, setRange] = useState({ low: 0, high: 500 });

  return (
    <RangeSlider
      min={0}
      max={500}
      step={10}
      low={range.low}
      high={range.high}
      onValueChanged={(low, high) => setRange({ low, high })}
      onSliderTouchEnd={(low, high) => fetchProducts(low, high)}
    />
  );
}

The slider is controlled. Store the values from onValueChanged and pass them back through low and high.

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | min | number | required | Lowest selectable value. | | max | number | required | Highest selectable value. | | step | number | 1 | Distance between two selectable values. Decimal steps (0.1) are rounded without float noise. | | low | number | min | Value of the low thumb. | | high | number | max | Value of the high thumb. | | minRange | number | 0 | Minimum distance kept between the two thumbs. | | disabled | boolean | false | Ignores touches and accessibility actions. | | inverted | boolean | I18nManager.isRTL | Puts min on the right. | | onValueChanged | (low, high) => void | required | Called on every change while dragging. | | onSliderTouchStart | (low, high) => void | | Called when a drag starts. | | onSliderTouchEnd | (low, high) => void | | Called when the thumb is released. This is the place to fetch data. | | thumbSize | number | 20 | Size of the thumbs and of their touch target. | | railHeight | number | 5 | Height of the rail. | | railColor | string | #c4c4c4 | Rail color outside the selection. | | selectedRailColor | string | #2196f3 | Rail color between the thumbs. | | thumbColor | string | #2196f3 | Color of the default thumbs. | | style | ViewStyle | | Container style. | | railStyle | ViewStyle | | Extra style for the rail. | | selectedRailStyle | ViewStyle | | Extra style for the selected part of the rail. | | thumbStyle | ViewStyle | | Extra style for the default thumbs. | | renderThumb | (thumb: "low" \| "high", value: number) => ReactNode | | Custom thumb, centered in a thumbSize square. | | lowThumbAccessibilityLabel | string | "Minimum" | Screen reader label of the low thumb. | | highThumbAccessibilityLabel | string | "Maximum" | Screen reader label of the high thumb. | | testID | string | | Also sets ${testID}-low and ${testID}-high on the thumbs. |

Custom thumb

<RangeSlider
  min={0}
  max={100}
  thumbSize={28}
  onValueChanged={setValues}
  renderThumb={(thumb, value) => (
    <View style={styles.thumb}>
      <Text style={styles.label}>{value}</Text>
    </View>
  )}
/>

Behavior

• The whole slider is a single touch area. A touch grabs the closest thumb, and a drag inside a ScrollView keeps the gesture.
• Each thumb is an adjustable element for screen readers. Swiping up or down moves it by one step and calls onValueChanged, then onSliderTouchEnd.
• Values outside [min, max] are clamped. high is never displayed below low.

Performance

Each move during a drag calls onValueChanged and re-renders the slider on the JS thread. This is fine for filters and forms. For 60 fps animations driven by the slider, use a Reanimated-based slider instead.

License

MIT