🌏 Translated with the assistance of DeepSeek and ChatGPT

Slider

This component somehow reminds me of a sliding rheostat, and this piece of music. 😂

Basic Usage

Pass modelValue to enter controlled mode. If not passed or is undefined, it will be in uncontrolled mode, where you can pass the defaultValue prop as the default value.

Controlled

Uncontrolled

Hide source code

Range Selection

The range prop enables range selection.

Hide source code

Value Range, Step & Precision

min and max set the numerical range. step sets the step size; when it is 0, the step size is not limited.

The precision parameter controls the minimum precision of the numerical value. It takes an integer in [0, 100]; when it is null, the minimum precision is not limited.

Setting the precision parameter is primarily intended to handle unexpected approximate values resulting from precision loss in JS floating-point calculations.

Hide source code

Readonly & Disabled

readonly sets it to read-only, disabled sets it to disabled. The only difference between them is almost just the styling.

Hide source code

Marks

marks sets the marks on the slider. When step is set to 'mark', only values at the marks can be selected.

Hide source code

Label Rendering

The mark slot customizes the rendering of labels of marks.

Hide source code

Vertical Orientation

direction sets the orientation of the slider. When vertical, the height defaults to the container's height, but you can also set the height yourself.

Hide source code

Track Reversal

direction sets the orientation of the slider. When vertical, the height defaults to the container's height, but you can also set the height yourself.

Hide source code

Thumb Indicator

You can use the thumb, thumb-start, and thumb-end slots to customize the content inside the thumbs.

L

R

Hide source code

API

SliderProps

Attribute	Type	Optional	Default	Description	Version
modelValue	number | [number, number] | null	True		The value of the slider (controlled mode), supports v-model.	0.0.3
defaultValue	number | [number, number] | null	True		The default value of the slider (uncontrolled mode).	0.0.3
min	number	True	0	The minimum value of the slider (inclusive).	0.0.3
max	number	True	100	The maximum value of the slider (inclusive).	0.0.3
range	boolean	True	false	Range selection.	0.0.3
disabled	boolean	True	false	Disabled state.	0.0.3
readonly	boolean	True	false	Read-only state.	0.0.3
step	number | 'mark'	True	1	The step size of the values.	0.0.3
marks	(number | { value: number; label?: string })[]	True		Marks on the slider.	0.0.3
direction	'horizontal' | 'vertical'	True	'horizontal'	The orientation of the slider.	0.0.3
reverse	boolean	True	false	Whether to reverse the track.	0.0.3
precision	number | null	True	8		0.0.3
tooltip	boolean	True	true	Whether to enable text tooltip.	0.0.3
tooltipProps	Omit<TooltipProps, 'visible' | 'content'> & EmitEvent<TooltipEvents>	True		Props for the Tooltip component in single-value mode.	0.0.3
tooltipStartProps	Omit<TooltipProps, 'visible' | 'content'> & EmitEvent<TooltipEvents>	True		Props for the first Tooltip component in range selection mode.	0.0.3
tooltipEndProps	Omit<TooltipProps, 'visible' | 'content'> & EmitEvent<TooltipEvents>	True		Props for the second Tooltip component in range selection mode.	0.0.3
pollSizeChange	boolean	True	false	Enables polling for component size changes. This also affects the property of the same name in data input components that are child components.	0.1.0

SliderEvents

Event	Parameter	Description	Version
update:modelValue	value: number | [number, number]	Callback for updating modelValue.	0.0.3
change	value: number | [number, number]	Callback for value change.	0.0.3
dragStart	event: MouseEvent | TouchEvent	Callback for drag start.	0.0.3
dragEnd	event: MouseEvent | TouchEvent	Callback for drag end.	0.0.3
markSelect	value: number, event: MouseEvent	Callback for mark selection.	0.0.3
focus	event: FocusEvent	Callback for slider focus.	0.0.3
focus	event: FocusEvent	Callback for slider focus.	0.0.3

SliderSlots

Slot	Parameter	Description	Version
mark	value: number, label: string | undefined	Rendering of mark labels.	0.0.3
thumb		Content of the thumb in single-value mode.	0.0.3
thumb-start		Content of the first thumb in range selection mode.	0.0.3
thumb-end		Content of the second thumb in range selection mode.	0.0.3
tooltip-content	value: number	Content of the text tooltip.	0.0.3

EmitEvent

export type EmitEvent<T extends Record<string, any>> = {
	[K in keyof T as `on${Capitalize<K & string>}`]?: (...args: T[K]) => void
}