@duskmoon-dev/el-slider

A customizable range slider component built with Web Components.

Installation

bun add @duskmoon-dev/el-slider

Usage

Auto-Register

import '@duskmoon-dev/el-slider/register';

<el-dm-slider value="50" min="0" max="100"></el-dm-slider>

Manual Registration

import { ElDmSlider, register } from '@duskmoon-dev/el-slider';

// Register with default tag name
register();

// Or register with custom tag name
customElements.define('my-slider', ElDmSlider);

Sizes

Size	Description
`sm`	Small slider
`md`	Medium slider (default)
`lg`	Large slider

Attributes

Attribute	Type	Default	Description
`value`	`number`	`0`	Current value
`min`	`number`	`0`	Minimum value
`max`	`number`	`100`	Maximum value
`step`	`number`	`1`	Step increment
`disabled`	`boolean`	`false`	Disable the slider
`size`	`string`	`'md'`	Size variant: `sm`, `md`, `lg`
`color`	`string`	`'primary'`	Color variant
`show-value`	`boolean`	`false`	Show current value

CSS Parts

Part	Description
`slider`	The main slider container
`track`	The track/rail
`thumb`	The draggable thumb

Events

Event	Detail	Description
`change`	`{ value: number }`	Fired when value changes (on release)
`input`	`{ value: number }`	Fired during dragging

Examples

Basic

<el-dm-slider></el-dm-slider>

With Range

<el-dm-slider min="0" max="100" value="25"></el-dm-slider>

With Step

<el-dm-slider min="0" max="100" step="10"></el-dm-slider>

Show Value

<el-dm-slider show-value></el-dm-slider>

Sizes

<el-dm-slider size="sm"></el-dm-slider>
<el-dm-slider size="md"></el-dm-slider>
<el-dm-slider size="lg"></el-dm-slider>

Disabled

<el-dm-slider disabled value="50"></el-dm-slider>

License

MIT