Preview

Installation

npx sigma-ui@latest add slider

Usage

<script setup lang="ts">
import { ref } from 'vue';
import { Slider } from '@/components/ui/slider';

const modelValue = ref([33]);
</script>

<template>
  <Slider
    v-model="modelValue"
    :max="100"
    :step="1"
  />
</template>

• v-model is a number[]. The slider renders one thumb per value, so pass two values (for example [25, 75]) to select a range.
• Use min, max, and step to set the range and the increment.

Examples

Form

API Reference

Slider

Props

Prop	Type	Default
defaultValue The value of the slider when initially rendered. Use when you do not need to control the state of the slider.	number[]	-
modelValue The controlled value of the slider. Can be bind as v-model.	number[] | null	-
disabled When true, prevents the user from interacting with the slider.	boolean	-
orientation The orientation of the slider.	DataOrientation	-
dir The reading direction of the combobox when applicable. <br> If omitted, inherits globally from ConfigProvider or assumes LTR (left-to-right) reading mode.	Direction	-
inverted Whether the slider is visually inverted.	boolean	-
min The minimum value for the range.	number	-
max The maximum value for the range.	number	-
step The stepping interval.	number	-
minStepsBetweenThumbs The minimum permitted steps between multiple thumbs.	number	-
thumbAlignment The alignment of the slider thumb. contain: thumbs will be contained within the bounds of the track. overflow: thumbs will not be bound by the track. No extra offset will be added.	ThumbAlignment	'contain'
asChild Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.	boolean	-
as The element or component this component should render as. Can be overwritten by asChild.	AsTag | Component	"div"
name The name of the field. Submitted with its owning form as part of a name/value pair.	string	-
required When true, indicates that the user must set the value before the owning form can be submitted.	boolean	-

Events

Event	Payload
update:modelValue Event handler called when the slider value changes	[payload: number[]]
valueCommit Event handler called when the value changes at the end of an interaction. Useful when you only need to capture a final value e.g. to update a backend service.	[payload: number[]]

Accessibility

Adheres to the Slider WAI-ARIA design pattern. Reka UI handles the roles, values, and keyboard support.

Key	Description
Tab	Moves focus to the next thumb or focusable element.
ArrowRight	Increments the value by step.
ArrowLeft	Decrements the value by step.
ArrowUp	Increments the value by step.
ArrowDown	Decrements the value by step.
PageUp	Increments the value by a larger step.
PageDown	Decrements the value by a larger step.
Shift + ArrowUp	Increments the value by a larger step.
Shift + ArrowDown	Decrements the value by a larger step.
Home	Sets the value to its minimum.
End	Sets the value to its maximum.