{"_id":"@belomx/paper-range-slider","_rev":"1-99d03d3b76aec55eb421cc057b7fbe06","name":"@belomx/paper-range-slider","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.3":{"description":"A material design-style range-slider, composed of paper-slider elements","keywords":["web-component","web-components","polymer","slider"],"homepage":"https://github.com/IftachSadeh/paper-range-slider/","name":"@belomx/paper-range-slider","version":"1.0.3","resolutions":{"inherits":"2.0.3","samsam":"1.1.3","supports-color":"3.1.2","type-detect":"1.0.0"},"main":"paper-range-slider.js","author":{"name":"Iftach Sadeh","email":"iftach.sadeh@desy.de"},"license":"MIT","dependencies":{"@polymer/iron-a11y-keys-behavior":"^3.0.0-pre.18","@polymer/iron-behaviors":"^3.0.0-pre.18","@polymer/iron-flex-layout":"^3.0.0-pre.18","@polymer/iron-form-element-behavior":"^3.0.0-pre.18","@polymer/paper-behaviors":"^3.0.0-pre.18","@polymer/paper-input":"^3.0.0-pre.18","@polymer/paper-progress":"^3.0.0-pre.18","@polymer/paper-styles":"^3.0.0-pre.18","@polymer/polymer":"^3.0.0","@webcomponents/webcomponentsjs":"^2.0.0","paper-range-slider":"^3.0.0"},"devDependencies":{"@polymer/iron-component-page":"^3.0.0-pre.18","@polymer/iron-demo-helpers":"^3.0.0-pre.18","@polymer/test-fixture":"^3.0.0-pre.18","@polymer/iron-test-helpers":"^3.0.0-pre.18","polymer-cli":"^1.7.0-pre.17","wct-browser-legacy":"^1.0.1"},"directories":{"test":"test"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+https://github.com/belomx/paper-range-slider.git"},"bugs":{"url":"https://github.com/belomx/paper-range-slider/issues"},"gitHead":"5aeb8653c891a9e03615893f7960b0073ed40108","_id":"@belomx/paper-range-slider@1.0.3","_nodeVersion":"14.3.0","_npmVersion":"6.14.5","dist":{"integrity":"sha512-yHBUJ9aHPaeRkqbIpaH6BTr1VuJsKSL6ue7fQ7TFHd6WhNSVwL5MQHnmc5wxTM9KvwqLDyuWJ33V5g/czXZBZA==","shasum":"455a98d9a2ff3bed9524f4c13e45b22379b309ae","tarball":"https://registry.npmjs.org/@belomx/paper-range-slider/-/paper-range-slider-1.0.3.tgz","fileCount":12,"unpackedSize":160909,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXj9CCRA9TVsSAnZWagAAx+AP/2SXKQoJHmazyLzZBIsJ\nnUjbd0crsHUeOpPJqZDiqBpfjd4moKCHTKsMtzBnslkL00thtmqZFWFGtc0V\nwuU0QKTCa89JW7dsostdVy893cE/mZVCLSoqamou6lk9JeesILHnP/Lm0X+g\noLu/QhLkVqM5zQLPGJ9+a5I4G1Bb52BPRiWx16h4fnXu5q2XIfXXpEj3KhIC\nHc7m6iePNMbWXM2d3oc3RNQq4cv0qObyWv3RV32R4MclPPoAepbcOJytPlnA\nlhFWYNg4yvWEnwMeZd+bNqIPqDEDrpPqcK63OOKThFZye/ilEQKUNfzdw3l2\nJ9Sf2AO8E/plhtQ4WBpnslD024Lf3HzjmmgDHS2wDx5ES48UB0boUwr8lxyH\nzjgFrxRk9irv1HcZ+FSeFRvbNTV7ESaY7kActgf5413euzfSb5oW049INV5K\nXIM51eFdi34T1hNX86N3IFecyZj7ybuKM1NqK02hnFhYGblyxXkgKWnnILwg\n7GacaJt0pD7z8JkBUW6M8le/boVeRqOl3H+LdM8Wp338ArCfG7lHkkeJmo79\nojdppVOJdgWru1G05tHN04Vz6U7/c8Lp6Gfl7Zy80sjy3vs/gMVp00r/3xAd\nnuNMPWLCkNJf1u8+qUMxQhNox9UL1nL2/QO1Xhy8qCazmqAxiAmfIbtFvRRq\nLvPt\r\n=P9pk\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIEGqKmn8jn9aka8Cw5VEyHovPqmatoL6ePRKDYwAfNVvAiEApxDFB8zbyhFdqcDpAL23O/b3Hsxxx7MfHdN3esoDeXo="}]},"maintainers":[{"name":"belomx","email":"danilo.q.freire@gmail.com"}],"_npmUser":{"name":"belomx","email":"danilo.q.freire@gmail.com"},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/paper-range-slider_1.0.3_1600012098323_0.7420668855624546"},"_hasShrinkwrap":false}},"time":{"created":"2020-09-13T15:48:18.291Z","1.0.3":"2020-09-13T15:48:18.458Z","modified":"2022-04-04T18:20:33.643Z"},"maintainers":[{"name":"belomx","email":"danilo.q.freire@gmail.com"}],"description":"A material design-style range-slider, composed of paper-slider elements","homepage":"https://github.com/IftachSadeh/paper-range-slider/","keywords":["web-component","web-components","polymer","slider"],"repository":{"type":"git","url":"git+https://github.com/belomx/paper-range-slider.git"},"author":{"name":"Iftach Sadeh","email":"iftach.sadeh@desy.de"},"bugs":{"url":"https://github.com/belomx/paper-range-slider/issues"},"license":"MIT","readme":"[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/IftachSadeh/paper-range-slider)\n\n# paper-range-slider - v1.0.3\n\n`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`.)\n\n## Bower installation\nDo either\n```bash\nbower install IftachSadeh/paper-range-slider\n```\nor add the following to your `bower.json`:\n```\n\"dependencies\": {\n \"paper-range-slider\": \"git://github.com/IftachSadeh/paper-range-slider\"\n},\n```\n\n## Examples:\n\n### Basic use:\n\n\n```html\n\n```\n\n### Additional options\n\n- Use `min` and `max` to specify the limits of values for the slider (the lower and upper bounds).\n- Use `value-min` and `value-max` to set the initial position of the two knobs (the selected range of values).\n- Use `value-diff-min` and `value-diff-max` to set the minimal and maximal allowed difference between the lower and upper selected values.\n- Use `always-show-pin` to never hide the pins.\n- The following options apply, as for paper-slider: `snaps`, `pin`, `step`, `disabled`.\n\n\n ```html\n \n ```\n\n- The current position of the knobs (selected range of values) may be accessed by setting up a listener to the `updateValues` event:\n\n\n ```html\n \n \n ```\n\n- One can programmatically set the selected range by e.g., \n ```javascript\n window.addEventListener('WebComponentsReady', function(e) {\n var myMin = 10, myMax = 90, myEventName = 'setValues';\n document.querySelector(\"#myPaperRangeSliderId\").setValues(myMin,myMax,myEventName);\n });\n ```\n The third argument (`myEventName`) is an optional event name, which will be propagated to e.g., `on-value-min-changed` events.\n 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:\n ```javascript\n document.querySelector(\"#myPaperRangeSliderId\").setValues(10,null);\n ```\n\n- 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:\n ```javascript\n document.querySelector(\"#myPaperRangeSliderId\").setMin(myMin);\n document.querySelector(\"#myPaperRangeSliderId\").setMax(myMax);\n document.querySelector(\"#myPaperRangeSliderId\").setStep(myStep);\n document.querySelector(\"#myPaperRangeSliderId\").setValueDiffMin(myValueDiffMin);\n document.querySelector(\"#myPaperRangeSliderId\").setValueDiffMax(myValueDiffMax);\n document.querySelector(\"#myPaperRangeSliderId\").setDisabled(isDisabled);\n ```\n\n- One can get the ratio of the current slider values in percent (within `[0,1]`) by e.g., \n ```javascript\n var ratioMinMax = document.querySelector(\"#myPaperRangeSliderId\").getRatio();\n ```\n\n- 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.,\n \n\n ```html\n \n ```\n or programmatically with\n ```javascript\n document.querySelector(\"#myPaperRangeSliderId\").setTapValueExtend(isTapValueExtend);\n document.querySelector(\"#myPaperRangeSliderId\").setTapValueReduce(isTapValueReduce);\n document.querySelector(\"#myPaperRangeSliderId\").setTapValueMove(isTapValueMove);\n ```\n\n- 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:\n ```javascript\n document.querySelector(\"#myPaperRangeSliderId\").alwaysShowPin = true;\n document.querySelector(\"#myPaperRangeSliderId\").init();\n ```\n\n- It is possible to \"revert\" the `paper-range-slider` into a `paper-slider` (and back again) by\n \n\n ```html\n \n ```\n\n or programmatically with\n ```javascript\n document.querySelector(\"#myPaperRangeSliderId\").setSingleSlider(isSingleSlider);\n ```\n 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.,\n ```javascript\n // set a new value for the single slider\n var setVal = 90;\n document.querySelector(\"#myPaperRangeSliderId\").setValues(null,setVal);\n // get the current value of the single slider\n var valNow = document.querySelector(\"#myPaperRangeSliderId\").valueMax;\n ```\n\n See also the examples in `test/basic-test.html`.\n\n## Styling\n\nThe following custom properties are available for styling:\n\nCustom property | Description | Default\n----------------|-------------|----------\n`--paper-range-slider-lower-color` | color for range below selected range | `--paper-grey-400`\n`--paper-range-slider-active-color` | color of selected range | `--primary-color`\n`--paper-range-slider-higher-color` | color for range above selected range | `--paper-grey-400`\n`--paper-range-slider-knob-color` | color of knobs | `--primary-color`\n`--paper-range-slider-pin-color` | color of pins | `--primary-color`\n`--paper-range-slider-pin-start-color` | The color of the pin at the far left | `--paper-grey-400`\n`--paper-range-slider-knob-start-color` | The fill color of the knob at the far left | `transparent`\n`--paper-range-slider-knob-start-border-color` | The border color of the knob at the far left | `--paper-grey-400`\n\n\n---\n\nThe license for this code is the The MIT License (MIT), as given in LICENSE.txt.\n\n---","readmeFilename":"README.md"}