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

`EvSlider` 在小范围内选取数值：音量、透明度、磨砂强度这类连续参数。原生 range 之上的
受控封装，键盘方向键可调，导轨「已走过」的部分着主色；提供三种尺寸与禁用态。
不绑定 `v-model` 时组件自持状态（`default-value` 定初值），复制标签即可拖动。

## 基础用法

```vue
<script setup>
import { ref } from 'vue'
const volume = ref(30)
</script>

<template>
  <EvSlider v-model="volume" :min="0" :max="100" />
  <EvSlider v-model="ratio" :min="0" :max="1" :step="0.05" />
</template>
```

## 尺寸与禁用

```vue
<EvSlider size="small" :default-value="20" />
<EvSlider :default-value="45" />
<EvSlider size="large" :default-value="70" />
<EvSlider disabled :default-value="60" />
```

## API

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| v-model | 当前值 | number | `0` |
| default-value | 非受控模式的初始值（未绑定 v-model 时生效） | number | — |
| min | 最小值 | number | `0` |
| max | 最大值 | number | `100` |
| step | 步长 | number | `1` |
| disabled | 禁用 | boolean | `false` |
| size | 尺寸 | `'small' \| 'default' \| 'large'` | `'default'` |

### 事件

| 事件 | 说明 | 参数 |
| --- | --- | --- |
| update:modelValue | 拖动时持续派发 | number |
| change | 拖动时持续派发 | number |

`aria-label` 等原生属性会透传到内部 input 上（单独使用时建议补一个可读名称）。

初始值不必落在步长格点上：不在 `min + k·step` 上的值会就近吸附显示（如 `min=30`、
`step=5` 的 `72` 显示为 `70`），圆钮与导轨填充始终一致；拖动派发的一律是格点值。