A sketchy slider which allows user to select a value from a range by moving the slider thumb

[ This description is mirrored from README.md at github.com/wiredjs/wired-slider on 2019-05-10 ]

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

Learn about web components here.

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/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. input event fired when the user is changing the slider value.

Install

Link to this version
ImportedReleased 01 September 2017MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save wiredjs/wired-slider"#0.1.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 0.1.0

Dependencies

  • polymer#Polymer/polymer#^2.0.0
  • wired-lib#wiredjs/wired-lib#^0.1.1