Napolean Paced Mischeviously

    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

    Install

    npm i wired-slider

    DownloadsWeekly Downloads

    31

    Version

    2.1.2

    License

    MIT

    Unpacked Size

    14.6 kB

    Total Files

    7

    Last publish

    Collaborators

    • shihn