@belomx/paper-range-slider
v1.0.3
Published
A material design-style range-slider, composed of paper-slider elements
Downloads
118
Maintainers
Readme
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
andmax
to specify the limits of values for the slider (the lower and upper bounds). - Use
value-min
andvalue-max
to set the initial position of the two knobs (the selected range of values). - Use
value-diff-min
andvalue-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 setmyMin
and/ormyMax
tonull
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
andtapValueMove
properties control what happens when a user taps the slider (not e.g., relevant for when the user drags the selected range). ThetapValueExtend
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. FinallytapValueMove
supersedes thetapValueExtend
andtapValueReduce
properties if set (it isfalse
by default). IftapValueMove
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 thealwaysShowPin
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 apaper-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.