# @3mo/slider

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

Latest version **0.1.4** (published 2026-09-27) · MIT license · 0 weekly downloads

## Install

```sh
npm install @3mo/slider
pnpm add @3mo/slider
yarn add @3mo/slider
bun add @3mo/slider
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2026-09-27 |
| First published | 2022-11-26 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 24.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 8 |
| Author | 3MO GmbH |
| Maintainers | manuelmolicki, arshia11d, julian.molicki, avorobiov_artelogic |
| Keywords | lit, web-component, material, slider, range-slider |

## Links

- npm: https://www.npmjs.com/package/@3mo/slider
- Repository: https://github.com/3mo-esolutions/web-components
- Homepage: https://3mo-esolutions.github.io/web-components/?path=/docs/inputs-slider--overview
- Issues: https://github.com/3mo-esolutions/web-components/issues
- npm.io page: https://npm.io/package/@3mo/slider

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) x

## Alternatives

- [adhdev](https://npm.io/package/adhdev.md) — 11.1K weekly downloads
- [react-slide-button](https://npm.io/package/react-slide-button.md) — 310 weekly downloads
- [better](https://npm.io/package/better.md) — 42 weekly downloads
- [react-native-swipe-image](https://npm.io/package/react-native-swipe-image.md) — 22 weekly downloads
- [nl.fokkezb.pulltorefresh](https://npm.io/package/nl.fokkezb.pulltorefresh.md) — 11 weekly downloads

## Recent versions

- 0.1.4 (latest) — 2026-09-27
- 0.1.3 — 2023-10-22
- 0.1.2 — 2023-10-10
- 0.1.1 — 2023-10-04
- 0.1.0 — 2023-10-04
- 0.0.6 — 2023-05-21
- 0.0.5 — 2023-05-12
- 0.0.4 — 2023-03-17
- 0.0.3 — 2022-12-18
- 0.0.2 — 2022-12-18
- 0.0.1 — 2022-11-26

## README

# Slider

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

[![npm](https://img.shields.io/npm/v/@3mo/slider?style=flat-square&color=0077c8)](https://www.npmjs.com/package/@3mo/slider) [![Documentation](https://img.shields.io/badge/docs-storybook-ff4785?style=flat-square&logo=storybook&logoColor=white)](https://3mo-esolutions.github.io/web-components/?path=/docs/inputs-slider--overview)

`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.

## Installation

```sh
npm install @3mo/slider
```

```ts
import '@3mo/slider'
```

## Usage

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

## Examples

- [Discrete](https://3mo-esolutions.github.io/web-components/?path=/story/inputs-slider--discrete) — `discrete` shows the value above the thumb while it is dragged, and `ticks` marks every `step`.
- [Disabled](https://3mo-esolutions.github.io/web-components/?path=/story/inputs-slider--disabled) — A disabled slider turns gray and ignores input.
- [Custom Properties](https://3mo-esolutions.github.io/web-components/?path=/story/inputs-slider--custom-properties) — `--mo-slider-accent-color` colors the active track, the thumb and the value label.
- [Parts](https://3mo-esolutions.github.io/web-components/?path=/story/inputs-slider--parts) — The `thumb` part can be restyled from outside.

### Range Slider

- [Default](https://3mo-esolutions.github.io/web-components/?path=/story/inputs-range-slider--default)
- [Discrete](https://3mo-esolutions.github.io/web-components/?path=/story/inputs-range-slider--discrete) — `discrete` shows the values above the thumbs while they are dragged, and `ticks` marks every `step`.
- [Disabled](https://3mo-esolutions.github.io/web-components/?path=/story/inputs-range-slider--disabled) — A disabled range slider turns gray and ignores input.
- [Custom Properties](https://3mo-esolutions.github.io/web-components/?path=/story/inputs-range-slider--custom-properties) — `--mo-slider-accent-color` colors the active track, the thumbs and the value labels.
- [Parts](https://3mo-esolutions.github.io/web-components/?path=/story/inputs-range-slider--parts) — The `thumb` part styles both thumbs from outside.

## API

### `mo-slider`

#### Properties

| 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 |

#### Events

| 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 |

#### CSS custom properties

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

#### CSS parts

| Name | Description |
| --- | --- |
| `thumb` | The handle that is dragged |

### `mo-range-slider`

#### Properties

| 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 |

#### Events

| 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 |

#### CSS custom properties

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

#### CSS parts

| Name | Description |
| --- | --- |
| `thumb` | The handles that are dragged |

## Links

- [Documentation](https://3mo-esolutions.github.io/web-components/?path=/docs/inputs-slider--overview)
- [Changelog](https://3mo-esolutions.github.io/web-components/?path=/docs/inputs-slider--overview)
- [Source](https://github.com/3mo-esolutions/web-components/tree/main/packages/Slider)

## License

MIT © 3MO GmbH

---
_Source: https://npm.io/package/@3mo/slider · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._