npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@belomx/paper-range-slider

v1.0.3

Published

A material design-style range-slider, composed of paper-slider elements

Downloads

153

Readme

Published on webcomponents.org

paper-range-slider - v1.0.3

paper-range-slider allows the user to select a range of values within a given (possibly wider) range. values are selected by moving the position of two knobs, or by dragging the selected range of values within the allowed limits. paper-range-slider - v1.* is compatible with Polymer v2.* (For Polymer v1.*, use paper-range-slider - v0.2.7.)

Bower installation

Do either

bower install IftachSadeh/paper-range-slider

or add the following to your bower.json:

"dependencies": {
  "paper-range-slider": "git://github.com/IftachSadeh/paper-range-slider"
},

Examples:

Basic use:

<paper-range-slider></paper-range-slider>

Additional options

  • Use min and max to specify the limits of values for the slider (the lower and upper bounds).
  • Use value-min and value-max to set the initial position of the two knobs (the selected range of values).
  • Use value-diff-min and value-diff-max to set the minimal and maximal allowed difference between the lower and upper selected values.
  • Use always-show-pin to never hide the pins.
  • The following options apply, as for paper-slider: snaps, pin, step, disabled.
<paper-range-slider snaps pin step='1' min='0' max='100' value-diff-min="10" value-diff-max="50" value-min='30' value-max='60'></paper-range-slider>
  • The current position of the knobs (selected range of values) may be accessed by setting up a listener to the updateValues event:
<paper-range-slider id='myPaperRangeSliderId'></paper-range-slider>
<script>
    document.querySelector("#myPaperRangeSliderId").addEventListener('updateValues', function (customEvent) {
    console.log(' - current min/max values: ',this.valueMin,this.valueMax)
    });
</script>
  • One can programmatically set the selected range by e.g.,

    window.addEventListener('WebComponentsReady', function(e) {
        var myMin = 10, myMax = 90, myEventName = 'setValues';
        document.querySelector("#myPaperRangeSliderId").setValues(myMin,myMax,myEventName);
    });

    The third argument (myEventName) is an optional event name, which will be propagated to e.g., on-value-min-changed events. It is allowed to set myMin and/or myMax to null or to a value outside of the allowed range, in order to ignore them, e.g., use the following to only change the lower value:

    document.querySelector("#myPaperRangeSliderId").setValues(10,null);
  • Likewise, one can set the minimal and maximal values of the slider (the lower and upper bounds), the step-size, the minimal and maximal difference between selected values, and the disabled state. These correspond respectively to the following:

    document.querySelector("#myPaperRangeSliderId").setMin(myMin);
    document.querySelector("#myPaperRangeSliderId").setMax(myMax);
    document.querySelector("#myPaperRangeSliderId").setStep(myStep);
    document.querySelector("#myPaperRangeSliderId").setValueDiffMin(myValueDiffMin);
    document.querySelector("#myPaperRangeSliderId").setValueDiffMax(myValueDiffMax);
    document.querySelector("#myPaperRangeSliderId").setDisabled(isDisabled);
  • One can get the ratio of the current slider values in percent (within [0,1]) by e.g.,

      var ratioMinMax = document.querySelector("#myPaperRangeSliderId").getRatio();
  • The tapValueExtend, tapValueReduce and tapValueMove properties control what happens when a user taps the slider (not e.g., relevant for when the user drags the selected range). The tapValueExtend property (true by default) allows to modify the selected range of values, by tapping on the slider below or above the selected range. On the other hand, tapValueReduce (false by default) allows to modify the selected range of values, by tapping on the slider within the selected range. Finally tapValueMove supersedes the tapValueExtend and tapValueReduce properties if set (it is false by default). If tapValueMove is enabled, tapping the slider will update the selected range, while keeping the same difference between valueMin and valueMax. One may set these properties by e.g.,

<paper-range-slider tap-value-reduce step='1' value-min='20' value-max='70' max='100' min='0'></paper-range-slider>    

or programmatically with

document.querySelector("#myPaperRangeSliderId").setTapValueExtend(isTapValueExtend);
document.querySelector("#myPaperRangeSliderId").setTapValueReduce(isTapValueReduce);
document.querySelector("#myPaperRangeSliderId").setTapValueMove(isTapValueMove);
  • The above properties which do not have an explicit method, may be reset directly. In order for the changes to take effect properly, use the init() method. For instance, to change the alwaysShowPin option of an already-defined slider, do:

    document.querySelector("#myPaperRangeSliderId").alwaysShowPin = true;
    document.querySelector("#myPaperRangeSliderId").init();
  • It is possible to "revert" the paper-range-slider into a paper-slider (and back again) by

<paper-range-slider single-slider></paper-range-slider>

or programmatically with

document.querySelector("#myPaperRangeSliderId").setSingleSlider(isSingleSlider);

In this case, the minimal value of the range is effectively ignored. The value of the single slider may now be manipulated with e.g.,

// set a new value for the single slider
var setVal = 90;
document.querySelector("#myPaperRangeSliderId").setValues(null,setVal);
// get the current value of the single slider
var valNow = document.querySelector("#myPaperRangeSliderId").valueMax;

See also the examples in test/basic-test.html.

Styling

The following custom properties are available for styling:

Custom property | Description | Default ----------------|-------------|---------- --paper-range-slider-lower-color | color for range below selected range | --paper-grey-400 --paper-range-slider-active-color | color of selected range | --primary-color --paper-range-slider-higher-color | color for range above selected range | --paper-grey-400 --paper-range-slider-knob-color | color of knobs | --primary-color --paper-range-slider-pin-color | color of pins | --primary-color --paper-range-slider-pin-start-color | The color of the pin at the far left | --paper-grey-400 --paper-range-slider-knob-start-color | The fill color of the knob at the far left | transparent --paper-range-slider-knob-start-border-color | The border color of the knob at the far left | --paper-grey-400


The license for this code is the The MIT License (MIT), as given in LICENSE.txt.