rn-range-slider

To use the RangeSlider, you must provide render functions for the thumb, rail, and selected rail. The component uses React hooks and requires React Native version 0.59.0 or higher.

Note that the component is highly optimized: it uses React Native's Animated library to transform thumbs, labels, and the selected rail, ensuring the main component does not re-render while the user moves the thumb.

import RangeSlider from 'rn-range-slider';

// ... inside your component

const renderThumb = useCallback(() => <Thumb/>, []);
const renderRail = useCallback(() => <Rail/>, []);
const renderRailSelected = useCallback(() => <RailSelected/>, []);
const renderLabel = useCallback(value => <Label text={value}/>, []);
const renderNotch = useCallback(() => <Notch/>, []);
const handleValueChange = useCallback((low, high) => {
  setLow(low);
  setHigh(high);
}, []);

// ...

<RangeSlider
  style={styles.slider}
  min={0}
  max={100}
  step={1}
  floatingLabel
  renderThumb={renderThumb}
  renderRail={renderRail}
  renderRailSelected={renderRailSelected}
  renderLabel={renderLabel}
  renderNotch={renderNotch}
  onValueChanged={handleValueChange}
/>

The RangeSlider component accepts several properties to control its behavior and appearance.

Required Props:

• min: Minimum value of slider.
• max: Maximum value of slider.
• renderThumb: Function (name: 'high' | 'low') => Node to render the thumb. The name allows rendering different thumbs for high and low values.
• renderRail: Function () => Node to render the "rail" for thumbs. The component should have flex: 1 style.
• renderRailSelected: Function () => Node to render the selected part of the rail. The component should not have flex: 1 style so it fills the space.

Configuration Props:

• minRange: Minimum range allowed to be selected by the user. (Default: 0)
• step: Step of the slider. (Default: 1)
• low: Initial low value. If not provided, defaults to min.
• high: Initial high value. If not provided, defaults to max.
• floatingLabel: If true, labels are rendered as popups over the content above the slider instead of taking up space in the component tree. (Default: false)
• disableRange: If true, the slider works as an ordinary single-control slider. (Default: false)
• disabled: If true, user interactions are ignored. (Default: false)
• allowLabelOverflow: If true, labels can be drawn outside the slider's bounds. (Default: false)

Event Props:

• onValueChanged: Called when value changes. Signature: (low: number, high: number, fromUser: boolean) => void.
• onSliderTouchStart: Called when user starts interaction. Signature: (low: number, high: number) => void.
• onSliderTouchEnd: Called when user ends interaction. Signature: (low: number, high: number) => void.

The RangeSlider component is a highly customizable React Native range slider. It allows you to render your own thumbs, rails, labels, and notches, providing full control over the UI while managing the slider logic (min/max, steps, and range constraints) internally.

To use it, you must provide render functions for the thumbs, the rail, and the selected rail. You can also optionally provide render functions for labels and notches that follow the thumbs during interaction.

import React from 'react';
import { View, Text } from 'react-native';
import Slider from 'rn-range-slider';

const MySlider = () => {
  return (
    <Slider
      min={0}
      max={100}
      step={1}
      renderThumb={(name) => (
        <View key={name} style={{ width: 20, height: 20, borderRadius: 10, backgroundColor: 'blue' }} />
      )}
      renderRail={() => (
        <View style={{ height: 4, backgroundColor: 'gray', width: '100%' }} />
      )}
      renderRailSelected={() => (
        <View style={{ height: 4, backgroundColor: 'blue', width: '100%' }} />
      )}
      onValueChanged={(low, high, byUser) => {
        console.log('New range:', low, high, 'Changed by user:', byUser);
      }}
    />
  );
};

The SliderProps interface defines the configuration for the RangeSlider.

Core Props

• min: number - The minimum value of the slider.
• max: number - The maximum value of the slider.
• step: number - The step increment for value changes.
• low: number (optional) - The initial low value.
• high: number (optional) - The initial high value.
• minRange: number (optional, default: 0) - The minimum allowed distance between the low and high thumbs.

Rendering Props (Required)

• renderThumb: (name: 'high' | 'low') => ReactNode - Function to render the thumb component. Receives the thumb name as an argument.
• renderRail: () => ReactNode - Function to render the background rail.
• renderRailSelected: () => ReactNode - Function to render the rail segment between the two thumbs.

Optional Rendering Props

• renderLabel: (value: number) => ReactNode - Function to render a label that follows the thumb.
• renderNotch: (value: number) => ReactNode - Function to render a notch that follows the thumb.

Behavior & State Props

• disableRange: boolean (optional) - If true, the slider behaves like a single thumb slider (only the low value is controlled).
• disabled: boolean (optional) - Disables user interaction.
• floatingLabel: boolean (optional, default: false) - Enables floating label behavior.
• allowLabelOverflow: boolean (optional, default: false) - Allows labels to overflow the container bounds.

Event Callbacks

• onValueChanged: (low: number, high: number, byUser: boolean) => void - Called when the value changes.
• onSliderTouchStart: (low: number, high: number) => void - Called when the user starts touching the slider.
• onSliderTouchEnd: (low: number, high: number) => void - Called when the user stops touching the slider.