• Vant React

Slider 滑块

介绍

滑动输入条，用于在给定的范围内选择一个值。

引入

import { Slider } from "@taroify/core"

代码演示

基础用法

<Slider defaultValue={50} />

双滑块

添加 range 属性就可以开启双滑块模式，确保 value 的值是一个数组。

<Slider range defaultValue={[20, 60]} />

指定选择范围

<Slider min={-50} max={50} defaultValue={0} />

禁用

<Slider disabled defaultValue={50} />

指定步长

<Slider step={10} defaultValue={50} />

自定义样式

<Slider className="custom-color" size={4} defaultValue={50} />
.custom-color {
  --slider-active-background-color: #ee0a24;
}

自定义按钮

function StyledThumbSlider() {
  const [value, setValue] = useState(50)
  return (
    <Slider className="custom-color" value={value} onChange={setValue}>
      <Slider.Thumb>
        <View className="custom-thumb">{value}</View>
      </Slider.Thumb>
    </Slider>
  )
}
.custom-color {
  --slider-active-background-color: #ee0a24;
}

.custom-thumb {
  width: 26px * 2;
  color: #fff;
  font-size: 10px * 2;
  line-height: 18px * 2;
  text-align: center;
  background-color: var(--slider-active-background-color);
  border-radius: 100px * 2;
}

垂直方向

设置 orientation="vertical" 属性后，滑块会垂直展示，且高度为 100% 父元素高度。

<Slider orientation="vertical" defaultValue={50} />
<Slider
  style={{ marginLeft: "100px" }}
  range
  orientation="vertical"
  defaultValue={[20, 60]}
/>

API

Slider Props

参数 说明 类型 默认值
defaultValue 当前进度百分比，在双滑块模式下为数组格式 number | [number, number] 0
value 当前进度百分比，在双滑块模式下为数组格式 number | [number, number] 0
max 最大值 number | string 100
min 最小值 number | string 0
step 步长 number | string 1
size 进度条高度，默认单位为 px number | string 2px
range 是否开启双滑块模式 boolean false
disabled 是否禁用滑块 boolean false
readonly 是否为只读状态，只读状态下无法修改滑块的值 boolean false
orientation 滑块按钮展示方向，vertical 为垂直展示 SliderOrientation horizontal

Slider.Thumb Props

参数 说明 类型 默认值
size 滑块按钮大小，默认单位为 px number | string 24px

Slider Events

事件名 说明 回调参数
onChange 进度变化且结束拖动后触发 value: number

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称 默认值 描述
—slider-border-radius var(—border-radius-max) -
—slider-active-background-color var(—blue) -
—slider-inactive-background-color var(—gray-3) -
—slider-disabled-opacity var(—disabled-opacity) -
—slider-track-height 2px * $hd -
—slider-track-transition-duration var(—animation-duration-fast) -
—slider-thumb-width 24px * $hd -
—slider-thumb-height 24px * $hd -
—slider-thumb-border-radius 50% -
—slider-thumb-background-color var(—white) -
—slider-thumb-box-shadow 0 1px * $hd 2px * $hd rgba(0, 0, 0, 0.5) -