Looking for documentation on gluestack-ui v2 with NativeWind? Refer to this link.
This is an illustration of a Themed Slider component with default configuration.
size
orientation
isDisabled
isReversed
<Center w={300} h={100}>
  <Slider
    defaultValue={30}
    size="md"
    orientation="horizontal"
    isDisabled={false}
    isReversed={false}
  >
    <SliderTrack>
      <SliderFilledTrack />
    </SliderTrack>
    <SliderThumb />
  </Slider>
</Center>

API Reference

Import

To use this component in your project, include the following import statement in your file.
import { Slider } from '@gluestack-ui/themed';

Anatomy

The structure provided below can help you identify and understand a Slider component's various parts.
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.

Themed

The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project. To know more about Themed Library please visit this link.

Props

Slider component is created using View component from react-native. It extends all the props supported by React Native View, utility props and the props mentioned below.

Slider

Name
Value
Default
orientation
horizontal | vertical
horizontal
isReversed
true | false
false
size
sm | md | lg
md
Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available.

Examples

The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.

Slider with Orientation

An example of the Slider component being used with the Slider with Orientation feature to customize the orientation of the slider, providing flexibility in the direction of sliding and input for numerical or adjustable values within a user interface.
function App() {
  const [sliderValue, setSliderValue] = React.useState(45)
  const handleChange = (value) => {
    setSliderValue(value)
  }
  return (
    <Center w="$80">
      <Slider
        sliderTrackHeight={4}
        value={sliderValue}
        orientation="vertical"
        h={120}
        onChange={(value) => {
          handleChange(value)
        }}
      >
        <SliderTrack>
          <SliderFilledTrack />
        </SliderTrack>
        <SliderThumb />
      </Slider>
    </Center>
  )
}

Color scheme

A Slider component with a color scheme adds visual styling and customization options, allowing the slider track and handle to be displayed in different colors, enhancing the aesthetic appeal and visual coherence of the slider within a user interface.
function App() {
  return (
    <VStack space="4xl">
      <Center w="$80">
        <Slider defaultValue={45} sliderTrackHeight={4}>
          <SliderTrack>
            <SliderFilledTrack bg="$emerald600" />
          </SliderTrack>
          <SliderThumb bg="$emerald600" $active-outlineColor="$emerald500" />
        </Slider>
      </Center>
      <Center w="$80">
        <Slider defaultValue={45} sliderTrackHeight={4}>
          <SliderTrack>
            <SliderFilledTrack bg="$amber600" />
          </SliderTrack>
          <SliderThumb bg="$amber600" $active-outlineColor="$amber500" />
        </Slider>
      </Center>
      <Center w="$80">
        <Slider defaultValue={45} sliderTrackHeight={4}>
          <SliderTrack>
            <SliderFilledTrack bg="$fuchsia600" />
          </SliderTrack>
          <SliderThumb bg="$fuchsia600" $active-outlineColor="$fuchsia500" />
        </Slider>
      </Center>
      <Center w="$80">
        <Slider defaultValue={45} sliderTrackHeight={4}>
          <SliderTrack>
            <SliderFilledTrack bg="$cyan600" />
          </SliderTrack>
          <SliderThumb bg="$cyan600" $active-outlineColor="$cyan500" />
        </Slider>
      </Center>
    </VStack>
  )
}

With tooltip

A Slider component with a tooltip displays a visual indicator or text overlay that provides real-time feedback on the selected value as users interact with the slider, improving usability and precision in inputting or adjusting numeric or continuous data within a user interface.
function App() {
  const [sliderValue, setSliderValue] = React.useState(40)
  const handleChange = (value) => {
    setSliderValue(value)
  }
  return (
    <HStack space="lg">
      <Text size="md">$0</Text>
      <Tooltip
        placement={"top"}
        trigger={(triggerProps) => {
          return (
            <Center w="$80">
              <Slider
                step={5}
                sliderTrackHeight={4}
                value={sliderValue}
                maxValue={60}
                minValue={0}
                onChange={(v) => {
                  handleChange(Math.floor(v))
                }}
              >
                <SliderTrack>
                  <SliderFilledTrack />
                </SliderTrack>
                <SliderThumb {...triggerProps} />
              </Slider>
            </Center>
          )
        }}
      >
        <TooltipContent>
          <Text color="white">{"$" + sliderValue}</Text>
        </TooltipContent>
      </Tooltip>
      <Text size="md">$60</Text>
    </HStack>
  )
}

Form Controlled

A Slider component with form-controlled behavior allows for seamless integration with a form's state management, enabling the slider value to be controlled and updated through a parent component's form state, providing a consistent and synchronized user experience for capturing and manipulating numeric or continuous data within a form.
function App() {
  const [sliderValue, setSliderValue] = React.useState(50)
  const handleChange = (value) => {
    setSliderValue(value)
  }
  return (
    <VStack space="lg">
      <Heading size="sm">Select the quantity</Heading>
      <Center w="$72">
        <Slider
          sliderTrackHeight={5}
          size="md"
          value={sliderValue}
          onChange={(value) => {
            handleChange(value)
          }}
        >
          <SliderTrack>
            <SliderFilledTrack />
          </SliderTrack>
          <SliderThumb />
        </Slider>
      </Center>
      <Text size="sm">Slide the knob to select the number of products</Text>
    </VStack>
  )
}

Custom

A custom Slider component with an icon incorporates a personalized design by combining a graphical symbol or icon with the slider interface, adding a unique visual element and enhancing the user experience when interacting with numeric or continuous data input in a user interface.
function App() {
  const [sliderValue, setSliderValue] = React.useState(55)
  const handleChange = (value) => {
    setSliderValue(value)
  }
  return (
    <VStack space="lg">
      <Text size="lg">Brightness</Text>
      <Center w="$72">
        <Slider
          sliderTrackHeight={6}
          size="lg"
          value={sliderValue}
          onChange={(value) => {
            handleChange(value)
          }}
        >
          <SliderTrack>
            <SliderFilledTrack bg="$amber600" />
          </SliderTrack>
          <SliderThumb bg="$amber600" p="$1" $active-outlineColor="$amber500">
            <Icon as={LightbulbIcon} color="white" size="sm" />
          </SliderThumb>
        </Slider>
      </Center>
    </VStack>
  )
}

Volume

A Slider component used as a volume control allows users to adjust the audio volume by sliding the handle along the track, providing an intuitive and interactive way to control the sound output within a user interface.
function App() {
  const [sliderValue, setSliderValue] = React.useState(40)
  const [onChangeEndValue, setOnChangeEndValue] = React.useState(40)
  const handleChange = (value) => {
    setSliderValue(value)
  }
  return (
    <VStack space="2xl">
      <Box>
        <Text textAlign="center">current sliderValue - {sliderValue}</Text>
        <Text textAlign="center">onChangeEndValue - {onChangeEndValue}</Text>
      </Box>
      <HStack space="lg">
        <Volume />
        <Center w="$80">
          <Slider
            sliderTrackHeight={4}
            value={sliderValue}
            onChange={(v) => {
              handleChange(Math.floor(v))
            }}
            onChangeEnd={(v) => {
              v && setOnChangeEndValue(Math.floor(v))
            }}
          >
            <SliderTrack>
              <SliderFilledTrack />
            </SliderTrack>
            <SliderThumb />
          </Slider>
        </Center>
        <Volume2Icon />
      </HStack>
    </VStack>
  )
}

Unstyled

All the components in gluestack-ui are unstyled by default. To customize your UI using the extendedTheme, please refer to this link. The import names of components serve as keys to customize each component.

Spec Doc

Explore the comprehensive details of the Slider in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey.