Slider

Slider is an unstyled slider for one value or multiple thumbs. It renders a track, filled range, and role="slider" thumbs with pointer dragging, keyboard stepping, hidden form input support, and CSS variables for styling.

Use it when users can choose an approximate value by dragging. Use Number Field when exact typed input matters.

Anatomy

• #range: Custom content inside the filled range.
• #thumb: Custom content inside each focusable role="slider" thumb.

The root, hidden inputs, track, range, and thumbs are generated by the component. The root sets --akaza-slider-percentage, --akaza-slider-start-percentage, and --akaza-slider-end-percentage for styling.

Usage

<script setup lang="ts">
import { Slider } from "akaza-ui";
import { ref } from "vue";

const volume = ref(60);
</script>

<template>
  <Slider v-model="volume" aria-label="Volume" />
</template>

Examples

Range slider

Bind v-model to a number array. Provide aria-labels so each thumb has a clear accessible name.

<script setup lang="ts">
import { ref } from "vue";
import { Slider } from "akaza-ui";

const price = ref([20, 80]);
</script>

<template>
  <Slider
    v-model="price"
    :min="0"
    :max="100"
    :step="5"
    :aria-labels="['Minimum price', 'Maximum price']"
  />
</template>

Minimum distance between thumbs

minStepsBetweenThumbs keeps adjacent thumbs apart by step units.

<template>
  <Slider v-model="range" :step="5" :min-steps-between-thumbs="2" />
</template>

Vertical slider

Use orientation="vertical" and give the root/track a visible height.

<template>
  <Slider
    v-model="volume"
    orientation="vertical"
    aria-label="Volume"
    :ui="{ root: 'h-40 w-6', track: 'h-full w-2' }"
  />
</template>

Inverted direction

inverted reverses pointer and keyboard value direction.

<template>
  <Slider v-model="brightness" inverted aria-label="Brightness" />
</template>

Custom thumb content

Use #thumb when the thumb needs visible value text or custom markup.

<template>
  <Slider v-model="value" aria-label="Progress">
    <template #thumb="{ value }">
      <span>{{ value }}</span>
    </template>
  </Slider>
</template>

API Reference

Props

Emits

Slots

UI Options

Styling Hooks

Slider sets --akaza-slider-percentage, --akaza-slider-start-percentage, and --akaza-slider-end-percentage on the root. Plain class applies to the root wrapper.

Native invalid state from the hidden form input is revealed after interaction or invalid submit. Controlled invalid state from the invalid prop or parent Field appears immediately.

Keyboard