createSlider API

API reference for the createSlider composable.

Explore these related pages for additional context and usage patterns.

Page	Category
createSlider	Forms
createNumeric	Forms
createRating	Forms
Slider	Forms

Functions

createSlider

(options?: SliderOptions) => SliderContext

Creates slider state with value math, step snapping, and multi-thumb support. Extends createModel for useProxyModel compatibility. Each thumb is a model ticket with a shallowRef<number> value. Values are derived from the ordered tickets, enabling proper registration/unregistration lifecycle.

Options

min

number | undefined

Minimum value.

Default: 0

max

number | undefined

Maximum value.

Default: 100

step

number | undefined

Step increment. Values are snapped to the nearest multiple of `step` above `min`.

Default: 1

disabled

MaybeRefOrGetter<boolean> | undefined

Whether the slider is disabled.

readonly

MaybeRefOrGetter<boolean> | undefined

Whether the slider is readonly (focusable but not editable).

orientation

MaybeRefOrGetter<"horizontal" | "vertical"> | undefined

Slider orientation.

inverted

MaybeRefOrGetter<boolean> | undefined

Flip the percent axis.

minStepsBetweenThumbs

number | undefined

Minimum steps required between adjacent thumbs.

Default: 0

crossover

boolean | undefined

Allow thumbs to pass through each other.

Default: false

range

boolean | undefined

Range mode — expects two thumbs.

Default: false

Properties

values

ComputedRef<number[]>

Ordered thumb values derived from model tickets.

selectedValues

ComputedRef<number[]>

Alias for `values` — provides useProxyModel compatibility.

disabled

Readonly<Ref<boolean, boolean>>

Whether disabled. Reactive ref derived from the `disabled` option.

readonly

Readonly<Ref<boolean, boolean>>

Whether readonly. Reactive ref derived from the `readonly` option.

orientation

Readonly<Ref<"horizontal" | "vertical", "horizontal" | "vertical">>

Slider orientation. Reactive ref derived from the `orientation` option.

inverted

Readonly<Ref<boolean, boolean>>

Whether inverted. Reactive ref derived from the `inverted` option.

min

number

Minimum value.

max

number

Maximum value.

step

number

Step increment.

minStepsBetweenThumbs

number

Minimum steps required between adjacent thumbs.

crossover

boolean

Whether thumbs can cross each other.

range

boolean

Whether this is a range slider.

Methods

apply

(values: unknown[], options?: { multiple?) => void

Apply external values — snaps, constrains, and writes to ticket refs.

register

(input?: number | { value) => SliderTicket

unregister

(id: ID) => void

Unregister a thumb by ticket ID.

snap

(value: number) => number

Round a value to the nearest step, clamped to min/max.

fromValue

(value: number) => number

Convert a value to a 0–100 percentage.

fromPercent

(percent: number) => number

Convert a 0–100 percentage to a snapped value.

set

(index: number, value: number) => void

Set the value at a thumb index with step snapping and neighbor constraints.

up

(index: number, multiplier?: number) => void

Increment a thumb's value by `step × multiplier`.

down

(index: number, multiplier?: number) => void

Decrement a thumb's value by `step × multiplier`.

floor

(index: number) => void

Set a thumb to the minimum value.

ceil

(index: number) => void

Set a thumb to the maximum value.