Components · Interactive

Slider

StableSince v0.0.1

Range slider built on Radix UI Slider.

import { Slider } from '@nexub/react';

Examples

Props
Prop	Type	Default	Description
value	number[]	—	The controlled value of the slider.
defaultValue	number[]	—	The initial value when uncontrolled.
min	number	—	The minimum value of the slider.
max	number	—	The maximum value of the slider.
step	number	—	The step increment between values.
disabled	boolean	—	Disables slider interaction when true.
onValueChange	(value: number[]) => void	—	Callback fired when the value changes.

@nexub/react-nativeAlpha

import { Slider } from '@nexub/react-native';

<Slider label="Volume" defaultValue={40} formatValue={(v) => `${v}%`} />

Same tokens and prop names. Where the platforms differ:

Slider: web vs mobile
	Web	iOS & Android
Label	Compose Label + control + HelperText (or FormField).	One component: `label`, `helperText` and `error` are props.

Interactive preview of @nexub/react-native rendered for the web. Native chrome (switches, pickers, Liquid Glass) looks like the platform on a device.

Slider props (React Native)
Prop	Type	Default	Description
labelrequired	string	—	—
value	number	—	—
defaultValue	number	—	—
onValueChange	(value: number) => void	—	—
min	number	—	—
max	number	—	—
step	number	1	—
disabled	boolean	—	—
formatValue	(value: number) => string	—	Announced value text, e.g. (v) => `${v}%`.
style	StyleProp<ViewStyle>	—	—