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

Comparing version 2.0.2 to 2.0.3

lib/multirangeslider.d.ts

@@ -5,2 +5,3 @@ import React from 'react';
 declare type Props = {
+    id?: string;
     min?: number | string;
@@ -7,0 +8,0 @@ max?: number | string;

lib/multirangeslider.js

@@ -25,2 +25,4 @@ "use strict";
 require("./multirangesliderblack.css");
+let _wheelTimeout = null;
+let _triggerTimeout = null;
 const MultiRangeSlider = (props, ref) => {
@@ -104,2 +106,3 @@ let ruler = props.ruler === undefined || props.ruler === null ? true : props.ruler;
         set_minValue(_minValue);
+        setIsChange(true);
     };
@@ -190,2 +193,3 @@ const onLeftThumbMousedown = (e) => {
         set_maxValue(_maxValue);
+        setIsChange(true);
     };
@@ -305,4 +309,9 @@ const onRightThumbMousedown = (e) => {
         }
+        setIsChange(false);
         set_maxValue(_maxValue);
         set_minValue(_minValue);
+        _wheelTimeout && window.clearTimeout(_wheelTimeout);
+        _wheelTimeout = window.setTimeout(() => {
+            setIsChange(true);
+        }, 100);
     };
@@ -336,3 +345,4 @@ (0, react_1.useEffect)(() => {
         set_barMax(_barMax);
-        window.setTimeout(triggerChange);
+        _triggerTimeout && window.clearTimeout(_triggerTimeout);
+        _triggerTimeout = window.setTimeout(triggerChange, 20);
     }, [minValue, maxValue, min, max, fixed, props, isChange]);
@@ -351,2 +361,3 @@ (0, react_1.useEffect)(() => {
         }
+        setIsChange(false);
         set_minValue(+_minValue);
@@ -366,8 +377,9 @@ }, [props.minValue, min, max]);
         }
+        setIsChange(false);
         set_maxValue(+_maxValue);
     }, [props.maxValue, min, max, step]);
-    return (react_1.default.createElement("div", { ref: ref, className: (props.baseClassName || 'multi-range-slider') + ' ' + (props.className || ''), style: props.style, onWheel: onMouseWheel },
+    return (react_1.default.createElement("div", { ref: ref, id: props.id, className: (props.baseClassName || 'multi-range-slider') + ' ' + (props.className || ''), style: props.style, onWheel: onMouseWheel },
         react_1.default.createElement("div", { className: 'bar', ref: refBar },
             react_1.default.createElement("div", { className: 'bar-left', style: { width: barMin + '%', backgroundColor: props.barLeftColor }, onClick: onBarLeftClick }),
-            react_1.default.createElement("input", { className: 'input-type-range input-type-range-min', type: 'range', min: min, max: max, step: step, value: minValue, onInput: onInputMinChange }),
+            react_1.default.createElement("input", { placeholder: 'min-value', className: 'input-type-range input-type-range-min', type: 'range', min: min, max: max, step: step, value: minValue, onInput: onInputMinChange }),
             react_1.default.createElement("div", { className: 'thumb thumb-left', style: { backgroundColor: props.thumbLeftColor }, onMouseDown: onLeftThumbMousedown, onTouchStart: onLeftThumbTouchStart },
@@ -379,3 +391,3 @@ react_1.default.createElement("div", { className: 'caption' },
                 react_1.default.createElement("div", { className: 'bar-inner-right', onClick: onInnerBarRightClick })),
-            react_1.default.createElement("input", { className: 'input-type-range input-type-range-max', type: 'range', min: min, max: max, step: step, value: maxValue, onInput: onInputMaxChange }),
+            react_1.default.createElement("input", { placeholder: 'max-value', className: 'input-type-range input-type-range-max', type: 'range', min: min, max: max, step: step, value: maxValue, onInput: onInputMaxChange }),
             react_1.default.createElement("div", { className: 'thumb thumb-right', style: { backgroundColor: props.thumbRightColor }, onMouseDown: onRightThumbMousedown, onTouchStart: onRightThumbTouchStart },
@@ -382,0 +394,0 @@ react_1.default.createElement("div", { className: 'caption' },

package.json

 {
   "name": "multi-range-slider-react",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Simple component to select range values from slider. React component that return two value minValue and maxValue by event onInput/onChange. ",
@@ -5,0 +5,0 @@ "main": "lib/multirangeslider.js",

ReadMe.md

@@ -47,2 +47,3 @@ # multi-range-slider-react
 | ------------ | ------------ | ------------ | ------------ |
+| id  | String  | '' | Set id to multi-range-slider control root div |
 | min  | Number  | 0 | Slider Minimum Value that user can set |
@@ -49,0 +50,0 @@ | max  | Number  | 100 | Slider Maximum Value that user can Set |

No alert changes

Improved metrics

Total package byte prevSize

137082

0.44%

Lines of code

880

1.5%

Number of lines in readme file

225

0.45%

No dependency changes