Playground GitHub npm

Slider

Draggable value slider (track + thumb), arrow-key support.

ui form

Preview

Installation

npx slintcn@latest add slider

Usage

import { Slider } from "slintcn/components/slider.slint";

Slider { value <=> volume; minimum: 0; maximum: 100; }

Properties

value in-out float

Two-way; current value clamped to `minimum..maximum`.

minimum in float

Lower bound (inclusive).

maximum in float

Upper bound (inclusive).

disabled in bool

When true, the thumb dims and stops responding.

changed callback (float)

Fired with the new `value` while dragging.

API

Accessibility
focusableyes
keyboardArrow keys

Dependencies

theme only

Installed automatically as transitive dependencies of slintcn add slider.