Interactive Scrubber

A tactile range slider providing smooth parameter control with visual tick markers, pointer capture, and precise lifecycle events.

Installation

npx raya-ui@latest add scrubber

API Reference

Props

v-model

number

The active bound value of the scrubber.

label

string

Display title aligned to the left of the component.

min / max

number

The numeric boundaries for the control constraints.

Emits

@slideBegin

Fired when the user first clicks/taps the track.

@change

Fired continuously during movement.

@slideEnd

Fired when the user releases the slider.

Keyboard Interactions

Arrow Right / Up: Increment value by step.
Arrow Left / Down: Decrement value by step.
Home / End: Jump to Min / Max boundaries.

Volume

0.50

Interact to see events...

Settings

Scrubber Label

Min

Max

Step

Ticks

source-code.vue

<script setup lang="ts">
import { ref } from 'vue'
import { Scrubber } from '@/components/ui/scrubber'

const value = ref(0.50)
const log = (msg: string) => console.log(msg)
</script>

<template>
  <Scrubber
    v-model="value"
    label="Volume"
    :min="0"
    :max="1"
    :step="0.01"
    :ticks="9"
    :decimals="2"
    @slide-begin="(v) => log('Started at ' + v)"
    @slide-end="(v) => log('Ended at ' + v)"
  />
</template>