Slider
Adjust one quantized numeric value with pointer or keyboard input.
Usage
Single value
Choose one horizontal value with pointer or keyboard input.
<!-- Slider / Single Value -->
<script setup lang="ts">
import { ref } from 'vue'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from '@sectile/vue/slider'
const value = ref('40')
</script>
<template><SliderRoot v-model="value" min="0" max="100" step="1"><SliderTrack><SliderRange /><SliderThumb /></SliderTrack></SliderRoot></template>Vertical value
Choose one vertical value with pointer or keyboard input.
<!-- Slider / Vertical Value -->
<script setup lang="ts">
import { ref } from 'vue'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from '@sectile/vue/slider'
const value = ref('40')
</script>
<template><SliderRoot v-model="value" min="0" max="100" step="1"><SliderTrack><SliderRange /><SliderThumb /></SliderTrack></SliderRoot></template>Controlled value
Let the parent own the slider value while pointer and keyboard input emit requests.
<!-- Slider / Controlled Value -->
<script setup lang="ts">
import { ref } from 'vue'
import { SliderRange, SliderRoot, SliderThumb, SliderTrack } from '@sectile/vue/slider'
const value = ref('40')
</script>
<template><SliderRoot v-model="value" min="0" max="100" step="1"><SliderTrack><SliderRange /><SliderThumb /></SliderTrack></SliderRoot></template>API
Vue package: @sectile/vue/slider
SliderRootSliderTrackSliderRangeSliderThumb
Props
SliderRootProps
as- Type
PrimitiveAsDefault'div'Element or component rendered for this part.
asChild- Type
booleanDefaultfalseWhether to merge this part into its single child instead of rendering a wrapper.
defaultValue- Type
number | stringDefault0Initial value used when the component owns its state.
disabled- Type
booleanDefaultfalseWhether interaction is unavailable.
form- Type
stringDefaultundefinedID of the native form associated with the control.
formatValue- Type
(value: string) => stringDefaultundefinedFormats a value for visible text.
label- Type
stringDefaultundefinedAccessible name announced for the control.
max- Type
number | stringDefault100Largest value accepted by the component.
min- Type
number | stringDefault0Smallest value accepted by the component.
modelValue- Type
number | stringDefaultundefinedCurrent value when state is controlled by the parent.
name- Type
stringDefaultundefinedName used for native form submission.
orientation- Type
'horizontal' | 'vertical'Default'horizontal'Axis used for layout and keyboard movement.
pageStep- Type
numberDefault10Larger increment used by Page Up and Page Down.
readonly- Type
booleanDefaultfalseWhether the value can be inspected but not changed.
required- Type
booleanDefaultfalseWhether the control must contain a valid value before submission.
role- Type
'slider' | 'separator'Default'slider'ARIA role applied to the rendered control.
step- Type
number | stringDefault1Smallest value increment accepted by the component.
SliderPartProps
as- Type
PrimitiveAsDefaultVaries by partElement or component rendered for this part.
asChild- Type
booleanDefaultfalseWhether to merge this part into its single child instead of rendering a wrapper.
Slots
SliderSlotProps
disabled- Type
booleanWhether interaction is unavailable.
percentage- Type
numberCurrent value expressed as a percentage of its range.
readonly- Type
booleanWhether the value can be inspected but not changed.
value- Type
stringCurrent value exposed by this contract.
Events
SliderRoot
update:modelValue- Payload
stringEmitted when the component requests a new controlled value.
Other types
SliderValueFormatter
type SliderValueFormatter = NonNullable<SliderRootProps['formatValue']>SliderValueChangeHandler
type SliderValueChangeHandler = (value: string) => voidParts
Shared scope: [data-scope="slider"]. Combine it with a part selector to keep styles local to this component.
| Part | Selector | Role | Extra attributes |
|---|---|---|---|
root | [data-part="root"] | Defines the component boundary and owns its composed parts. | — |
track | [data-part="track"] | Defines the measurable path used by one or more thumbs. | — |
range | [data-part="range"] | Shows the active interval on the track. | — |
thumb | [data-part="thumb"] | Controls one value along the track. | — |
Keyboard interaction
| Key | Behavior |
|---|---|
| Arrow Right / Arrow Up | Increase the value by one step. |
| Arrow Left / Arrow Down | Decrease the value by one step. |
| Home / End | Move to the minimum or maximum value. |
| Page Up / Page Down | Change the value by the configured page step when supported. |
Accessibility
The thumb exposes its accessible name, minimum, maximum, current value, orientation, and interaction state.
See the corresponding WAI-ARIA pattern for the host accessibility contract.