滑块 Slider

滑块输入，提供默认值、可选范围等能力。

使用

API

安装使用

import { TiSlider } from '@titian-design/mobile-vue'

用法示例

单滑块

codesanbox

copy

code

<template>
  <TiSlider :min="0" :max="100" :step="10" :value="value" @change="changeHandler" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiSlider } from 'titian-h5-vue';

const value = ref(10);
const changeHandler = (event: CustomEvent<{ value: number | number[] }>) => {
  value.value = event.detail.value as number;
};
</script>

双滑块

codesanbox

copy

code

<template>
  <TiSlider :min="0" :max="100" :step="10" :value="value" @change="changeHandler" />
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { TiSlider } from 'titian-h5-vue';

const value = ref([10, 50]);
const changeHandler = (event: CustomEvent<{ value: number | number[] }>) => {
  value.value = event.detail.value as [number, number];
};
</script>

TiSlider API

属性 Properties

属性	类型	必填	默认值	说明	备注
value	number | number[]	是	100	最大值	-
max	number	否	100	最大值	-
min	number	否	100	最小值	-
step	number	否	1	步长	-
track-class	string	否	-	滑过轨迹样式类	-
rail-class	string	否	-	整体轨道样式类	-
thumb-class	string	否	-	滑块样式类	-

事件 Events

名称	参数列表	描述	备注
change	(e: CustomEvent<value: number | number[]>) => void	滑动时触发的回调事件	-

外部样式类 External Classes

名称	说明	备注
track-class	轨道颜色类	-
rail-class	已滑动轨迹颜色类	-
thumb-class	滑块颜色类	-

CSS 变量 CSS Variables

CSS 变量	默认值	说明	备注
--slider-rail-bg-color	theme.color.brand.100	轨道颜色	-
--slider-track-bg-color	theme.color.brand.1000	已滑动轨迹颜色	-
--slider-thumb-bg-color	theme.color.gray.background.default	滑块颜色	-
--slider-thumb-size	theme.fontSize.t10	滑块size	-