LogoCraftReactNative
Components

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.

Component preview

Usage

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

Props

PropTypeDefault
min
number
0
max
number
100
initialValue?
number
min
width?
number
300
onValueChange
(value: number) => void
-

Radio

A radio button component that allows users to select a single option from a set of choices. It displays as a circular button that can be either checked or unchecked.

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.

On this page