Slider

Single-value range slider built on a native <input type="range">, wrapped in ControlElement.

Live Demo

Basic

Volume

Value: 40

Value readout

Area

60 m²

Fractional step

Opacity

0.5

Sizes

xs

sm

md

lg

xl

Horizontal layout, disabled, error

Horizontal

Disabled

With error

Too loud

Usage

<template>
  <orio-slider v-model="area" label="Area" :min="20" :max="200" :step="5">
    <template #after>
      <orio-view-text>{{ area }} m²</orio-view-text>
    </template>
  </orio-slider>
</template>

<script setup>
import { ref } from 'vue'

const area = ref(60)
</script>

Props

Extends ControlProps (label, error, size, layout, disabled, required, name, …) — see ControlElement.

Prop	Type	Default	Description
modelValue	number	0	Current value (v-model)
min	number	0	Lowest value
max	number	100	Highest value
step	number	1	Increment; emitted values snap to it

Events

Event	Payload	Description
update:modelValue	number	Emitted while dragging or on keyboard change; clamped to min–max and snapped to step

Slots

Slot	Description
before	Content inline before the track
after	Content inline after the track (e.g. value readout)

Keyboard Support

Native range behavior: Arrow keys step, Page Up/Down jump, Home/End go to min/max.

Styling

--color-accent          /* Filled track, thumb outline, focus ring */
--color-accent-hover    /* Thumb disc */
--color-border          /* Unfilled track */
--color-bg              /* Thumb ring */
--control-slider-thumb  /* Thumb diameter, from size */
--control-slider-track  /* Track height, from size */