🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

paperwave-range-slider

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

paperwave-range-slider

paperwave-range-slider allows users to select a sub-range by moving the slider knobs.

1.0.6
latest
Version published
Maintainers
1
Created

Published on webcomponents.org

<paperwave-range-slider>

<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

Installation

npm install --save paperwave-range-slider

In a html file

<html>
  <head>
    <script type="module">
      import 'paperwave-range-slider/paperwave-range-slider.js';
    </script>
  </head>
  <body>
    <paperwave-range-slider
        min="0"
        max="150"
        lowValue="30"
        highValue="90"
        minInterval="20">
    </paperwave-range-slider>
  </body>
</html>

In a Polymer 3 element

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

class SampleElement extends PolymerElement {
  static get template() {
    return html`
      <paperwave-range-slider id="rangeSilder"
        min="0"
        max="150"
        lowValue="30"
        highValue="90"
        minInterval="20"
        pin
        on-low-value-changes="_lowValueHandler">
    </paperwave-range-slider>
    `;
  }
  _lowValueHandler (e) {
    console.log(e.detail);
  }
}
customElements.define('sample-element', SampleElement);

<paperwave-range-slider> supports most of the <paper-slider> 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:

// min-slider:
this.shadowRoot.querySelector('#<paperwave-range-slider ID>')
  .shadowRoot.querySelector('#min-slider');

// max-slider: 
this.shadowRoot.querySelector('#<paperwave-range-slider ID>')
  .shadowRoot.querySelector('#max-slider');

Thank you for your interest :)

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

FAQs

Package last updated on 02 Jun 2019

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts