@chakra-ui/slider

@chakra-ui/slider

The Slider is used to allow users to make selections from a range of values.

Sliders reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters.

Installation

yarn add @chakra-ui/slider

# or

npm i @chakra-ui/slider

Import components

import {
  Slider,
  SliderTrack,
  SliderFilledTrack,
  SliderThumb,
} from "@chakra-ui/react"

Usage

<Slider defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

Changing the slider color

<Slider colorScheme="pink" defaultValue={30}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>

Customized Sliders

Slider component was designed to be composed to make it easy for you to customize its styles.

<Slider defaultValue={30}>
  <SliderTrack bg="red.100">
    <SliderFilledTrack bg="tomato" />
  </SliderTrack>
  <SliderThumb size={6}>
    <Box color="tomato" as={MdGraphicEq} />
  </SliderThumb>
</Slider>

Similar packages

Other packages similar to @chakra-ui/slider

rc-slider

rc-slider is a React component for creating sliders. It is highly customizable and provides a range of features similar to @chakra-ui/slider, such as vertical orientation, tooltips, and custom styling. However, rc-slider does not come with built-in accessibility features like Chakra UI components.

react-slider

react-slider is a small, fast, and customizable slider component for React. It supports horizontal and vertical orientations, custom styling, and range sliders. While it offers similar functionality to @chakra-ui/slider, it may require additional work to ensure accessibility.

material-ui-slider

material-ui-slider is part of the Material-UI library, which provides a set of React components that implement Google's Material Design. The slider component in Material-UI offers similar features to @chakra-ui/slider, including customization and accessibility, but follows Material Design guidelines.