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	—	Active color
trackColor	string | undefined	—	Track color
trackHeight	string | number | undefined	—	Track height
thumbSize	string | number | undefined	—	Thumb size
thumbColor	string | undefined	—	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	—

CSS Variables

Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.

Name	Default
--ui3n-slider-active-color	var(--color-bg-control-accent-default)
--ui3n-slider-height	max(var(--_slider-track-height), var(--_slider-thumb-size))
--ui3n-slider-pointer1-position	0
--ui3n-slider-pointer2-position	0
--ui3n-slider-thumb-color	var(--color-bg-control-accent-default)
--ui3n-slider-thumb-size	16px
--ui3n-slider-track-color	var(--color-bg-control-secondary-default)
--ui3n-slider-track-height	8px

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