---
url: /components/slider.md
---
# Slider 滑块

在数值区间内拖动手柄取值，支持单值与区间（range）双手柄、垂直布局、步进挡点、marks 刻度与数值输入框联动。拖动结束提交 update:modelValue 与 change，拖动过程中实时触发 input；区间模式两手柄互相不越过。手柄获得焦点后支持方向键步进、PageUp / PageDown 大步调整、Home / End 跳到最小最大值。

## 基础用法

`v-model` 绑定数值；`range` 开启区间双手柄模式（此时绑定值为 \[start, end] 数组）；`disabled` 禁用拖拽与键盘。

## 取值联动

绑定值可实时展示在任意自定义内容中；下方文本随拖动同步。

## 取值范围与步长

`min` / `max` 限定范围，`step` 为步长（可为小数），取值会自动吸附到步进挡位。

## 步进挡点与刻度

`show-stops` 按步长显示挡点，`marks` 在轨道上标注刻度文本（key 为数值，值可为文本或 `{ label, style }`），`format-tooltip` 自定义悬停气泡文案。

## 气泡显示

`show-tooltip` 关闭后拖动与悬停均不出现气泡，适合与 marks 或外部数值展示搭配。

## 垂直模式与数值输入

`vertical` 切换为垂直滑块（需同时指定 `height`）；`show-input` 在水平单值模式下联动一个数字输入框，`show-input-controls` 可去掉增减按钮，`input-size` 控制输入框尺寸。

## API