@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