Directory

← Back

paper-range-slider

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

Author

Rating

Popularity

<100

[ This description is mirrored from README.md at github.com/IftachSadeh/paper-range-slider on 2019-05-10 ]

Published on webcomponents.org

paper-range-slider - v1.0.4

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.


Compatibility

(Loading compatibility data...)

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#1.9 - 2
  • paper-input#PolymerElements/paper-input#1 - 2
  • paper-progress#PolymerElements/paper-progress#1 - 2
  • iron-flex-layout#PolymerElements/iron-flex-layout#1 - 2
  • paper-styles#PolymerElements/paper-styles#1 - 2
  • iron-behaviors#PolymerElements/iron-behaviors#1 - 2
  • paper-behaviors#PolymerElements/paper-behaviors#1 - 2
  • iron-a11y-keys-behavior#PolymerElements/iron-a11y-keys-behavior#1 - 2
  • iron-form-element-behavior#PolymerElements/iron-form-element-behavior#1 - 2
Released
2018-11-27
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Polymer 2.0+
Polymer 1.0+ in 0.2.9
Browser
Browser Independent

paper-range-slider - Vaadin Add-on Directory

A material design-style range-slider, composed of paper-slider elements paper-range-slider - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/IftachSadeh/paper-range-slider](https://github.com//IftachSadeh/paper-range-slider/blob/v1.0.4/README.md) on 2019-05-10 ]** [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/IftachSadeh/paper-range-slider) # paper-range-slider - v1.0.4 `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 ```bash 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: ```html ``` ### 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`. ```html ``` - The current position of the knobs (selected range of values) may be accessed by setting up a listener to the `updateValues` event: ```html ``` - One can programmatically set the selected range by e.g., ```javascript 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: ```javascript 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: ```javascript 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., ```javascript 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., ```html ``` or programmatically with ```javascript 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: ```javascript 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 ```html ``` or programmatically with ```javascript 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., ```javascript // 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. ---
Online