Slider 滑块

介绍

滑块组件用于在给定的范围内选择一个值，支持自定义范围、步长、样式等。

导入

import Slider from '@/components/form/Slider.vue';

使用方法

基础用法

滑块组件的基础用法，通过 v-model 绑定值。

<template>
  <FlexCol :gap="20">
    <Slider v-model:modelValue="value" />
    <text>当前值：{{ Math.floor(value) }}</text>
  </FlexCol>
</template>

<script setup lang="ts">
import Slider from '@/components/form/Slider.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import { ref } from 'vue';

const value = ref(50);
</script>

指定范围

通过 min 和 max 属性设置滑块的取值范围。

<template>
  <FlexCol :gap="20">
    <Slider v-model="value" :min="-50" :max="50" />
    <text>当前值：{{ Math.floor(value) }}</text>
  </FlexCol>
</template>

禁用

通过 disabled 属性禁用滑块。

<template>
  <Slider v-model="value" :disabled="true" />
</template>

指定步长

通过 step 属性设置滑块的步长。

<template>
  <FlexCol :gap="20">
    <Slider v-model="value" :step="20" />
    <text>当前值：{{ value }}</text>
  </FlexCol>
</template>

自定义样式

通过相关属性自定义滑块的样式。

<template>
  <Slider 
    v-model="value" 
    activeColor="success"
    inactiveColor="grey"
    :size="10"
    :dotStyle="{
      backgroundColor: '#5fa',
      borderRadius: 0,
    }" />
</template>

API 参考

Slider

滑块组件，用于在给定范围内选择值。

Props

名称	说明	类型	必填	默认值
modelValue	滑块的值	number	否	50
direction	滑动方向	'horizontal' | 'vertical'	否	'horizontal'
activeColor	主颜色	string	否	primary
inactiveColor	反色	string	否	background.switch
size	条的大小	string | number	否	6
dotColor	开关点的颜色	string	否	white
dotSize	开关大小	number	否	40
dotStyle	点的自定义样式	ViewStyle	否	-
disabled	是否禁用	boolean	否	false
min	最小值	number	否	0
max	最大值	number	否	100
step	步长	number	否	-
innerStyle	内部样式	ViewStyle	否	-

Events

名称	说明	参数
update:modelValue	值更新事件	number

主题变量

名称	类型	默认值	说明
SliderActiveColor	string	primary	滑块激活颜色
SliderInactiveColor	string	background.switch	滑块非激活颜色
SliderDotColor	string	white	滑块圆点颜色
SliderDotSize	number	40	滑块圆点大小
SliderSize	number	6	滑块条大小
SliderDotShadow	string	rgba(0, 0, 0, 0.1) 2px 2px 8px 2px	滑块圆点阴影