0.1.4 • Published 5d ago

@3mo/slider

Licence

MIT

Version

0.1.4

Deps

Size

25 kB

Vulns

Weekly

Slider

Web components for sliders that pick a single value or a range, continuous or in discrete steps, built on Material Web.

mo-slider — A slider for choosing a number from a range by dragging a thumb.

mo-range-slider — A slider with two thumbs for choosing a range of numbers.

npm install @3mo/slider

import '@3mo/slider'

<mo-slider value='15' min='0' max='100' step='1'></mo-slider>

Discrete — discrete shows the value above the thumb while it is dragged, and ticks marks every step.
Disabled — A disabled slider turns gray and ignores input.
Custom Properties — --mo-slider-accent-color colors the active track, the thumb and the value label.
Parts — The thumb part can be restyled from outside.

Default
Discrete — discrete shows the values above the thumbs while they are dragged, and ticks marks every step.
Disabled — A disabled range slider turns gray and ignores input.
Custom Properties — --mo-slider-accent-color colors the active track, the thumbs and the value labels.
Parts — The thumb part styles both thumbs from outside.

Name	Attribute	Type	Default	Description
`value`	`value`	`number`	`0`	The selected number
`disabled`	`disabled`	`boolean`	`false`	Turns the slider gray and makes it ignore input
`discrete`	`discrete`	`boolean`	`false`	Shows the value above the thumb while it is dragged
`ticks`	`ticks`	`boolean`	`false`	Marks every step on the track
`step`	`step`	`number \| undefined`		The distance between two selectable values, 1 by default
`min`	`min`	`number \| undefined`		The smallest selectable value, 0 by default
`max`	`max`	`number \| undefined`		The largest selectable value, 100 by default

Name	Detail	Description
`input`	`T`	Dispatched with the value while the thumb is dragged
`change`	`T`	Dispatched with the value when the thumb is released

Name	Description
`--mo-slider-accent-color`	The color of the active track, the thumb and the value label

Name	Description
`thumb`	The handle that is dragged

Name	Attribute	Type	Default	Description
`value`	`value`	`RangeSliderValue`	`[0,0]`	The start and end of the selected range, e.g. "[20, 80]"
`disabled`	`disabled`	`boolean`	`false`	Turns the slider gray and makes it ignore input
`discrete`	`discrete`	`boolean`	`false`	Shows the values above the thumbs while they are dragged
`ticks`	`ticks`	`boolean`	`false`	Marks every step on the track
`step`	`step`	`number \| undefined`		The distance between two selectable values, 1 by default
`min`	`min`	`number \| undefined`		The smallest selectable value, 0 by default
`max`	`max`	`number \| undefined`		The largest selectable value, 100 by default

Name	Detail	Description
`input`	`T`	Dispatched with the value while a thumb is dragged
`change`	`T`	Dispatched with the value when a thumb is released

Name	Description
`--mo-slider-accent-color`	The color of the active track, the thumbs and the value labels

Name	Description
`thumb`	The handles that are dragged

MIT 3MO GmbH