paperwave-range-slider


\

\ allows users to select a sub-range by moving the slider knobs. It builds up on the official paper-slider component and provides most of its styling properties. The interactive nature of the slider makes it a great choice for picking price or year ranges.

Demo

Usage

$3

``
npm install --save paperwave-range-slider
`

$3

`html





min="0"
max="150"
lowValue="30"
highValue="90"
minInterval="20">



`

$3

`js
import {PolymerElement, html} from '@polymer/polymer';
import 'paperwave-range-slider/paperwave-range-slider.js';

class SampleElement extends PolymerElement {
static get template() {
return html
min="0"
max="150"
lowValue="30"
highValue="90"
minInterval="20"
pin
on-low-value-changes="_lowValueHandler">

;
}
_lowValueHandler (e) {
console.log(e.detail);
}
}
customElements.define('sample-element', SampleElement);
`

\ supports most of the \ style properties: paper-slider docs

The element is composed of two paper-slider elements. One for the low-value and one for the high-value. You can target them both individually:
`js
// min-slider:
this.shadowRoot.querySelector('#')
.shadowRoot.querySelector('#min-slider');

// max-slider:
this.shadowRoot.querySelector('#')
.shadowRoot.querySelector('#max-slider');

``

$3

If you encounter any issues feel free to open an issue on github and I will try to fix them asap.