Hacktron Design System

Slider

A control for selecting a numeric value or range from a bounded scale by dragging a thumb.

<template>
  <Slider v-model="amount" :min="50" :max="10000" :step="50" />
</template>

Props

Name Type Default
modelValuenumber | number[]
minnumber0 (USlider's own default)
maxnumber100 (USlider's own default)
stepnumber1 (USlider's own default)
disabledbooleanfalse
tooltipboolean | TooltipPropsfalse
...propsUSlider props (orientation, color, size, inverted, minStepsBetweenThumbs, ...)

Usage