Slider 滑块

滑动条输入组件，支持单值和区间范围，可配置刻度标记。

基础用法

值：30

基础滑块，v-model 绑定数值

vue

<template>
  <div style="padding: 20px 0; max-width: 400px">
    <ASlider v-model="val" />
    <p style="margin-top: 8px; font-size: 13px; color: #888">值：{{ val }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ASlider } from '@lite-code/aui-vue'

const val = ref(30)
</script>

禁用状态

禁用状态，不可拖动

vue

<template>
  <div style="padding: 20px 0; max-width: 400px">
    <ASlider :model-value="40" disabled />
  </div>
</template>

<script setup lang="ts">
import { ASlider } from '@lite-code/aui-vue'
</script>

刻度标记

通过 marks 配置刻度标记，同时在轨道上显示标记点。

0°C26°C50°C75°C100°C

值：50

带刻度标记的滑块

vue

<template>
  <div style="padding: 20px 0; max-width: 400px">
    <ASlider v-model="val" :marks="marks" />
    <p style="margin-top: 8px; font-size: 13px; color: #888">值：{{ val }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ASlider } from '@lite-code/aui-vue'

const val = ref(50)
const marks = { 0: '0°C', 26: '26°C', 50: '50°C', 75: '75°C', 100: '100°C' }
</script>

范围选择

设置 range 启用区间模式，v-model 绑定 [min, max] 数组。

值：20 ~ 70

区间范围选择，双滑块

vue

<template>
  <div style="padding: 20px 0; max-width: 400px">
    <ASlider v-model="val" :range="true" />
    <p style="margin-top: 8px; font-size: 13px; color: #888">值：{{ val[0] }} ~ {{ val[1] }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ASlider } from '@lite-code/aui-vue'

const val = ref<[number, number]>([20, 70])
</script>

步长

通过 step 设置滑动步长。

0102030405060708090100

值（step=10）：40

step=10 步长滑块

vue

<template>
  <div style="padding: 20px 0; max-width: 400px">
    <ASlider v-model="val" :step="10" :marks="marks" />
    <p style="margin-top: 8px; font-size: 13px; color: #888">值（step=10）：{{ val }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ASlider } from '@lite-code/aui-vue'

const val = ref(40)
const marks = { 0: '0', 10: '10', 20: '20', 30: '30', 40: '40', 50: '50', 60: '60', 70: '70', 80: '80', 90: '90', 100: '100' }
</script>

API

Props

属性	类型	默认值	说明
modelValue	number | [number, number]	—	受控值
defaultValue	number | [number, number]	—	非受控初始值
min	number	0	最小值
max	number	100	最大值
step	number	1	步长
disabled	boolean	false	禁用
marks	Record<number, string>	—	刻度标记
range	boolean	false	开启区间模式

Events

事件名	回调参数	说明
update:modelValue	(value: number | [number, number])	值变更
change	(value: number | [number, number])	值变更