Slider

A slider is for a value whose exact number matters less than where it sits in a range. When the number is what the reader is after, use NumberField instead — or both, as a pair.

import { Slider, SliderFill, SliderThumb, SliderTrack } from "ropav";

Volume

30

orientation

 horizontalvertical

isDisabled

<Slider class="w-64" :default-value="30">
  <Label>Volume</Label>
  <SliderOutput />
  <SliderTrack>
    <SliderFill />
    <SliderThumb />
  </SliderTrack>
</Slider>

One thumb or two

Pass a number for one thumb and an array for two. Each SliderThumb then takes the index it controls, and the fill spans between them.

Volume

30

Price range

20 – 70

slider-basic.vue

<script setup lang="ts">
import { Label, Slider, SliderFill, SliderOutput, SliderThumb, SliderTrack } from "ropav";
</script>

<template>
  <div class="stack">
    <Slider :default-value="30">
      <Label>Volume</Label>
      <SliderOutput />
      <SliderTrack>
        <SliderFill />
        <SliderThumb />
      </SliderTrack>
    </Slider>

    <Slider :default-value="[20, 70]">
      <Label>Price range</Label>
      <SliderOutput />
      <SliderTrack>
        <SliderFill />
        <SliderThumb :index="0" />
        <SliderThumb :index="1" />
      </SliderTrack>
    </Slider>
  </div>
</template>

<style scoped>
.stack {
  display: flex;
  width: calc(var(--rp-spacing) * 64);
  flex-direction: column;
  gap: calc(var(--rp-spacing) * 6);
}
</style>

SliderOutput renders the current value, formatted through format-options the same way a number field is. SliderMarks draws the ticks.

Accessibility

• Each thumb is a native range input, so the value and the range are the browser's to announce.
• Arrow keys move by step, Home and End jump to the ends.
• Give the slider a Label, or an aria-label when there is no room for one. A two-thumb slider labels each end from the group, so a reader hears which end they are moving.

API

Slider

Prop	Type	Default	Description
ariaDescribedby	string	—	Ids of the elements that describe the slider.
ariaLabel	string	—	Accessible name, for a slider with no visible label.
ariaLabelledby	string	—	Ids of the elements that name the slider.
defaultValue	number | number[]	—	Value while the slider is uncontrolled.
formatOptions	Intl.NumberFormatOptions	—	Passed to Intl.NumberFormat to build the value labels.
id	string	—	Id of the group, and the stem every thumb id grows from.
isDisabled	boolean	—
maxValue	number	100
minValue	number	0
orientation	"horizontal" | "vertical"	"horizontal"
step	number	1
value	number | number[]	—	Current value. A number drives one thumb, an array one thumb per entry.

The default slot receives:

Slot prop	Type
isDisabled	boolean
orientation	SliderOrientation
values	number[]

Event	Payload
change	number | number[]
changeEnd	number | number[]
update:value	number | number[]

SliderFill

SliderFill takes nothing but class.

SliderMarks

Slots: default.

SliderOutput

Slots: default.

SliderThumb

Prop	Type	Default	Description
form	string	—	id of the form to submit with, for a thumb rendered outside it.
index	number	0	Which thumb this is, for a slider with more than one.
isDisabled	boolean	—	Disables this thumb alone.
name	string	—	Name submitted with the form.

The default slot receives:

Slot prop	Type
isDisabled	boolean
isDragging	boolean
isFocused	boolean
isFocusVisible	boolean
isHovered	boolean

SliderTrack

The default slot receives:

Slot prop	Type
isDisabled	boolean
orientation	SliderOrientation
values	number[]