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>

Props

Events

Slots

样式变量

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