Slider

Adjusts a value with continuous feedback, by touch or keyboard.

Basic usage

Live preview

Interface opacity

72

Fixed brightness

50

View Vue source

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="Interface opacity" :min="20" :max="100" />
    <AgmSlider label="Fixed brightness" :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

Prop	Type	Default	Description
modelValue	number	0	Updated through v-model
label	string	Required	Visible label
min	number	0	Minimum
max	number	100	Maximum; must be greater than min
step	number	1	Positive step size
disabled	boolean	false	Blocks adjusting
name	string	undefined	Form field name

Events

• update:modelValue(number)

Keyboard and usage notes

Arrow keys move by one step, Home / End jump to the limits, Page Up / Down take larger steps.

Installation

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