Slider

Easily select values within a range by sliding a visual indicator along a track.

Installation

API Reference

This is an illustration of Slider component.

size

orientation

isDisabled

isReversed

<Center className="w-[300px] h-[150px]">
  <Slider
    defaultValue={30}
    size="md"
    orientation="horizontal"
    isDisabled={false}
    isReversed={false}
  >
    <SliderTrack>
      <SliderFilledTrack />
    </SliderTrack>
    <SliderThumb />
  </Slider>
</Center>

Installation

CLI

Manual

Run the following command:

npx gluestack-ui add slider

Step 1: Install the following dependencies:

npm i @gluestack-ui/slider

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

"use client"
import { createSlider } from "@gluestack-ui/slider"
import { Pressable } from "react-native"
import { View } from "react-native"
import React from "react"
import { tva } from "@gluestack-ui/nativewind-utils/tva"
import {
  withStyleContext,
  useStyleContext,
} from "@gluestack-ui/nativewind-utils/withStyleContext"
import type { VariantProps } from "@gluestack-ui/nativewind-utils"
import { cssInterop } from "nativewind"

const SCOPE = "SLIDER"
const Root = withStyleContext(View, SCOPE)
export const UISlider = createSlider({
  Root: Root,
  Thumb: View,
  Track: Pressable,
  FilledTrack: View,
  ThumbInteraction: View,
})

cssInterop(UISlider.Track, { className: "style" })

const sliderStyle = tva({
  base: "justify-center items-center data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-none",
  variants: {
    orientation: {
      horizontal: "w-full",
      vertical: "h-full",
    },
    size: {
      sm: "",
      md: "",
      lg: "",
    },
    isReversed: {
      true: "",
      false: "",
    },
  },
})

const sliderThumbStyle = tva({
  base: "bg-primary-500 absolute rounded-full data-[focus=true]:bg-primary-600 data-[active=true]:bg-primary-600 data-[hover=true]:bg-primary-600 data-[disabled=true]:bg-primary-500 web:cursor-pointer web:data-[active=true]:outline web:data-[active=true]:outline-4 web:data-[active=true]:outline-primary-400 shadow-hard-1",

  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",
  parentVariants: {
    orientation: {
      horizontal: "w-full",
      vertical: "h-full",
    },
    isReversed: {
      true: "",
      false: "",
    },
    size: {
      sm: "",
      md: "",
      lg: "",
    },
  },
  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-1 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 data-[focus=true]:bg-primary-600 data-[active=true]:bg-primary-600 data-[hover=true]:bg-primary-600",
  parentVariants: {
    orientation: {
      horizontal: "h-full",
      vertical: "w-full",
    },
  },
})

type ISliderProps = React.ComponentProps<typeof UISlider> &
  VariantProps<typeof sliderStyle>

const Slider = React.forwardRef<
  React.ElementRef<typeof UISlider>,
  ISliderProps
>(
  (
    {
      className,
      size = "md",
      orientation = "horizontal",
      isReversed = false,
      ...props
    },
    ref
  ) => {
    return (
      <UISlider
        ref={ref}
        isReversed={isReversed}
        orientation={orientation}
        {...props}
        className={sliderStyle({
          orientation,
          isReversed,
          class: className,
        })}
        context={{ size, orientation, isReversed }}
      />
    )
  }
)

type ISliderThumbProps = React.ComponentProps<typeof UISlider.Thumb> &
  VariantProps<typeof sliderThumbStyle>

const SliderThumb = React.forwardRef<
  React.ElementRef<typeof UISlider.Thumb>,
  ISliderThumbProps
>(({ className, size, ...props }, ref) => {
  const { size: parentSize } = useStyleContext(SCOPE)

  return (
    <UISlider.Thumb
      ref={ref}
      {...props}
      className={sliderThumbStyle({
        parentVariants: {
          size: parentSize,
        },
        size,
        class: className,
      })}
    />
  )
})

type ISliderTrackProps = React.ComponentProps<typeof UISlider.Track> &
  VariantProps<typeof sliderTrackStyle>

const SliderTrack = React.forwardRef<
  React.ElementRef<typeof UISlider.Track>,
  ISliderTrackProps
>(({ className, ...props }, ref) => {
  const {
    orientation: parentOrientation,
    size: parentSize,
    isReversed,
  } = useStyleContext(SCOPE)

  return (
    <UISlider.Track
      ref={ref}
      {...props}
      className={sliderTrackStyle({
        parentVariants: {
          orientation: parentOrientation,
          size: parentSize,
          isReversed,
        },
        class: className,
      })}
    />
  )
})

type ISliderFilledTrackProps = React.ComponentProps<
  typeof UISlider.FilledTrack
> &
  VariantProps<typeof sliderFilledTrackStyle>

const SliderFilledTrack = React.forwardRef<
  React.ElementRef<typeof UISlider.FilledTrack>,
  ISliderFilledTrackProps
>(({ className, ...props }, ref) => {
  const { orientation: parentOrientation } = useStyleContext(SCOPE)

  return (
    <UISlider.FilledTrack
      ref={ref}
      {...props}
      className={sliderFilledTrackStyle({
        parentVariants: {
          orientation: parentOrientation,
        },
        class: className,
      })}
    />
  )
})

export { Slider, SliderThumb, SliderTrack, SliderFilledTrack }

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.

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.

Data Attributes Table

Component receives states as props as boolean values, which are applied as data-* attributes. These attributes are then used to style the component via classNames, enabling state-based styling.

State	Data Attribute	Values
disabled	data-disabled	true \| false
focus	data-focus	true \| false
invalid	data-invalid	true \| false

Slider

Installation

Run the following command:

Step 1: Install the following dependencies:

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

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

API Reference

Component Props

Slider

SliderTrack

SliderFilledTrack

SliderThumb

Features

Accessibility

Keyboard

Screen Reader

Props

Data Attributes Table