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

Comparing version 3.0.6 to 3.0.7

dist/components/RangeSlider.js

@@ -351,4 +351,5 @@ "use strict";
   updateRange() {
-    const deltaOffset = (0.5 - (this.value.min - this.options.min) / this.maxRangeWidth) * this.ifVerticalElse(this.thumbHeight, this.thumbWidth).min / this.element.current["client".concat(this.ifVerticalElse('Height', 'Width'))];
-    const deltaDimension = (0.5 - (this.value.max - this.options.min) / this.maxRangeWidth) * this.ifVerticalElse(this.thumbHeight, this.thumbWidth).max / this.element.current["client".concat(this.ifVerticalElse('Height', 'Width'))];
+    const elementBounds = this.element.current.getBoundingClientRect();
+    const deltaOffset = (0.5 - (this.value.min - this.options.min) / this.maxRangeWidth) * this.ifVerticalElse(this.thumbHeight, this.thumbWidth).min / this.ifVerticalElse(elementBounds.bottom - elementBounds.top, elementBounds.right - elementBounds.left);
+    const deltaDimension = (0.5 - (this.value.max - this.options.min) / this.maxRangeWidth) * this.ifVerticalElse(this.thumbHeight, this.thumbWidth).max / this.ifVerticalElse(elementBounds.bottom - elementBounds.top, elementBounds.right - elementBounds.left);
     this.range.current.style[this.ifVerticalElse('top', 'left')] = "".concat(((this.value.min - this.options.min) / this.maxRangeWidth + deltaOffset) * 100, "%");
@@ -460,3 +461,5 @@ this.range.current.style[this.ifVerticalElse('height', 'width')] = "".concat(((this.value.max - this.options.min) / this.maxRangeWidth - (this.value.min - this.options.min) / this.maxRangeWidth - deltaOffset + deltaDimension) * 100, "%");
   currentPosition(e, node) {
-    const currPos = (node["offset".concat(this.ifVerticalElse('Top', 'Left'))] + (e["client".concat(this.ifVerticalElse('Y', 'X'))] - node.getBoundingClientRect()[this.ifVerticalElse('top', 'left')]) - (this.thumbDrag ? (0.5 - (this.value[this.thumbDrag] - this.options.min) / this.maxRangeWidth) * this.ifVerticalElse(this.thumbHeight, this.thumbWidth)[this.thumbDrag] : 0)) / this.element.current["client".concat(this.ifVerticalElse('Height', 'Width'))] * this.maxRangeWidth + this.options.min;
+    const elementBounds = this.element.current.getBoundingClientRect();
+    const nodeBounds = node.getBoundingClientRect();
+    const currPos = (this.ifVerticalElse(nodeBounds.top - elementBounds.top, nodeBounds.left - elementBounds.left) + (e["client".concat(this.ifVerticalElse('Y', 'X'))] - node.getBoundingClientRect()[this.ifVerticalElse('top', 'left')]) - (this.thumbDrag ? (0.5 - (this.value[this.thumbDrag] - this.options.min) / this.maxRangeWidth) * this.ifVerticalElse(this.thumbHeight, this.thumbWidth)[this.thumbDrag] : 0)) / this.ifVerticalElse(elementBounds.bottom - elementBounds.top, elementBounds.right - elementBounds.left) * this.maxRangeWidth + this.options.min;
 
@@ -479,2 +482,3 @@ if (currPos < this.options.min) {
   elementFocused(e) {
+    let repeat = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true;
     let setFocus = false;
@@ -498,9 +502,9 @@
         if (currPos >= this.value.min) {
-          this.setValue(this.setMinMaxProps(this.value.min, currPos), true);
-          this.initiateThumbDrag(e, this.index.max, this.thumb[this.index.max].current);
+          this.setValue(this.setMinMaxProps(this.value.min, currPos), true, !repeat);
+          this.initiateThumbDrag(e, this.index.max, this.thumb[this.index.max].current, !repeat);
         }
       } else if (this.options.thumbsDisabled[1]) {
         if (currPos <= this.value.max) {
-          this.setValue(this.setMinMaxProps(currPos, this.value.max), true);
-          this.initiateThumbDrag(e, this.index.min, this.thumb[this.index.min].current);
+          this.setValue(this.setMinMaxProps(currPos, this.value.max), true, !repeat);
+          this.initiateThumbDrag(e, this.index.min, this.thumb[this.index.min].current, !repeat);
         }
@@ -511,10 +515,14 @@ } else {
         if (deltaMin === deltaMax) {
-          this.setValue(this.setMinMaxProps(this.value.min, currPos), true);
+          this.setValue(this.setMinMaxProps(this.value.min, currPos), true, !repeat);
         } else {
-          this.setValue(this.setMinMaxProps(deltaMin < deltaMax ? currPos : this.value.min, deltaMax < deltaMin ? currPos : this.value.max), true);
+          this.setValue(this.setMinMaxProps(deltaMin < deltaMax ? currPos : this.value.min, deltaMax < deltaMin ? currPos : this.value.max), true, !repeat);
           nearestThumbIndex = deltaMin < deltaMax ? this.index.min : this.index.max;
         }
 
-        this.initiateThumbDrag(e, nearestThumbIndex, this.thumb[nearestThumbIndex].current);
+        this.initiateThumbDrag(e, nearestThumbIndex, this.thumb[nearestThumbIndex].current, !repeat);
       }
+
+      if (repeat) {
+        this.elementFocused(e, false);
+      }
     }
@@ -531,2 +539,4 @@ }
   initiateThumbDrag(e, i, node) {
+    let callback = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+
     if (!this.options.disabled && !this.options.thumbsDisabled[this.currentIndex(i)]) {
@@ -536,3 +546,3 @@ this.initiateDrag(e, node);
 
-      if (this.options.onThumbDragStart) {
+      if (callback && this.options.onThumbDragStart) {
         this.options.onThumbDragStart();
@@ -539,0 +549,0 @@ }

package.json

 {
   "name": "react-range-slider-input",
-  "version": "3.0.6",
+  "version": "3.0.7",
   "private": false,
@@ -5,0 +5,0 @@ "description": "React component wrapper for range-slider-input",

No alert changes

Improved metrics

Total package byte prevSize

37699

increased by1.72%

Lines of code

673

increased by1.36%

No dependency changes