Slider

Material Design 3 slider web component (single value, native <input type="range">-based).

2.7 KB gzipped
@lit-material/slider 0.0.4
Renders on the server

Example

Install

npm install @lit-material/slider @lit-material/tokens

import "@lit-material/slider";

Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide

API

`<lit-material-slider>`

Material Design 3 slider — a single value between min and max, built on a real native <input type="range"> for keyboard (arrows/Home/End/ PageUp/PageDown), pointer dragging, value clamping/stepping, and ARIA slider semantics, styled invisibly on top of custom-drawn track/thumb visuals — the same pattern lit-material-checkbox/radio/switch use.

Properties

Property	Attribute	Type	Default	Description
`min`	`min`	`number`	`0`
`max`	`max`	`number`	`100`
`step`	`step`	`number`	`1`
`value`	`value`	`number`	`0`
`disabled`	`disabled`	`boolean`	`false`
`name`	`name`	`string`	`""`
`form`	`form`	`string \| undefined`	none
`ariaLabel`	`aria-label`	`string \| null`	`null`	Forwarded to the inner control; sliders have no visible label so this is often required.
`ariaLabelledBy`	`aria-labelledby`	`string \| null`	`null`

Events

Event	Description
`change`	Bubbles once the value change is committed (matches native `<input>`).
`input`	Bubbles live as the value changes while dragging/pressing a key (matches native `<input>`).

CSS parts

Part	Description
`track`	The full-width background track.
`track-active`	The filled portion of the track, from the start to the thumb.
`thumb`	The draggable circular thumb.
`value-label`	The value bubble shown above the thumb while focused/dragging.
`ripple`	The state-layer element the hover/press feedback is drawn on.
`focus-ring`	The focus indicator element.

Source on GitHub npm

Slider

Example

Slider

Custom min/max/step

Install

API

<lit-material-slider>

Properties

Events

CSS parts

`<lit-material-slider>`