67 lines
1.1 KiB
Markdown
67 lines
1.1 KiB
Markdown
# @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
|
|
|
|
```sh
|
|
yarn add @chakra-ui/slider
|
|
|
|
# or
|
|
|
|
npm i @chakra-ui/slider
|
|
```
|
|
|
|
## Import components
|
|
|
|
```js
|
|
import {
|
|
Slider,
|
|
SliderTrack,
|
|
SliderFilledTrack,
|
|
SliderThumb,
|
|
} from "@chakra-ui/react"
|
|
```
|
|
|
|
## Usage
|
|
|
|
```jsx
|
|
<Slider defaultValue={30}>
|
|
<SliderTrack>
|
|
<SliderFilledTrack />
|
|
</SliderTrack>
|
|
<SliderThumb />
|
|
</Slider>
|
|
```
|
|
|
|
### Changing the slider color
|
|
|
|
```jsx
|
|
<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.
|
|
|
|
```jsx
|
|
<Slider defaultValue={30}>
|
|
<SliderTrack bg="red.100">
|
|
<SliderFilledTrack bg="tomato" />
|
|
</SliderTrack>
|
|
<SliderThumb size={6}>
|
|
<Box color="tomato" as={MdGraphicEq} />
|
|
</SliderThumb>
|
|
</Slider>
|
|
```
|