Slider スライダー

連続したフィードバックで値を調整します。タッチとキーボードに対応。

基本的な使い方

インタラクティブプレビュー

UI の不透明度

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="UI の不透明度" :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)

キーボード操作と利用上の注意

矢印キーで 1 ステップずつ調整し、Home / End で端まで、Page Up / Down で大きく調整します。

インストール

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