2.1.0 • Published 8 months ago

@chakra-ui/slider v2.1.0

Weekly downloads
61,172
License
MIT
Repository
github
Last release
8 months ago

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

8 months ago

2.0.24

11 months ago

2.0.25

10 months ago

2.0.22

1 year ago

2.0.23

1 year ago

2.0.21

1 year ago

2.0.19

1 year ago

2.0.18

1 year ago

2.0.20

1 year ago

2.0.15

1 year ago

2.0.16

1 year ago

2.0.13

1 year ago

2.0.14

1 year ago

2.0.17

1 year ago

2.0.12

1 year ago

2.0.11

2 years ago

2.0.10

2 years ago

2.0.9

2 years ago

2.0.3

2 years ago

2.0.2

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.0.7

2 years ago

2.0.6

2 years ago

2.0.8

2 years ago

2.0.1

2 years ago

2.0.0-next.2

2 years ago

2.0.0-next.3

2 years ago

2.0.0

2 years ago

2.0.0-next.0

2 years ago

2.0.0-next.1

2 years ago

1.5.10

2 years ago

1.5.11

2 years ago

1.5.9

2 years ago

1.5.5

2 years ago

1.5.4

2 years ago

1.5.3

2 years ago

1.5.8

2 years ago

1.5.7

2 years ago

1.5.6

2 years ago

1.5.2

2 years ago

1.5.1

2 years ago

1.5.0

2 years ago

1.4.2

2 years ago

1.4.1

2 years ago

1.4.0

2 years ago

1.3.0

3 years ago

1.2.9

3 years ago

1.2.8

3 years ago

1.2.8-next.0

3 years ago

1.2.7

3 years ago

1.2.6

3 years ago

1.2.5

3 years ago

1.2.4

3 years ago

1.2.3

3 years ago

1.2.2

3 years ago

1.2.1

3 years ago

1.2.0

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

1.0.0-rc.8

3 years ago

1.0.0-rc.7

3 years ago

1.0.0-rc.6

3 years ago

1.0.0-rc.5

4 years ago

1.0.0-rc.4

4 years ago

1.0.0-rc.3

4 years ago

1.0.0-rc.2

4 years ago

1.0.0-rc.1

4 years ago

1.0.0-rc.0

4 years ago

1.0.0-next.7

4 years ago

1.0.0-next.5

4 years ago

1.0.0-next.6

4 years ago

1.0.0-next.4

4 years ago

1.0.0-next.3

4 years ago

1.0.0-next.2

4 years ago

1.0.0-next.1

4 years ago

1.0.0-next.0

4 years ago