Slider

The Slider component enables an intuitive selection of values within a designated range. Users can easily adjust their selection by sliding a visual indicator along the track.
Installation
API Reference
Spec Doc
This is an illustration of Slider component.
size
orientation
isDisabled
isReversed
<Center className="w-[300px] h-[100px]">
<Slider
defaultValue={30}
size="md"
orientation="horizontal"
isDisabled={false}
isReversed={false}
>
<SliderTrack>
<SliderFilledTrack />
</SliderTrack>
<SliderThumb />
</Slider>
</Center>

Installation

Step 1: Install the following dependencies:

npm i @gluestack-ui/slider

Step 2: Copy and paste the following code into your project.

import { createSlider } from "@gluestack-ui/slider"
import { Pressable } from "react-native"
import { View, Platform } from "react-native"
import React from "react"
import {
tva,
withStyleContext,
withStyleContextAndStates,
useStyleContext,
withStates,
} from "@gluestack-ui/nativewind-utils"
import { cssInterop } from "nativewind"
export const UISlider = createSlider({
// @ts-ignore
Root:
Platform.OS === "web"
? withStyleContext(View)
: withStyleContextAndStates(View),
Thumb: Platform.OS === "web" ? View : withStates(View),
Track: Pressable,
FilledTrack: Platform.OS === "web" ? View : withStates(View),
ThumbInteraction: View,
})
//@ts-ignore
cssInterop(UISlider, { className: "style" })
cssInterop(UISlider.Thumb, { className: "style" })
cssInterop(UISlider.Track, { className: "style" })
cssInterop(UISlider.FilledTrack, { className: "style" })
const sliderStyle = tva({
base: "justify-center items-center data-[disabled=true]:web:cursor-not-allowed data-[disabled=true]:web:opacity-40 data-[disabled=true]:web:pointer-events-auto",
variants: {
orientation: {
horizontal: "w-full",
vertical: "h-full",
},
isReversed: {
true: "",
false: "",
},
},
})
const sliderThumbStyle = tva({
base: "bg-primary-500 absolute rounded-full focus:bg-primary-600 active:bg-primary-600 hover:bg-primary-600 data-[disabled=true]:bg-primary-500 web:cursor-pointer web:active:outline-4 web:active:outline web:active:outline-primary-400 web:focus:outline-4 web:focus:outline web:focus:outline-primary-400 shadow",
parentVariants: {
size: {
sm: "h-4 w-4",
md: "h-5 w-5",
lg: "h-6 w-6",
},
},
})
const sliderTrackStyle = tva({
base: "bg-background-300 rounded-lg overflow-hidden",
variants: {
variant: {
horizontal: "w-full",
vertical: "h-full",
},
},
parentVariants: {
orientation: {
horizontal: "w-full",
vertical: "h-full",
},
},
parentCompoundVariants: [
{
orientation: "horizontal",
size: "sm",
class: "h-1 flex-row",
},
{
orientation: "horizontal",
size: "sm",
isReversed: true,
class: "h-1 flex-row-reverse",
},
{
orientation: "horizontal",
size: "md",
class: "h-[5px] flex-row",
},
{
orientation: "horizontal",
size: "md",
isReversed: true,
class: "h-[5px] flex-row-reverse",
},
{
orientation: "horizontal",
size: "lg",
class: "h-1.5 flex-row",
},
{
orientation: "horizontal",
size: "lg",
isReversed: true,
class: "h-1.5 flex-row-reverse",
},
{
orientation: "vertical",
size: "sm",
class: "w-1 flex-col-reverse",
},
{
orientation: "vertical",
size: "sm",
isReversed: true,
class: "w-1 flex-col",
},
{
orientation: "vertical",
size: "md",
class: "w-[5px] flex-col-reverse",
},
{
orientation: "vertical",
size: "md",
isReversed: true,
class: "w-[5px] flex-col",
},
{
orientation: "vertical",
size: "lg",
class: "w-1.5 flex-col-reverse",
},
{
orientation: "vertical",
size: "lg",
isReversed: true,
class: "w-1.5 flex-col",
},
],
})
const sliderFilledTrackStyle = tva({
base: "bg-primary-500 focus:bg-primary-600 active:bg-primary-600 hover:bg-primary-600",
parentVariants: {
orientation: {
horizontal: "h-full",
vertical: "w-full",
},
},
})
// const sliderThumbInteractionStyle = tva({
// base: 'rounded-full -z-10',
// });
export const Slider = React.forwardRef(
(
{
className,
size = "md",
orientation = "horizontal",
isReversed = false,
...props
}: any,
ref
) => {
return (
<UISlider
ref={ref}
className={sliderStyle({
size,
orientation,
isReversed,
class: className,
})}
context={{ size, orientation, isReversed }}
/>
)
}
)
export const SliderThumb = React.forwardRef(
({ className, size, ...props }: any, ref) => {
const {
orientation: parentOrientation,
size: parentSize,
isReversed,
} = useStyleContext()
return (
<UISlider.Thumb
ref={ref}
{...props}
className={sliderThumbStyle({
parentVariants: {
orientation: parentOrientation,
size: parentSize,
isReversed,
},
size,
class: className,
})}
/>
)
}
)
export const SliderTrack = React.forwardRef(
({ className, ...props }: any, ref) => {
const {
orientation: parentOrientation,
size: parentSize,
isReversed,
} = useStyleContext()
return (
<UISlider.Track
ref={ref}
{...props}
className={sliderTrackStyle({
parentVariants: {
orientation: parentOrientation,
size: parentSize,
isReversed,
},
class: className,
})}
/>
)
}
)
export const SliderFilledTrack = React.forwardRef(
({ className, ...props }: any, ref) => {
const {
orientation: parentOrientation,
size: parentSize,
isReversed,
} = useStyleContext()
return (
<UISlider.FilledTrack
ref={ref}
{...props}
className={sliderFilledTrackStyle({
parentVariants: {
orientation: parentOrientation,
size: parentSize,
isReversed,
},
class: className,
})}
/>
)
}
)

Step 3: Update the import paths to match your project setup.

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.

Keyboard

  • Tab: Moves focus to the next focusable element.
  • Right Arrow: Increase the value of the slider by one step.
  • Up Arrow: Increase the value of the slider by one step.
  • Left Arrow: Decrease the value of the slider by one step.
  • Down Arrow: Decrease the value of the slider by one step.

Screen Reader

  • VoiceOver: When the slider is focused, the screen reader will announce the slider's value.

Props

Slider component is created using View component from react-native. It extends all the props supported by React Native View.
Edit this page on GitHub