wired-slider - Vaadin Add-on Directory
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](https://github.com//wiredjs/wired-slider/blob/v0.5.4/README.md) on 2019-05-10 ]**
![wired slider](https://wiredjs.github.io/wired-elements/images/slider.png)
# 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](http://wiredjs.com/)
Learn about web components [here](https://www.webcomponents.org/introduction).
## Usage
Add wired-slider to your project:
```
npm i wired-slider
```
Import wired-slider definition into your HTML page:
```html
```
Or into your module script:
```javascript
import { WiredSlider } from "wired-slider"
```
Use it in your web page:
```html
```
### 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.
Online DemoDocumentation
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