Slider 滑块

滑块选择器，支持单值、范围、多点、刻度吸附、垂直/置反等丰富模式。

基础用法

通过 v-model 双向绑定数值。默认模式下绑定 number 类型。

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(40)
</script>

<template>
  <TSlider v-model="value" />
</template>

范围滑块

range 设为 true 开启双滑块模式，v-model 绑定 [number, number] 数组。

<TSlider v-model="value" :range="true" />

刻度标记

marks 接收 { value: label } 格式对象，在指定位置显示刻度点和标签。

<TSlider
  v-model="value"
  :marks="{ 0: '0°C', 50: '50°C', 100: '100°C' }"
/>

吸附到刻度（Dots）

dots 为 true 时，滑块只能停靠在已定义的刻度点上。

<TSlider
  v-model="value"
  :marks="{ 0: '低', 50: '中', 100: '高' }"
  :dots="true"
/>

颜色

color 设置主题色，手柄边框和填充区同步变化。可选 Tabler 内置颜色（primary / secondary / success / warning / danger / info）。

<TSlider v-model="value" color="primary" />
<TSlider v-model="value" color="success" />
<TSlider v-model="value" color="danger" />

禁用状态

disabled 使滑块不可交互，视觉呈半透明。

<TSlider v-model="value" disabled />

自定义步长

step 控制每次拖拽的步进粒度。

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

垂直方向

vertical 将滑块切换为垂直布局。

<TSlider v-model="value" vertical />
<TSlider v-model="value" :range="true" vertical />

置反（Reversed）

reversed 翻转滑块的起点方向：横向从右到左，纵向从上到下。

<TSlider v-model="value" reversed />
<TSlider v-model="value" :range="true" reversed />
<TSlider v-model="value" vertical reversed />

多点滑块

range 可传入数字 3、4 等，创建任意数量手柄的多点滑块。手柄按相邻约束：arr[0] < arr[1] < arr[2]…。

<TSlider v-model="value" :range="3" />
<TSlider v-model="value" :range="4" vertical />

Tooltip 展示

tooltip 控制提示的展示时机：

• 'hover'（默认）— 悬停或拖拽时显示
• 'always' — 始终显示
• 'never' — 不显示

<TSlider v-model="value" tooltip="always" />

Tooltip 方向

tooltip-placement 控制提示显示位置：水平滑块可选 top（默认）/ bottom；垂直滑块可选 right（默认）/ left。

<TSlider v-model="value" tooltip="always" tooltip-placement="bottom" />
<TSlider v-model="value" vertical tooltip="always" tooltip-placement="left" />

自定义格式化

tooltip-formatter 接收自定义函数，返回格式化后的提示文本。

<TSlider
  v-model="value"
  :tooltip-formatter="(v: number) => `${v}%`"
  tooltip="always"
/>

范围拖动

draggable-range（默认 true）允许在范围模式下，拖动两个手柄之间的填充区来整体移动区间。

<TSlider v-model="value" :range="true" />
<!-- 禁用范围拖动 -->
<TSlider v-model="value" :range="true" :draggable-range="false" />

尺码（Size）

size 属性控制滑块整体大小：sm（小）、md（默认）、xl（大）。

<TSlider v-model="value" size="sm" />
<TSlider v-model="value" size="md" />
<TSlider v-model="value" size="xl" />

API

Props

参数	说明	类型	默认值
v-model	当前值。单滑块为 number，多滑块为 number[]	number | number[]	0
min	最小值	number	0
max	最大值	number	100
step	步长，设为 null 时仅允许吸附 marks	number | null	1
range	多滑块模式。true 为双点，传入数字为 N 点	boolean | number	false
disabled	禁用	boolean	false
vertical	垂直方向	boolean	false
reversed	置反起点方向	boolean	false
size	滑块尺寸	'sm' | 'md' | 'xl'	'md'
draggable-range	允许拖动填充区整体移动区间（range ≥2 时生效）	boolean	true
marks	刻度标记 { value: label }	Record<number, string>	undefined
dots	仅允许拖到刻度点（需配合 marks 使用）	boolean	false
tooltip	提示展示方式	'always' | 'hover' | 'never'	'hover'
tooltip-formatter	提示内容格式化函数	(val: number) => string	String
tooltip-placement	提示位置，不传则自动根据方向选默认值	'top' | 'bottom' | 'right' | 'left'	undefined（自动）
color	主题色，控制手柄边框和填充区颜色	TablerColor	'primary'

Emits

事件名	说明	回调参数
change	拖拽过程中值变化时触发	(value: number | number[])
afterChange	拖拽结束（mouseup/touchend）时触发	(value: number | number[])