Slider 滑动选择器

用于在一定范围内选择数值，支持步长、范围和数值显示

滑动选择器组件，用于在一定范围内选择数值

演示

9:41

代码示例

<!-- 基础用法 -->
  <re-slider class="demo-default" />
  <re-slider class="demo-value" :value="50" />

<!-- 数值显示 -->
  <re-slider class="demo-show-value" :showValue="true" :value="50" />
  <re-slider class="demo-show-value-zero" :showValue="true" :value="0" />

<!-- 最小最大值 -->
  <re-slider class="demo-min-max" :min="10" :max="90" :value="50" />
  <re-slider class="demo-neg-range" :min="-50" :max="50" :value="0" />

<!-- 步长 -->
  <re-slider class="demo-step" :step="10" :value="20" />
  <re-slider class="demo-step-5" :step="5" :value="25" :showValue="true" />

<!-- 禁用状态 -->
  <re-slider class="demo-disabled" :disabled="true" :value="50" />

<!-- 范围选择 -->
  <re-slider class="demo-range" :range="true" />
  <re-slider class="demo-range-off" :range="false" :value="30" />

<!-- 边界值 -->
  <re-slider class="demo-at-min" :value="0" :showValue="true" />
  <re-slider class="demo-at-max" :value="100" :showValue="true" />

<!-- 相同最小最大 -->
  <re-slider class="demo-same-range" :min="50" :max="50" :value="50" />

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-slider />。

API

Slider Props

名称	类型	默认值	描述	必传
value	`number`	0	当前值	N
min	`number`	0	最小值	N
max	`number`	100	最大值	N
step	`number`	1	步长	N
disabled	`boolean`	false	是否禁用	N
showValue	`boolean`	false	是否显示当前值	N
range	`boolean`	false	是否区间选择（暂未启用，预留参数）	N
customStyle	`string`	""	自定义样式	N

Slider Events

名称	参数	描述
change	value: number	值变化结束时触发
changing	value: number	拖动过程中持续触发
update:modelValue	value: number	v-model 更新事件

Slider Slots

名称	描述
-	-

SlideCaptcha 滑块验证码

滑块拼图验证组件，支持触屏拖动、SVG 降级与自适应缩放，通常配合后端滑动校验接口（verify_token）使用

Stepper 步进器

通过 +/- 按钮调整数值，支持范围、步长和整数限制

内容锚点

演示
代码示例
引入
API