Ui3nSlider

Slider component for selecting numeric values with customizable appearance.

Props

Name	Type	Default	Description
`id`	`string \| undefined`	—	Root element id
`name`	`string \| undefined`	—	HTML name attribute for form submission
`modelValue`*	`number \| [number, number]`	—	Current slider value
`step`	`string \| number \| undefined`	—	Slider step
`range`	`boolean \| undefined`	—	Whether slider is range
`min`	`string \| number \| undefined`	`0`	Minimum value
`max`	`string \| number \| undefined`	`100`	Maximum value
`labelVisible`	`"normal" \| "always" \| "never" \| undefined`	`"normal"`	Label visibility
`labelTextColor`	`string \| undefined`	`"var(--color-text-block-darkery-default)"`	Label text color
`labelColor`	`string \| undefined`	`"var(--color-bg-block-tritery-default)"`	Label color
`activeColor`	`string \| undefined`	`"var(--color-bg-control-accent-default)"`	Active color
`trackColor`	`string \| undefined`	`"var(--color-bg-control-secondary-default)"`	Track color
`trackHeight`	`string \| number \| undefined`	`8`	Track height
`thumbSize`	`string \| number \| undefined`	`16`	Thumb size
`thumbColor`	`string \| undefined`	`"var(--color-bg-control-accent-default)"`	Thumb color
`transformValueMethod`	`((value: number) => string) \| undefined`	—	Transform value method
`disabled`	`boolean \| undefined`	—	Whether slider is disabled

Events

Event Name	Arguments / Value Type	Description
`update:modelValue`	`value: number \| [number, number]`	—

Public Methods & Exposes

Method Name	Signature / Type	Description
`clear()`	`() => void`	—

Usage Examples

Simple slider

Simple slider

Basic slider with default settings

Value: 50

Slider with custom range

Slider with custom range

Slider with custom min, max and step values

25

Value: 25

Range slider

Range slider

Slider with range mode for selecting two values

Range: 20 - 80