wired-slider
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
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.
Links
Compatibility
Was this helpful? Need more help?
Leave a comment or a question below. You can also join
the chat on Discord or
ask questions on StackOverflow.
Version
Dependencies
- polymer#Polymer/polymer#^2.0.0
- wired-lib#wiredjs/wired-lib#^0.1.1
- Released
- 2017-09-01
- Maturity
- IMPORTED
- License
- MIT License
Compatibility
- Framework
- Polymer 2.0+
- Browser
- Browser Independent
wired-slider - Vaadin Add-on Directory
A sketchy slider which allows user to select a value from a range by moving the slider thumbDocumentation
GitHub Homepage
View on GitHub
Issue tracker
wired-slider version 0.1.0
### Dependencies
* polymer#Polymer/polymer#^2.0.0
* wired-lib#wiredjs/wired-lib#^0.1.1