@teste-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

1yarn add @teste-ui/slider
2
3# or
4
5npm i @teste-ui/slider

Import components

1import {

2  Slider,

3  SliderTrack,

4  SliderFilledTrack,

5  SliderThumb,
6} from "@teste-ui/react"

Usage

1<Slider defaultValue={30}>
2  <SliderTrack>
3    <SliderFilledTrack />
4  </SliderTrack>
5  <SliderThumb />
6</Slider>

Changing the slider color

1<Slider colorScheme="pink" defaultValue={30}>
2  <SliderTrack>
3    <SliderFilledTrack />
4  </SliderTrack>
5  <SliderThumb />
6</Slider>

Customized Sliders

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

1<Slider defaultValue={30}>
2  <SliderTrack bg="red.100">
3    <SliderFilledTrack bg="tomato" />
4  </SliderTrack>
5  <SliderThumb size={6}>
6    <Box color="tomato" as={MdGraphicEq} />
7  </SliderThumb>
8</Slider>