wired-slider
TypeScript icon, indicating that this package has built-in type declarations

2.1.2 • Public • Published

wired slider

wired-slider

Hand-drawn sketchy slider web component which allows user to select a value from a range by moving the slider thumb.

Range can be set using the min, max value. Default range is 0-100.

For demo and view the complete set of wired-elememts: wiredjs.com

Usage

Add wired-slider to your project:

npm i wired-slider

Import wired-slider definition into your HTML page:

<script type="module" src="wired-slider/lib/wired-slider.js"></script>

Or into your module script:

import { WiredSlider } from "wired-slider"

Use it in your web page:

<wired-slider></wired-slider>
<wired-slider disabled></wired-slider>
<wired-slider knobradius="15" value="10" min="5" max="15"></wired-slider>

Properties

value - Numeric value of the slider.

min - Minimum value of the slider. Default is 0.

max - Maximum value of the slider. Default ia 100.

knobradius - Radius of the knob of the slider.

Custom CSS Variables

--wired-slider-knob-zero-color Color of the knob when the value is at minimum.

--wired-slider-knob-color Color of the knob when the value is NOT at minimum.

--wired-slider-bar-color Color of the bar on which the knob slides.

Events

change event fired when the user changes the slider value.

License

MIT License (c) Preet Shihn

Package Sidebar

Install

npm i wired-slider

Weekly Downloads

18

Version

2.1.2

License

MIT

Unpacked Size

14.6 kB

Total Files

7

Last publish

Collaborators

  • shihn