react-range-slider-input - npm Package Compare versions

Comparing version 0.1.1 to 1.0.3

dist/components/RangeSlider.js

 "use strict";
 
+require("core-js/modules/web.dom-collections.iterator.js");
+
 Object.defineProperty(exports, "__esModule", {
@@ -10,4 +12,6 @@ value: true
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
+var _clsx = _interopRequireDefault(require("clsx"));
+
 require("./index.css");
@@ -17,2 +21,6 @@
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 // Options
@@ -33,9 +41,10 @@ const _min = 'min';
 const _dataDisabled = 'data-disabled';
+const _current = 'current';
 const _document = document;
 const _parseFloat = parseFloat;
 const _mathAbsolute = Math.abs;
-const _getComputedStyle = window.getComputedStyle;
 const _setAttribute = 'setAttribute';
 const _removeAttribute = 'removeAttribute';
 const _addEventListener = 'addEventListener';
+const _getComputedStyle = window.getComputedStyle;
 const _listenerOptions = {
@@ -46,9 +55,9 @@ passive: false,
 
-class RangeSlider extends _react.default.PureComponent {
+class RangeSlider extends _react.PureComponent {
   constructor() {
     super();
-    this.element = /*#__PURE__*/_react.default.createRef();
-    this.input = [/*#__PURE__*/_react.default.createRef(), /*#__PURE__*/_react.default.createRef()];
-    this.thumb = [/*#__PURE__*/_react.default.createRef(), /*#__PURE__*/_react.default.createRef()];
-    this.range = /*#__PURE__*/_react.default.createRef();
+    this.element = /*#__PURE__*/(0, _react.createRef)();
+    this.input = [/*#__PURE__*/(0, _react.createRef)(), /*#__PURE__*/(0, _react.createRef)()];
+    this.thumb = [/*#__PURE__*/(0, _react.createRef)(), /*#__PURE__*/(0, _react.createRef)()];
+    this.range = /*#__PURE__*/(0, _react.createRef)();
     this.isComponentMounted = false;
@@ -96,3 +105,3 @@ this.options = {};
 
-      this.element.current[_addEventListener]('pointerdown', e => {
+      this.element[_current][_addEventListener]('pointerdown', e => {
         this.elementFocused(e);
@@ -103,8 +112,8 @@ }, _listenerOptions); // Add listeners to <thumb>s and set [data-disabled] on disabled <thumb>s
       this.thumb.forEach((t, i) => {
-        t.current[_addEventListener]('pointerdown', e => {
-          this.initiateThumbDrag(e, i, t.current);
+        t[_current][_addEventListener]('pointerdown', e => {
+          this.initiateThumbDrag(e, i, t[_current]);
         }, _listenerOptions);
       }); // Add listeners to <range>
 
-      this.range.current[_addEventListener]('pointerdown', e => {
+      this.range[_current][_addEventListener]('pointerdown', e => {
         this.initiateRangeDrag(e);
@@ -120,7 +129,7 @@ }, _listenerOptions); // Add global listeners
         if (this.isDragging) {
-          this.thumb[0].current[_removeAttribute](_dataFocused);
+          this.thumb[0][_current][_removeAttribute](_dataFocused);
 
-          this.thumb[1].current[_removeAttribute](_dataFocused);
+          this.thumb[1][_current][_removeAttribute](_dataFocused);
 
-          this.range.current[_removeAttribute](_dataFocused);
+          this.range[_current][_removeAttribute](_dataFocused);
 
@@ -169,5 +178,5 @@ this.isDragging = false;
       if (this.options[_thumbsDisabled][i === 1 ? this.index[_max] : this.index[_min]]) {
-        t.current[_setAttribute](_dataDisabled, '');
+        t[_current][_setAttribute](_dataDisabled, '');
       } else {
-        t.current[_removeAttribute](_dataDisabled);
+        t[_current][_removeAttribute](_dataDisabled);
       }
@@ -177,5 +186,5 @@ });
     if (this.options[_disabled]) {
-      this.element.current[_setAttribute](_dataDisabled, '');
+      this.element[_current][_setAttribute](_dataDisabled, '');
     } else {
-      this.element.current[_removeAttribute](_dataDisabled);
+      this.element[_current][_removeAttribute](_dataDisabled);
     }
@@ -236,11 +245,11 @@ }
     const currentValue = {
-      min: this.input[this.index[_min]].current[_value],
-      max: this.input[this.index[_max]].current[_value]
+      min: this.input[this.index[_min]][_current][_value],
+      max: this.input[this.index[_max]][_current][_value]
     };
     val = val || currentValue;
     this.sliderValue = val;
-    this.input[this.index[_min]].current[_value] = val[_min];
-    this.input[this.index[_max]].current[_value] = this.thumbDrag || forceSet ? val[_max] : val[_min] + this.rangeWidth;
-    this.value[_min] = +this.input[this.index[_min]].current[_value];
-    this.value[_max] = +this.input[this.index[_max]].current[_value];
+    this.input[this.index[_min]][_current][_value] = val[_min];
+    this.input[this.index[_max]][_current][_value] = this.thumbDrag || forceSet ? val[_max] : val[_min] + this.rangeWidth;
+    this.value[_min] = +this.input[this.index[_min]][_current][_value];
+    this.value[_max] = +this.input[this.index[_max]][_current][_value];
 
@@ -251,4 +260,4 @@ if (forceSet) {
         this.switchIndex();
-        this.value[_min] = +this.input[this.index[_min]].current[_value];
-        this.value[_max] = +this.input[this.index[_max]].current[_value];
+        this.value[_min] = +this.input[this.index[_min]][_current][_value];
+        this.value[_max] = +this.input[this.index[_max]][_current][_value];
       }
@@ -261,7 +270,7 @@
 
-    if (currentValue[_min] !== this.input[this.index[_min]].current[_value] || forceSet) {
+    if (currentValue[_min] !== this.input[this.index[_min]][_current][_value] || forceSet) {
       valueSet = true;
     }
 
-    if (currentValue[_max] !== this.input[this.index[_max]].current[_value] || forceSet) {
+    if (currentValue[_max] !== this.input[this.index[_max]][_current][_value] || forceSet) {
       valueSet = true;
@@ -286,9 +295,9 @@ } // Update the <thumb>s and <range> positions and widths everytime a value is set
 
-    this.thumb[this.index[_min]].current[_removeAttribute](_dataUpper);
+    this.thumb[this.index[_min]][_current][_removeAttribute](_dataUpper);
 
-    this.thumb[this.index[_max]].current[_removeAttribute](_dataLower);
+    this.thumb[this.index[_max]][_current][_removeAttribute](_dataLower);
 
-    this.thumb[this.index[_min]].current[_setAttribute](_dataLower, '');
+    this.thumb[this.index[_min]][_current][_setAttribute](_dataLower, '');
 
-    this.thumb[this.index[_max]].current[_setAttribute](_dataUpper, '');
+    this.thumb[this.index[_max]][_current][_setAttribute](_dataUpper, '');
 
@@ -304,3 +313,3 @@ if (this.thumbDrag) {
     if (this.thumbIndex === this.index[_min]) {
-      if (this.input[this.thumbIndex].current[_value] > this.value[_max]) {
+      if (this.input[this.thumbIndex][_current][_value] > this.value[_max]) {
         this.switchIndex();
@@ -312,3 +321,3 @@ indexSwitched = true;
     if (this.thumbIndex === this.index[_max]) {
-      if (this.input[this.thumbIndex].current[_value] < this.value[_min]) {
+      if (this.input[this.thumbIndex][_current][_value] < this.value[_min]) {
         this.switchIndex();
@@ -325,11 +334,11 @@ indexSwitched = true;
   updateThumbs() {
-    this.thumb[this.index[_min]].current.style.left = "calc(".concat((this.value[_min] - this.options[_min]) / this.maxWidth * 100, "% + ").concat((0.5 - (this.value[_min] - this.options[_min]) / this.maxWidth) * this.thumbWidth[_min], "px)");
-    this.thumb[this.index[_max]].current.style.left = "calc(".concat((this.value[_max] - this.options[_min]) / this.maxWidth * 100, "% + ").concat((0.5 - (this.value[_max] - this.options[_min]) / this.maxWidth) * this.thumbWidth[_max], "px)");
+    this.thumb[this.index[_min]][_current].style.left = "calc(".concat((this.value[_min] - this.options[_min]) / this.maxWidth * 100, "% + ").concat((0.5 - (this.value[_min] - this.options[_min]) / this.maxWidth) * this.thumbWidth[_min], "px)");
+    this.thumb[this.index[_max]][_current].style.left = "calc(".concat((this.value[_max] - this.options[_min]) / this.maxWidth * 100, "% + ").concat((0.5 - (this.value[_max] - this.options[_min]) / this.maxWidth) * this.thumbWidth[_max], "px)");
   }
 
   updateRange() {
-    const deltaLeft = (0.5 - (this.value[_min] - this.options[_min]) / this.maxWidth) * this.thumbWidth[_min] / this.element.current.clientWidth;
-    const deltaWidth = (0.5 - (this.value[_max] - this.options[_min]) / this.maxWidth) * this.thumbWidth[_max] / this.element.current.clientWidth;
-    this.range.current.style.left = "".concat(((this.value[_min] - this.options[_min]) / this.maxWidth + deltaLeft) * 100, "%");
-    this.range.current.style.width = "".concat(((this.value[_max] - this.options[_min]) / this.maxWidth - (this.value[_min] - this.options[_min]) / this.maxWidth - deltaLeft + deltaWidth) * 100, "%");
+    const deltaLeft = (0.5 - (this.value[_min] - this.options[_min]) / this.maxWidth) * this.thumbWidth[_min] / this.element[_current].clientWidth;
+    const deltaWidth = (0.5 - (this.value[_max] - this.options[_min]) / this.maxWidth) * this.thumbWidth[_max] / this.element[_current].clientWidth;
+    this.range[_current].style.left = "".concat(((this.value[_min] - this.options[_min]) / this.maxWidth + deltaLeft) * 100, "%");
+    this.range[_current].style.width = "".concat(((this.value[_max] - this.options[_min]) / this.maxWidth - (this.value[_min] - this.options[_min]) / this.maxWidth - deltaLeft + deltaWidth) * 100, "%");
   }
@@ -344,8 +353,8 @@
   syncThumbWidth() {
-    this.thumbWidth[_min] = _parseFloat(_getComputedStyle(this.thumb[this.index[_min]].current).width);
-    this.thumbWidth[_max] = _parseFloat(_getComputedStyle(this.thumb[this.index[_max]].current).width);
+    this.thumbWidth[_min] = _parseFloat(_getComputedStyle(this.thumb[this.index[_min]][_current]).width);
+    this.thumbWidth[_max] = _parseFloat(_getComputedStyle(this.thumb[this.index[_max]][_current]).width);
   }
 
   currentPosition(e, node) {
-    return (node.offsetLeft + (e["client".concat(this.options[_orientation] === 'vertical' ? 'Y' : 'X')] - node.getBoundingClientRect()[this.options[_orientation] === 'vertical' ? 'top' : 'left']) - (this.thumbDrag ? (0.5 - (this.value[this.thumbDrag] - this.options[_min]) / this.maxWidth) * this.thumbWidth[this.thumbDrag] : 0)) / this.element.current.clientWidth * this.maxWidth + this.options[_min];
+    return (node.offsetLeft + (e["client".concat(this.options[_orientation] === 'vertical' ? 'Y' : 'X')] - node.getBoundingClientRect()[this.options[_orientation] === 'vertical' ? 'top' : 'left']) - (this.thumbDrag ? (0.5 - (this.value[this.thumbDrag] - this.options[_min]) / this.maxWidth) * this.thumbWidth[this.thumbDrag] : 0)) / this.element[_current].clientWidth * this.maxWidth + this.options[_min];
   }
@@ -371,3 +380,3 @@
     if (setFocus) {
-      let currPos = this.currentPosition(e, this.range.current);
+      let currPos = this.currentPosition(e, this.range[_current]);
 
@@ -388,3 +397,3 @@ if (currPos < 0) {
           }, true);
-          this.initiateThumbDrag(e, this.index[_max], this.thumb[this.index[_max]].current);
+          this.initiateThumbDrag(e, this.index[_max], this.thumb[this.index[_max]][_current]);
         }
@@ -397,3 +406,3 @@ } else if (this.options[_thumbsDisabled][1]) {
           }, true);
-          this.initiateThumbDrag(e, this.index[_min], this.thumb[this.index[_min]].current);
+          this.initiateThumbDrag(e, this.index[_min], this.thumb[this.index[_min]][_current]);
         }
@@ -416,3 +425,3 @@ } else {
 
-        this.initiateThumbDrag(e, nearestThumbIndex, this.thumb[nearestThumbIndex].current);
+        this.initiateThumbDrag(e, nearestThumbIndex, this.thumb[nearestThumbIndex][_current]);
       }
@@ -430,3 +439,3 @@ }
 
-      this.thumb[i].current[_setAttribute](_dataFocused, '');
+      this.thumb[i][_current][_setAttribute](_dataFocused, '');
     }
@@ -439,7 +448,7 @@ }
       this.rangeWidth = this.value[_max] - this.value[_min];
-      this.startPos = this.currentPosition(e, this.range.current);
+      this.startPos = this.currentPosition(e, this.range[_current]);
       this.thumbDrag = false;
       this.isDragging = true;
 
-      this.range.current[_setAttribute](_dataFocused, '');
+      this.range[_current][_setAttribute](_dataFocused, '');
     }
@@ -455,3 +464,3 @@ }
     if (this.isDragging) {
-      const lastPos = this.currentPosition(e, this.range.current);
+      const lastPos = this.currentPosition(e, this.range[_current]);
       const delta = lastPos - this.startPos;
@@ -544,3 +553,3 @@ let min = this.value[_min];
   setDefaultIfNotSet(property, defaultValue) {
-    this.options[property] = Object.prototype.hasOwnProperty.call(this.props, property) ? this.props[property] : defaultValue;
+    this.options[property] = {}.hasOwnProperty.call(this.props, property) ? this.props[property] : defaultValue;
   }
@@ -563,3 +572,3 @@
       ref: this.element,
-      className: "range-slider"
+      className: (0, _clsx.default)('range-slider', this.props.className)
     }, /*#__PURE__*/_react.default.createElement("input", {
@@ -566,0 +575,0 @@ ref: this.input[0],

package.json

 {
   "name": "react-range-slider-input",
-  "version": "0.1.1",
+  "version": "1.0.3",
   "private": false,
-  "description": "React component for range-slider-input",
+  "description": "React component wrapper for range-slider-input",
   "author": "Utkarsh Verma",
@@ -27,3 +27,34 @@ "keywords": [
     "url": "git+https://github.com/n3r4zzurr0/react-range-slider-input.git"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "NODE_ENV=production babel src/lib --out-dir dist --copy-files",
+    "eject": "react-scripts eject",
+    "test": "standard"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.17.10",
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
+    "react-scripts": "5.0.1",
+    "standard": "^17.0.0"
+  },
+  "dependencies": {
+    "clsx": "^1.1.1",
+    "core-js": "^3.22.4"
   }
 }

README.md

@@ -0,3 +1,47 @@
+[travis-image]: https://img.shields.io/travis/n3r4zzurr0/react-range-slider-input/master.svg
+[travis-url]: https://app.travis-ci.com/github/n3r4zzurr0/react-range-slider-input
+[npm-image]: https://img.shields.io/npm/v/react-range-slider-input.svg
+[npm-url]: https://npmjs.org/package/react-range-slider-input
+[standard-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg
+[standard-url]: https://standardjs.com
+
 # react-range-slider-input
+[![travis][travis-image]][travis-url] [![npm][npm-image]][npm-url] [![javascript style guide][standard-image]][standard-url]
 
-React component for [range-slider-input](https://www.npmjs.com/package/range-slider-input).
+React component wrapper for [range-slider-input](https://www.npmjs.com/package/range-slider-input).
+
+**[CodeSanbox Demo](https://codesandbox.io/s/react-range-slider-input-demo-ymw2kp?file=/src/App.js)**
+
+## Installation
+```
+npm install react-range-slider-input
+```
+
+## Usage
+```js
+import RangeSlider from 'react-range-slider-input';
+
+function App() {
+    return (
+        <RangeSlider />
+    );
+}
+
+export default App;
+```
+
+## Props
+
+### `id`
+
+Identifier string (`id` attribute value) to be passed to the range slider element.
+
+### `className`
+
+String of classes to be passed to the range slider element.
+
+All the other props (**`min`,  `max`,  `step`,  `value` , `disabled`,  `rangeSlideDisabled`, `thumbsDisabled`** and **`orientation`**) are same as the properties set by `options` in [range-slider-input](https://www.npmjs.com/package/range-slider-input#options).
+
+## License
+
+MIT © [Utkarsh Verma](https://github.com/n3r4zzurr0)

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

25323

16.53%

Lines of code

548

1.67%

Number of low quality alerts

1

-50%

Number of lines in readme file

47

1466.67%

Worsened metrics

Dependency count

2

Infinity%

Dev dependency count

7

Infinity%

Dependency changes

• + Added

  clsx@^1.1.1

• + Added

  core-js@^3.22.4

• + Added

  clsx@1.2.1
  (transitive)

• + Added

  core-js@3.42.0
  (transitive)