@ chakra-ui/ 滑坡器

滑块用于允许用户从一系列数值中选择.

滑动器沿条反映一系列值,用户可从其中选择一个 单值。 它们最适合调整设置,如体积,亮度, 或应用图像过滤器.

安装

yarn add @chakra-ui/slider

# or

npm i @chakra-ui/slider

导入组件

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

使用量

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

更改滑动器颜色

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

自定义幻灯片

滑动器组件的设计是为了方便您 定制其样式.

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