Slider 滑块

以连续反馈调整数值，支持触控与键盘。

基础用法

界面不透明度

72

固定亮度

50

查看 Vue 源码

Vue · TypeScript

<script setup lang="ts">
import { AgmSlider } from 'augma'
import { shallowRef } from 'vue'

const opacity = shallowRef(72)
</script>

<template>
  <div class="example-stack">
    <AgmSlider v-model="opacity" label="界面不透明度" :min="20" :max="100" />
    <AgmSlider label="固定亮度" :model-value="50" disabled />
  </div>
</template>

<style scoped>
.example-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API

属性	类型	默认值	说明
modelValue	number	0	通过 v-model 更新
label	string	必填	可见标签
min	number	0	最小值
max	number	100	最大值，应大于 min
step	number	1	正数步长
disabled	boolean	false	禁止调整
name	string	undefined	表单字段名

事件

• update:modelValue(number)

键盘操作与使用边界

方向键按步长调节，Home / End 到达边界，Page Up / Down 大步调节。

安装

import { AgmSlider } from 'augma'
import 'augma/style.css'