REACT-NATIVES

WIRED FOR SPEED

react-natives v2.1.2

Theme

Light

Dark

Get Started

Components

Form Controls

Slider

A compound range slider component with track, filled track, and thumb sub-components for selecting numeric values.

Example

Preview

Code

Props

Slider Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the slider container.

value

number

—

The controlled current value of the slider.

defaultValue

number

—

The initial value when uncontrolled.

min

number

0

The minimum value of the slider.

max

number

100

The maximum value of the slider.

step

number

1

The step increment between values.

orientation

'horizontal' | 'vertical'

'horizontal'

The axis along which the slider operates.

size

'sm' | 'md' | 'lg'

'md'

Controls the track thickness and thumb size.

isDisabled

boolean

false

Disables the slider.

onValueChange

(value: number) => void

—

Callback invoked continuously as the slider value changes.

onSlidingComplete

(value: number) => void

—

Callback invoked when the user releases the slider thumb.

SliderTrack Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the slider track.

SliderFilledTrack Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the filled portion of the track.

SliderThumb Props

Prop

Type

Default

Description

className

string

—

NativeWind utility classes for the draggable thumb.

Usage Guidelines

When to use

Use Slider when users need to select a value from a continuous or stepped numeric range.

Best practices

•

Display the current value next to the slider for clarity.

•

Use step values appropriate to the data range.

•

Consider adding min/max labels for context.

Accessibility

Slider is accessible with keyboard and assistive technology. The current value is announced on change.

Related Components

Progress

A compound progress bar component that visually indicates the completion percentage of an operation.

Input

A compound text input component with support for leading/trailing slots, icons, and multiple visual variants.

FormControl

A compound wrapper that provides shared state (disabled, invalid, required, read-only) to its label, helper text, and error message children.

React-Natives

A comprehensive React Native component library.

Documentation

Getting Started

Components

Theming

Community

GitHub

Discord

Twitter

Blog

Support

FAQ

Contact

Contributing

License