Slider
A slider allows a user to select one or more values within a range
Usage
<script setup lang="ts">
import { Slider } from '@hareui/vue'
</script><script setup lang="ts">import { Slider } from '@hareui/vue'</script><template> <Slider class="w-full max-w-xs" label="Volume" :default-value="30" /></template>Anatomy
Slider renders a Label, an output showing the formatted value, and a track holding the fill and one thumb per value. A number value renders one thumb; an array renders one thumb per entry (a two-element array is a range slider).
<template>
<Slider label="…" :default-value="[25, 75]">
<template #label /> <!-- Label content -->
<template #output="{ values, formatted }" /> <!-- output content (default: formatted values joined by ' – ') -->
</Slider>
</template>ui key | data-slot | Element |
|---|---|---|
base | slider | <div> root |
label | label | Label (iff label / #label) |
output | slider-output | <output> |
track | slider-track | <span> |
fill | slider-fill | <span> |
thumb | slider-thumb | <span role="slider">, one per value |
Examples
Disabled
<script setup lang="ts">import { Slider } from '@hareui/vue'</script><template> <Slider disabled class="w-full max-w-xs" label="Volume" :default-value="30" /></template>Vertical
<script setup lang="ts">import { Slider } from '@hareui/vue'</script><template> <div class="flex h-64 items-center justify-center"> <Slider class="h-full" label="Volume" :default-value="30" orientation="vertical" /> </div></template>Range
<script setup lang="ts">import { Slider } from '@hareui/vue'</script><template> <Slider class="w-full max-w-xs" label="Price Range" :default-value="[100, 500]" :format-options="{ currency: 'USD', style: 'currency' }" :max="1000" :min="0" :step="50" /></template>Controlled Value
Control the value with v-model. change-end fires with the final value when a drag or key press commits it.
Current value: 25
<script setup lang="ts">import { Slider } from '@hareui/vue'import { ref } from 'vue'const value = ref(25)</script><template> <div class="flex w-full max-w-xs flex-col gap-4"> <Slider v-model="value" label="Volume" /> <p class="text-sm text-muted"> Current value: {{ value }} </p> </div></template>Custom Value Formatting
Use format-options to format the displayed value. This example formats it as USD.
<script setup lang="ts">import { Slider } from '@hareui/vue'</script><template> <Slider class="w-full max-w-xs" label="Price" :default-value="60" :format-options="{ currency: 'USD', style: 'currency' }" /></template>Custom Output
Use the #output slot to control how the selected values are shown.
<script setup lang="ts">import { Slider } from '@hareui/vue'</script><template> <Slider class="w-full max-w-xs" label="Range" :default-value="[25, 75]"> <template #output="{ formatted }"> {{ formatted.join(' – ') }} </template> </Slider></template>Render Function
<script setup lang="ts">import { Slider } from '@hareui/vue'</script><template> <!-- Attributes fall through to the root element (HeroUI's `render` prop) --> <Slider class="w-full max-w-xs" data-custom="foo" label="Volume" :default-value="30" /></template>Attributes such as data-* fall through to the root element.
Customization
Tailwind CSS
<script setup lang="ts">import { Slider } from '@hareui/vue'</script><template> <Slider class="w-full max-w-xs" label="Brightness" :default-value="40" :ui="{ label: 'font-medium text-foreground', output: 'text-xs text-muted tabular-nums', track: 'bg-default', fill: 'bg-accent', thumb: 'bg-accent after:bg-accent-foreground', }" /></template>Global Configuration
app.use(createHareUI({
ui: { slider: { slots: { output: 'text-muted', thumb: 'rounded-full' } } },
}))Styling Reference
Slots
base→[data-slot="slider"]– grid with the label and output on the first row and the track below (vertical: output, track, label stacked)output→[data-slot="slider-output"]– formatted value(s)track→[data-slot="slider-track"]– track; transparent borders leave room for the thumb at the edgesfill→[data-slot="slider-fill"]– selected part of the trackthumb→[data-slot="slider-thumb"]– draggable thumb
Interactive States
- Disabled:
[data-disabled]on the slider and thumbs - Vertical:
[data-orientation="vertical"] - Dragging:
[data-dragging="true"]on the thumb being dragged - Focus:
:focus-visibleon the thumb - Fill edges:
[data-fill-start="true"]/[data-fill-end="true"]on the track when the fill reaches the start or end
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | number | number[] | - | The current value(s). Bind with v-model. A plain number renders a single thumb; an array
renders one thumb per value (e.g. a two-element array for a range slider). |
defaultValue | number | number[] | 0 | The initial value(s) when uncontrolled (no v-model). |
min | number | 0 | The slider's minimum value. |
max | number | 100 | The slider's maximum value. |
step | number | 1 | The amount the value changes per step. |
formatOptions | Intl.NumberFormatOptions | - | Formatting options for the displayed value label (Intl.NumberFormat). |
locale | string | - | The BCP 47 locale used to format the value label. Defaults to the browser locale. |
orientation | "horizontal" | "vertical" | "horizontal" | The axis the slider is laid out along. |
label | string | - | The slider's label. |
disabled | boolean | false | Whether the slider is disabled. |
name | string | - | The name of the slider, used when submitting an HTML form. |
required | boolean | false | Whether a value is required before form submission. |
id | string | - | The id of the slider. Generated when omitted. |
ui | ComponentSlots<{ slots: { base: string[]; label: string; output: string[]; track: string[]; fill: string[]; thumb: string[]; }; }> | - | Per-slot class overrides. |
Slots
| Slot | Props | Description |
|---|---|---|
label | any | The label content. Replaces the label prop. |
output | { values: number[]; formatted: string[]; } | The output content, showing the formatted current value(s). Replaces the default ' – '-joined format. |
Emits
| Event | Payload | Description |
|---|---|---|
update:modelValue | [value: number | number[] | undefined] | - |
changeEnd | [value: number | number[]] | - |
Accessibility
- Implements the ARIA slider pattern: each thumb is a
role="slider"witharia-valuenow,aria-valueminandaria-valuemax - Keyboard: Arrow keys step by
step; Page Up / Page Down and Shift + Arrow step by 10 ×step; Home / End jump tomin/max labelnames the slider througharia-labelledby; without one, passaria-label- With
name, a hidden input submits the value with a form - Right-to-left layouts are supported
