TSlider / 滑块

Slider for selecting a single value or a range of values. Supports min/max, step, marks, tooltips, vertical orientation, and multi-handle range mode. / 滑块用于选择单个值或值范围，支持最小值/最大值、步长、刻度标记、提示气泡、垂直方向和多点范围模式。

Props / 属性

Prop	Type / 类型	Default / 默认值	Description / 说明
min	number	0	Minimum value
max	number	100	Maximum value
step	number | null	1	Step size
range	boolean | number	false	Range mode (2+ handles)
vertical	boolean	false	Vertical orientation
reversed	boolean	false	Reverse direction
size	'sm' | 'md' | 'xl'	'md'	Slider size
color	TablerColor	'primary'	Track color
marks	Record<number, string>	—	Tick marks { value: label }
dots	boolean	false	Snap to marks only
disabled	boolean	false	Disabled
tooltip	'always' | 'hover' | 'never'	'hover'	Tooltip display mode

v-model

v-model	Type / 类型	Description / 说明
v-model	number | number[]	Single value or range array

Basic Usage / 基础用法

<script setup lang="ts">
import { TSlider } from '@gulcc/tabler-vue'

const value = ref(50)
</script>

<template>
  <TSlider v-model="value" :min="0" :max="100" />
</template>

Advanced Usage / 进阶场景

<script setup lang="ts">
import { TSlider } from '@gulcc/tabler-vue'

const range = ref([20, 80])
const marks = { 0: '0°', 25: '25°', 50: '50°', 75: '75°', 100: '100°' }
</script>

<template>
  <!-- Range slider / 范围滑块 -->
  <TSlider v-model="range" range />

  <!-- With marks / 带刻度 -->
  <TSlider v-model="temp" :marks="marks" :step="null" />

  <!-- Snap to dots / 吸附到刻度 -->
  <TSlider v-model="value" :marks="marks" :step="null" dots />

  <!-- Vertical / 垂直 -->
  <div style="height: 200px;">
    <TSlider v-model="value" vertical />
  </div>

  <!-- Colors / 颜色 -->
  <TSlider v-model="value" color="success" />
  <TSlider v-model="value" color="danger" />

  <!-- Sizes / 尺寸 -->
  <TSlider v-model="value" size="sm" />
  <TSlider v-model="value" size="xl" />

  <!-- Disabled / 禁用 -->
  <TSlider v-model="value" disabled />

  <!-- Always show tooltip / 常驻提示 -->
  <TSlider v-model="value" tooltip="always" />
</template>

Tips / 避坑指南

• Range mode (range=true) returns a number[] with start and end values
• step=null restricts the slider to marks positions only (requires marks to be set)
• dots=true constrains the handle to snap to marks — useful for discrete value selection
• vertical requires the parent container to have a defined height
• Tooltip formatter can be customized via tooltipFormatter function prop