LogoCraftReactNative
Components

SliderDual

A slider component that allows users to select a range of values. It displays a horizontal bar with 2 sliding knobs that can be dragged to set the range.

Component preview

Usage

Screen.tsx
import { SliderDual } from "@/craftrn-ui/components/SliderDual";
 
export const Screen = () => (
  <SliderDual
    min={0}
    max={100}
    onValuesChange={({ min, max }) => {
      console.log("min value:", min);
      console.log("max value:", max);
    }}
  />
);

Props

PropTypeDefault
min
number
0
max
number
100
minInitialValue?
number
min
maxInitialValue?
number
max
width?
number
300
onValuesChange
({ min, max }: { min: number; max: number; }) => void
-

Slider

A slider component that allows users to select a value from a range. It displays a horizontal bar with a sliding knob that can be dragged to set the value.

Switch

A switch component that allows users to toggle between two states. It displays as a button that can be toggled on or off, commonly used for enabling or disabling features. Based on the React Native Switch component.

On this page