Slider 滑块

介绍

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

代码演示

基础用法

<z-slider v-model="value" @change="onChange" />
import { ref } from 'vue'
import { useToast } from '../../uni_modules/zebra-ui'
const toast = useToast()
const value = ref(50)
const onChange = (value: string) => toast.showToast('当前值:' + value)

双滑块

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

<z-slider v-model="value" range @change="onChange" />
const value = ref([10, 50]);

指定选择范围

<z-slider v-model="value" :min="-50" :max="50" />

禁用

<z-slider v-model="value" disabled />

指定步长

<z-slider v-model="value" :step="10" />

自定义样式

<z-slider v-model="value" bar-height="8rpx" active-color="#ee0a24" />

自定义按钮

<z-slider v-model="value">
  <template #button>
    <view class="custom-button">{{ value }}</view>
  </template>
</z-slider>

<style>
  .custom-button {
    width: 52rpx;
    font-size: 20rpx;
    line-height: 36rpx;
    color: #fff;
    text-align: center;
    background-color: var(--z-primary-color);
    border-radius: 200rpx;
  }
</style>

垂直方向

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

<view class="demo-slider-item">
  <view :style="{ height: '300rpx' }">
    <z-slider v-model="value1" vertical @change="onChange" />
    <z-slider
      v-model="value2"
      range
      vertical
      :custom-style="{ 'margin-left': '200rpx' }"
      @change="onChange"
    />
  </view>
</view>

API

Props

参数说明类型默认值
v-model当前进度百分比,在双滑块模式下为数组格式number | number, number0
max最大值number | string100
min最小值number | string0
step步长number | string1
bar-height进度条高度,默认单位为 pxnumber | string2px
button-size滑块按钮大小,默认单位为 pxnumber | string24px
active-color进度条激活态颜色string#1989fa
inactive-color进度条非激活态颜色string#e5e5e5
range是否开启双滑块模式booleanfalse
reverse是否将进度条反转booleanfalse
disabled是否禁用滑块booleanfalse
readonly是否为只读状态,只读状态下无法修改滑块的值booleanfalse
vertical是否垂直展示booleanfalse

Events

事件名说明回调参数
update:model-value进度变化时实时触发value: number
change进度变化且结束拖动后触发value: number
drag-start开始拖动时触发event: TouchEvent
drag-end结束拖动时触发event: TouchEvent

Slots

名称说明参数
button自定义滑块按钮{ value: number, dragging: boolean }
left-button自定义左侧滑块按钮(双滑块模式下){ value: number, dragging: boolean, dragIndex?: number }
right-button自定义右侧滑块按钮(双滑块模式下){ value: number, dragging: boolean, dragIndex?: number }

主题定制

样式变量

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

名称默认值描述
--z-slider-active-backgroundvar(--z-primary-color)-
--z-slider-inactive-backgroundvar(--z-gray-3)-
--z-slider-disabled-opacityvar(--z-disabled-opacity)-
--z-slider-bar-height4rpx-
--z-slider-button-width48rpx-
--z-slider-button-height48rpx-
--z-slider-button-radius50%-
--z-slider-button-backgroundvar(--z-white)-
--z-slider-button-shadow0 2rpx 4rpx rgba(0, 0, 0, 0.5)-