Create smooth, interactive controls with the gluestack-ui React Native Slider component. Customize track height, values, and states for a seamless slider UI experience. This is an illustration of Slider component.

size

orientation

isDisabled

isReversed

Installation

Run the following command:

npx gluestack-ui add slider

API Reference

To use this component in your project, include the following import statement in your file.

import { Slider } from '@/components/ui/slider';

export default () => (
  <Slider>
    <SliderTrack>
      <SliderFilledTrack />
    </SliderTrack>
    <SliderThumb />
  </Slider>
);

Component Props

This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration.

Slider

It inherits all the properties of React Native's View component.

Prop	Type	Default	Description
onChange	(value: number) => void	-	Function called when the state of the Slider changes.
isDisabled	bool	false	When true, this will disable Slider
isReadOnly	boolean	false	To manually set read-only to the checkbox.
sliderTrackHeight	number	8	To change the slider track height.
defaultValue	number	-	To change the slider value.
minValue	number	-	The slider's minimum value
maxValue	number	-	The slider's maximum value.
value	number	-	The slider's current value.
step	number	-	The slider's step value.

Descendants Styling Props Props to style child components.

Sx Prop	Description
_thumb	Prop to style SliderThumb Component
_track	Prop to style SliderTrack Component
_filledTrack	Prop to style SliderFilledTrack Component

SliderTrack

It inherits all the properties of React Native's Pressable component.

SliderFilledTrack

It inherits all the properties of React Native's View component.

SliderThumb

It inherits all the properties of React Native's View component.

Features

Keyboard support for actions.
Support for hover, focus and active states.

Accessibility

We have outlined the various features that ensure the Slider component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.Adheres to the WAI-ARIA design pattern.