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

Comparing version 2.0.1 to 2.1.0

dist/components/RangeSlider.js

@@ -104,2 +104,12 @@ "use strict";
           this.isDragging = false;
+
+          if (this.thumbDrag) {
+            if (this.options.onThumbDragEnd) {
+              this.options.onThumbDragEnd();
+            }
+          } else {
+            if (this.options.onRangeDragEnd) {
+              this.options.onRangeDragEnd();
+            }
+          }
         }
@@ -484,2 +494,6 @@ });
       this.thumbDrag = this.index.min === i ? MIN : MAX;
+
+      if (this.options.onThumbDragStart) {
+        this.options.onThumbDragStart();
+      }
     }
@@ -493,2 +507,6 @@ }
       this.thumbDrag = false;
+
+      if (this.options.onRangeDragStart) {
+        this.options.onRangeDragStart();
+      }
     }
@@ -600,2 +618,6 @@ }
     this.fallbackToDefault('disabled', false);
+    this.fallbackToDefault('onThumbDragStart', false);
+    this.fallbackToDefault('onRangeDragStart', false);
+    this.fallbackToDefault('onThumbDragEnd', false);
+    this.fallbackToDefault('onRangeDragEnd', false);
     this.fallbackToDefault('onInput', false);
@@ -613,2 +635,3 @@ this.fallbackToDefault('step', 1);
     return /*#__PURE__*/_react.default.createElement("div", {
+      "data-testid": "element",
       id: this.props.id,
@@ -615,0 +638,0 @@ ref: this.element,

package.json

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

README.md

@@ -13,3 +13,3 @@ [travis-image]: https://img.shields.io/travis/n3r4zzurr0/react-range-slider-input/master.svg
 
-React component wrapper for [range-slider-input](https://github.com/n3r4zzurr0/range-slider-input).
+React component wrapper for [range-slider-input](https://github.com/n3r4zzurr0/range-slider-input) (a lightweight [~2kB] library to create range sliders that can capture a value or a range of values with one or two drag handles).
 
@@ -22,3 +22,3 @@ **[CodeSanbox Demo](https://codesandbox.io/s/react-range-slider-input-demo-ymw2kp?file=/src/App.js)**
 
-:warning: **It is recommended that you upgrade from v1.x to v2.x! [What's new and what's changed in v2.x?](https://github.com/n3r4zzurr0/range-slider-input/blob/main/CHANGELOG.md)**
+:warning: **It is recommended that you upgrade from v1.x to v2.x! [What's new and what's changed in v2.x?](https://github.com/n3r4zzurr0/react-range-slider-input/blob/main/CHANGELOG.md#v20x)**
 
@@ -104,2 +104,26 @@ <hr>
 <tr>
+    <td><code>onThumbDragStart</code></td>
+    <td>function</td>
+    <td>NOOP</td>
+    <td>Function to be called when the <code>pointerdown</code> event is triggered for any of the thumbs.</td>
+</tr>
+<tr>
+    <td><code>onThumbDragEnd</code></td>
+    <td>function</td>
+    <td>NOOP</td>
+    <td>Function to be called when the <code>pointerup</code> event is triggered for any of the thumbs.</td>
+</tr>
+<tr>
+    <td><code>onRangeDragStart</code></td>
+    <td>function</td>
+    <td>NOOP</td>
+    <td>Function to be called when the <code>pointerdown</code> event is triggered for the range.</td>
+</tr>
+<tr>
+    <td><code>onRangeDragEnd</code></td>
+    <td>function</td>
+    <td>NOOP</td>
+    <td>Function to be called when the <code>pointerup</code> event is triggered for the range.</td>
+</tr>
+<tr>
     <td><code>disabled</code></td>
@@ -106,0 +130,0 @@ <td>boolean</td>

No alert changes

Improved metrics

Total package byte prevSize

35730

4.83%

Lines of code

635

3.25%

Number of lines in readme file

165

17.02%

No dependency changes