RangeSlider

RangeSlider provides a dual-thumb slider for selecting a value range. Built with React Native Gesture Handler and Reanimated for direct 1:1 gesture tracking.

Usage

RangeSliderExample.tsx

import { useState } from 'react';
import { RangeSlider } from '@masumdev/rn-ui';

export function RangeSliderExample() {
  const [range, setRange] = useState<[number, number]>([200, 800]);

  return (
    <RangeSlider
      min={0}
      max={1000}
      step={50}
      value={range}
      onValueChange={setRange}
      tone="primary"
    />
  );
}

Props API

Prop	Type	Default	Description
min	number	0	Minimum bounds.
max	number	100	Maximum bounds.
step	number	1	Step increment for snapping.
value	[number, number]	—	Controlled range value [low, high].
defaultValue	[number, number]	—	Initial uncontrolled range.
onValueChange	(values: [number, number]) => void	—	Callback during drag.
tone	ComponentTone	"primary"	Color tone for track and thumbs.
disabled	boolean	false	Disable interaction.
hapticFeedback	boolean	true	Enable haptic feedback on step snap.
trackHeight	number	6	Track height in pixels.
thumbSize	number	24	Thumb diameter in pixels.