react-toggle-slider - npm Package Compare versions

Comparing version 0.3.0 to 0.4.0

lib/cjs/index.d.ts

@@ -27,5 +27,7 @@ import React, { CSSProperties } from 'react';
     active?: boolean;
+    draggable?: boolean;
+    barTransitionType?: "fade" | "slide";
 }
-declare function ToggleSlider({ barBackgroundColor, barBackgroundColorActive, barBorderRadius, barHeight, barWidth, handleBackgroundColor, handleBackgroundColorActive, handleBorderRadius, handleSize, padding, transitionDuration, barTransitionDuration, handleTransitionDuration, onToggle, handleRenderer, handleRendererActive, barRenderer, barRendererActive, flip, barStyles, barStylesActive, handleStyles, handleStylesActive, active: initialActive, }: ToggleSliderProps): JSX.Element;
+declare function ToggleSlider({ barBackgroundColor, barBackgroundColorActive, barBorderRadius, barHeight, barWidth, handleBackgroundColor, handleBackgroundColorActive, handleBorderRadius, handleSize, padding, transitionDuration, barTransitionDuration, handleTransitionDuration, onToggle, handleRenderer, handleRendererActive, barRenderer, barRendererActive, flip, barStyles, barStylesActive, handleStyles, handleStylesActive, active: initialActive, draggable, barTransitionType, }: ToggleSliderProps): JSX.Element;
 declare function useToggleSlider(props?: ToggleSliderProps): (boolean | JSX.Element)[];
 export { ToggleSlider, useToggleSlider };

lib/cjs/index.js

@@ -32,5 +32,9 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useToggleSlider = exports.ToggleSlider = void 0;
 var react_1 = __importStar(require("react"));
+var color_interpolate_1 = __importDefault(require("color-interpolate"));
 function ToggleSliderHandle(props) {
@@ -43,8 +47,19 @@ return (react_1.default.createElement("div", { style: __assign({ width: props.size, height: props.size }, props) }));
 function ToggleSlider(_a) {
-    var _b = _a.barBackgroundColor, barBackgroundColor = _b === void 0 ? "#dedede" : _b, _c = _a.barBackgroundColorActive, barBackgroundColorActive = _c === void 0 ? "#06b7e7" : _c, _d = _a.barBorderRadius, barBorderRadius = _d === void 0 ? 16 : _d, _e = _a.barHeight, barHeight = _e === void 0 ? 26 : _e, _f = _a.barWidth, barWidth = _f === void 0 ? 48 : _f, _g = _a.handleBackgroundColor, handleBackgroundColor = _g === void 0 ? "#ffffff" : _g, handleBackgroundColorActive = _a.handleBackgroundColorActive, _h = _a.handleBorderRadius, handleBorderRadius = _h === void 0 ? 16 : _h, _j = _a.handleSize, handleSize = _j === void 0 ? 18 : _j, _k = _a.padding, padding = _k === void 0 ? 5 : _k, _l = _a.transitionDuration, transitionDuration = _l === void 0 ? "100ms" : _l, barTransitionDuration = _a.barTransitionDuration, handleTransitionDuration = _a.handleTransitionDuration, _m = _a.onToggle, onToggle = _m === void 0 ? function () { return undefined; } : _m, handleRenderer = _a.handleRenderer, handleRendererActive = _a.handleRendererActive, barRenderer = _a.barRenderer, barRendererActive = _a.barRendererActive, flip = _a.flip, barStyles = _a.barStyles, barStylesActive = _a.barStylesActive, handleStyles = _a.handleStyles, handleStylesActive = _a.handleStylesActive, _o = _a.active, initialActive = _o === void 0 ? false : _o;
-    var _p = react_1.useState(initialActive), active = _p[0], setActive = _p[1];
-    function onClick() {
-        onToggle(!active);
-        setActive(!active);
+    var _b = _a.barBackgroundColor, barBackgroundColor = _b === void 0 ? "#dedede" : _b, _c = _a.barBackgroundColorActive, barBackgroundColorActive = _c === void 0 ? "#06b7e7" : _c, _d = _a.barBorderRadius, barBorderRadius = _d === void 0 ? 16 : _d, _e = _a.barHeight, barHeight = _e === void 0 ? 26 : _e, _f = _a.barWidth, barWidth = _f === void 0 ? 48 : _f, _g = _a.handleBackgroundColor, handleBackgroundColor = _g === void 0 ? "#ffffff" : _g, handleBackgroundColorActive = _a.handleBackgroundColorActive, _h = _a.handleBorderRadius, handleBorderRadius = _h === void 0 ? 16 : _h, _j = _a.handleSize, handleSize = _j === void 0 ? 18 : _j, _k = _a.padding, padding = _k === void 0 ? 5 : _k, _l = _a.transitionDuration, transitionDuration = _l === void 0 ? "100ms" : _l, barTransitionDuration = _a.barTransitionDuration, handleTransitionDuration = _a.handleTransitionDuration, _m = _a.onToggle, onToggle = _m === void 0 ? function () { return undefined; } : _m, handleRenderer = _a.handleRenderer, handleRendererActive = _a.handleRendererActive, barRenderer = _a.barRenderer, barRendererActive = _a.barRendererActive, flip = _a.flip, barStyles = _a.barStyles, barStylesActive = _a.barStylesActive, handleStyles = _a.handleStyles, handleStylesActive = _a.handleStylesActive, _o = _a.active, initialActive = _o === void 0 ? false : _o, _p = _a.draggable, draggable = _p === void 0 ? true : _p, _q = _a.barTransitionType, barTransitionType = _q === void 0 ? "fade" : _q;
+    var _r = react_1.useState(initialActive), active = _r[0], setActive = _r[1];
+    var _s = react_1.useState((active && !flip || !active && flip) ? 1 : 0), progress = _s[0], setProgressState = _s[1];
+    var _t = react_1.useState(active ? barBackgroundColorActive : barBackgroundColor), currentBarColor = _t[0], setCurrentBarColor = _t[1];
+    var _u = react_1.useState(false), dragging = _u[0], setDragging = _u[1];
+    function interpolateColors(start, end, pos) {
+        var colorMap = color_interpolate_1.default([start, end]);
+        return colorMap(pos);
     }
+    function setProgress(p) {
+        var paddingLeft = Math.max(padding, Math.min(barWidth - padding - handleSize, p * barWidth - handleSize / 2));
+        var paddingProgress = (paddingLeft - padding) / (barWidth - padding * 2 - handleSize);
+        setProgressState(p);
+        if (barTransitionType === "fade") {
+            setCurrentBarColor(interpolateColors(barBackgroundColor, barBackgroundColorActive, paddingProgress));
+        }
+    }
     var overlayStyles = {
@@ -57,15 +72,67 @@ boxSizing: "border-box",
     handleStyles = active ? __assign(__assign({}, handleStyles), handleStylesActive) : handleStyles;
-    var bar = barRenderer !== null && barRenderer !== void 0 ? barRenderer : react_1.default.createElement(ToggleSliderBar, __assign({ width: barWidth, height: barHeight, borderRadius: barBorderRadius, backgroundColor: active ? barBackgroundColorActive : barBackgroundColor, transition: "all " + (barTransitionDuration !== null && barTransitionDuration !== void 0 ? barTransitionDuration : transitionDuration) }, barStyles));
+    var bar = barRenderer !== null && barRenderer !== void 0 ? barRenderer : react_1.default.createElement(ToggleSliderBar, __assign({ width: barWidth, height: barHeight, borderRadius: barBorderRadius, background: currentBarColor, transition: "all " + (dragging ? "0s" : (barTransitionDuration !== null && barTransitionDuration !== void 0 ? barTransitionDuration : transitionDuration)) }, barStyles));
     var handle = handleRenderer !== null && handleRenderer !== void 0 ? handleRenderer : react_1.default.createElement(ToggleSliderHandle, __assign({ size: handleSize, borderRadius: handleBorderRadius, backgroundColor: active ?
             (handleBackgroundColorActive !== null && handleBackgroundColorActive !== void 0 ? handleBackgroundColorActive : handleBackgroundColor) :
-            handleBackgroundColor, transition: "all " + (handleTransitionDuration !== null && handleTransitionDuration !== void 0 ? handleTransitionDuration : transitionDuration) }, handleStyles));
+            handleBackgroundColor, transition: "all " + (dragging ? "0s" : (handleTransitionDuration !== null && handleTransitionDuration !== void 0 ? handleTransitionDuration : transitionDuration)) }, handleStyles));
     var barActive = barRendererActive !== null && barRendererActive !== void 0 ? barRendererActive : bar;
     var handleActive = handleRendererActive !== null && handleRendererActive !== void 0 ? handleRendererActive : handle;
-    return (react_1.default.createElement("div", { style: { display: "flex", flexFlow: "row nowrap", cursor: "pointer", width: barWidth }, onClick: onClick },
-        react_1.default.createElement("div", { style: __assign({ paddingTop: Math.max(handleSize - barHeight, 0) / 2, transition: "all " + transitionDuration }, overlayStyles) }, active ? barActive : bar),
+    var _v = react_1.useState(false), down = _v[0], setDown = _v[1];
+    function onPointerDown(e) {
+        setDown(true);
+    }
+    function onPointerMove(e) {
+        if (!down || !draggable) {
+            return;
+        }
+        var localDragging = dragging;
+        if (!dragging) {
+            setDragging(true);
+            localDragging = true;
+        }
+        if (localDragging) {
+            var bounds = e.currentTarget.getBoundingClientRect();
+            var position = (e.clientX - bounds.left) / barWidth;
+            setProgress(position);
+        }
+    }
+    function onPointerUp() {
+        if (!down) {
+            return;
+        }
+        if (!dragging) {
+            onToggle(!active);
+            setProgress(active ? 0 : 1);
+            setActive(!active);
+        }
+        else {
+            var newActive = progress > 0.5;
+            onToggle(newActive);
+            setProgress(newActive ? 1 : 0);
+            setActive(newActive);
+        }
+        setDown(false);
+        setDragging(false);
+    }
+    return (react_1.default.createElement("div", { style: { display: "flex", flexFlow: "row nowrap", cursor: "pointer", width: barWidth, userSelect: "none" }, onPointerUp: onPointerUp, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerLeave: onPointerUp },
+        react_1.default.createElement("div", { style: __assign({ paddingTop: Math.max(handleSize - barHeight, 0) / 2 }, overlayStyles) }, active ? barActive : bar),
+        barTransitionType === "slide" ? (react_1.default.createElement("div", { style: __assign({ marginLeft: "-100%" }, overlayStyles) },
+            react_1.default.createElement("div", { style: {
+                    borderRadius: barBorderRadius,
+                    width: barWidth,
+                    height: barHeight,
+                    marginTop: Math.max(handleSize - barHeight, 0) / 2,
+                    // boxSizing: "border-box",
+                    overflow: "hidden",
+                } },
+                react_1.default.createElement("div", { style: {
+                        transition: "all " + (dragging ? "0s" : transitionDuration),
+                        backgroundColor: barBackgroundColorActive,
+                        width: progress * barWidth,
+                        height: barHeight,
+                    } })))) : undefined,
         react_1.default.createElement("div", { style: __assign({ marginLeft: "-100%" }, overlayStyles) },
             react_1.default.createElement("div", { style: {
-                    transition: "all " + transitionDuration,
+                    transition: "all " + (dragging ? "0s" : transitionDuration),
                     paddingTop: Math.max(barHeight - handleSize, 0) / 2,
-                    paddingLeft: ((active && !flip || !active && flip) ? barWidth - padding - handleSize : padding),
+                    paddingLeft: Math.max(padding, Math.min(barWidth - padding - handleSize, progress * barWidth - handleSize / 2)),
                 } }, active ? handleActive : handle))));
@@ -72,0 +139,0 @@ }

lib/esm/index.d.ts

@@ -27,5 +27,7 @@ import React, { CSSProperties } from 'react';
     active?: boolean;
+    draggable?: boolean;
+    barTransitionType?: "fade" | "slide";
 }
-declare function ToggleSlider({ barBackgroundColor, barBackgroundColorActive, barBorderRadius, barHeight, barWidth, handleBackgroundColor, handleBackgroundColorActive, handleBorderRadius, handleSize, padding, transitionDuration, barTransitionDuration, handleTransitionDuration, onToggle, handleRenderer, handleRendererActive, barRenderer, barRendererActive, flip, barStyles, barStylesActive, handleStyles, handleStylesActive, active: initialActive, }: ToggleSliderProps): JSX.Element;
+declare function ToggleSlider({ barBackgroundColor, barBackgroundColorActive, barBorderRadius, barHeight, barWidth, handleBackgroundColor, handleBackgroundColorActive, handleBorderRadius, handleSize, padding, transitionDuration, barTransitionDuration, handleTransitionDuration, onToggle, handleRenderer, handleRendererActive, barRenderer, barRendererActive, flip, barStyles, barStylesActive, handleStyles, handleStylesActive, active: initialActive, draggable, barTransitionType, }: ToggleSliderProps): JSX.Element;
 declare function useToggleSlider(props?: ToggleSliderProps): (boolean | JSX.Element)[];
 export { ToggleSlider, useToggleSlider };

lib/esm/index.js

@@ -13,2 +13,3 @@ var __assign = (this && this.__assign) || function () {
 import React, { useState } from 'react';
+import interpolate from "color-interpolate";
 function ToggleSliderHandle(props) {
@@ -21,8 +22,19 @@ return (React.createElement("div", { style: __assign({ width: props.size, height: props.size }, props) }));
 function ToggleSlider(_a) {
-    var _b = _a.barBackgroundColor, barBackgroundColor = _b === void 0 ? "#dedede" : _b, _c = _a.barBackgroundColorActive, barBackgroundColorActive = _c === void 0 ? "#06b7e7" : _c, _d = _a.barBorderRadius, barBorderRadius = _d === void 0 ? 16 : _d, _e = _a.barHeight, barHeight = _e === void 0 ? 26 : _e, _f = _a.barWidth, barWidth = _f === void 0 ? 48 : _f, _g = _a.handleBackgroundColor, handleBackgroundColor = _g === void 0 ? "#ffffff" : _g, handleBackgroundColorActive = _a.handleBackgroundColorActive, _h = _a.handleBorderRadius, handleBorderRadius = _h === void 0 ? 16 : _h, _j = _a.handleSize, handleSize = _j === void 0 ? 18 : _j, _k = _a.padding, padding = _k === void 0 ? 5 : _k, _l = _a.transitionDuration, transitionDuration = _l === void 0 ? "100ms" : _l, barTransitionDuration = _a.barTransitionDuration, handleTransitionDuration = _a.handleTransitionDuration, _m = _a.onToggle, onToggle = _m === void 0 ? function () { return undefined; } : _m, handleRenderer = _a.handleRenderer, handleRendererActive = _a.handleRendererActive, barRenderer = _a.barRenderer, barRendererActive = _a.barRendererActive, flip = _a.flip, barStyles = _a.barStyles, barStylesActive = _a.barStylesActive, handleStyles = _a.handleStyles, handleStylesActive = _a.handleStylesActive, _o = _a.active, initialActive = _o === void 0 ? false : _o;
-    var _p = useState(initialActive), active = _p[0], setActive = _p[1];
-    function onClick() {
-        onToggle(!active);
-        setActive(!active);
+    var _b = _a.barBackgroundColor, barBackgroundColor = _b === void 0 ? "#dedede" : _b, _c = _a.barBackgroundColorActive, barBackgroundColorActive = _c === void 0 ? "#06b7e7" : _c, _d = _a.barBorderRadius, barBorderRadius = _d === void 0 ? 16 : _d, _e = _a.barHeight, barHeight = _e === void 0 ? 26 : _e, _f = _a.barWidth, barWidth = _f === void 0 ? 48 : _f, _g = _a.handleBackgroundColor, handleBackgroundColor = _g === void 0 ? "#ffffff" : _g, handleBackgroundColorActive = _a.handleBackgroundColorActive, _h = _a.handleBorderRadius, handleBorderRadius = _h === void 0 ? 16 : _h, _j = _a.handleSize, handleSize = _j === void 0 ? 18 : _j, _k = _a.padding, padding = _k === void 0 ? 5 : _k, _l = _a.transitionDuration, transitionDuration = _l === void 0 ? "100ms" : _l, barTransitionDuration = _a.barTransitionDuration, handleTransitionDuration = _a.handleTransitionDuration, _m = _a.onToggle, onToggle = _m === void 0 ? function () { return undefined; } : _m, handleRenderer = _a.handleRenderer, handleRendererActive = _a.handleRendererActive, barRenderer = _a.barRenderer, barRendererActive = _a.barRendererActive, flip = _a.flip, barStyles = _a.barStyles, barStylesActive = _a.barStylesActive, handleStyles = _a.handleStyles, handleStylesActive = _a.handleStylesActive, _o = _a.active, initialActive = _o === void 0 ? false : _o, _p = _a.draggable, draggable = _p === void 0 ? true : _p, _q = _a.barTransitionType, barTransitionType = _q === void 0 ? "fade" : _q;
+    var _r = useState(initialActive), active = _r[0], setActive = _r[1];
+    var _s = useState((active && !flip || !active && flip) ? 1 : 0), progress = _s[0], setProgressState = _s[1];
+    var _t = useState(active ? barBackgroundColorActive : barBackgroundColor), currentBarColor = _t[0], setCurrentBarColor = _t[1];
+    var _u = useState(false), dragging = _u[0], setDragging = _u[1];
+    function interpolateColors(start, end, pos) {
+        var colorMap = interpolate([start, end]);
+        return colorMap(pos);
     }
+    function setProgress(p) {
+        var paddingLeft = Math.max(padding, Math.min(barWidth - padding - handleSize, p * barWidth - handleSize / 2));
+        var paddingProgress = (paddingLeft - padding) / (barWidth - padding * 2 - handleSize);
+        setProgressState(p);
+        if (barTransitionType === "fade") {
+            setCurrentBarColor(interpolateColors(barBackgroundColor, barBackgroundColorActive, paddingProgress));
+        }
+    }
     var overlayStyles = {
@@ -35,15 +47,67 @@ boxSizing: "border-box",
     handleStyles = active ? __assign(__assign({}, handleStyles), handleStylesActive) : handleStyles;
-    var bar = barRenderer !== null && barRenderer !== void 0 ? barRenderer : React.createElement(ToggleSliderBar, __assign({ width: barWidth, height: barHeight, borderRadius: barBorderRadius, backgroundColor: active ? barBackgroundColorActive : barBackgroundColor, transition: "all " + (barTransitionDuration !== null && barTransitionDuration !== void 0 ? barTransitionDuration : transitionDuration) }, barStyles));
+    var bar = barRenderer !== null && barRenderer !== void 0 ? barRenderer : React.createElement(ToggleSliderBar, __assign({ width: barWidth, height: barHeight, borderRadius: barBorderRadius, background: currentBarColor, transition: "all " + (dragging ? "0s" : (barTransitionDuration !== null && barTransitionDuration !== void 0 ? barTransitionDuration : transitionDuration)) }, barStyles));
     var handle = handleRenderer !== null && handleRenderer !== void 0 ? handleRenderer : React.createElement(ToggleSliderHandle, __assign({ size: handleSize, borderRadius: handleBorderRadius, backgroundColor: active ?
             (handleBackgroundColorActive !== null && handleBackgroundColorActive !== void 0 ? handleBackgroundColorActive : handleBackgroundColor) :
-            handleBackgroundColor, transition: "all " + (handleTransitionDuration !== null && handleTransitionDuration !== void 0 ? handleTransitionDuration : transitionDuration) }, handleStyles));
+            handleBackgroundColor, transition: "all " + (dragging ? "0s" : (handleTransitionDuration !== null && handleTransitionDuration !== void 0 ? handleTransitionDuration : transitionDuration)) }, handleStyles));
     var barActive = barRendererActive !== null && barRendererActive !== void 0 ? barRendererActive : bar;
     var handleActive = handleRendererActive !== null && handleRendererActive !== void 0 ? handleRendererActive : handle;
-    return (React.createElement("div", { style: { display: "flex", flexFlow: "row nowrap", cursor: "pointer", width: barWidth }, onClick: onClick },
-        React.createElement("div", { style: __assign({ paddingTop: Math.max(handleSize - barHeight, 0) / 2, transition: "all " + transitionDuration }, overlayStyles) }, active ? barActive : bar),
+    var _v = useState(false), down = _v[0], setDown = _v[1];
+    function onPointerDown(e) {
+        setDown(true);
+    }
+    function onPointerMove(e) {
+        if (!down || !draggable) {
+            return;
+        }
+        var localDragging = dragging;
+        if (!dragging) {
+            setDragging(true);
+            localDragging = true;
+        }
+        if (localDragging) {
+            var bounds = e.currentTarget.getBoundingClientRect();
+            var position = (e.clientX - bounds.left) / barWidth;
+            setProgress(position);
+        }
+    }
+    function onPointerUp() {
+        if (!down) {
+            return;
+        }
+        if (!dragging) {
+            onToggle(!active);
+            setProgress(active ? 0 : 1);
+            setActive(!active);
+        }
+        else {
+            var newActive = progress > 0.5;
+            onToggle(newActive);
+            setProgress(newActive ? 1 : 0);
+            setActive(newActive);
+        }
+        setDown(false);
+        setDragging(false);
+    }
+    return (React.createElement("div", { style: { display: "flex", flexFlow: "row nowrap", cursor: "pointer", width: barWidth, userSelect: "none" }, onPointerUp: onPointerUp, onPointerDown: onPointerDown, onPointerMove: onPointerMove, onPointerLeave: onPointerUp },
+        React.createElement("div", { style: __assign({ paddingTop: Math.max(handleSize - barHeight, 0) / 2 }, overlayStyles) }, active ? barActive : bar),
+        barTransitionType === "slide" ? (React.createElement("div", { style: __assign({ marginLeft: "-100%" }, overlayStyles) },
+            React.createElement("div", { style: {
+                    borderRadius: barBorderRadius,
+                    width: barWidth,
+                    height: barHeight,
+                    marginTop: Math.max(handleSize - barHeight, 0) / 2,
+                    // boxSizing: "border-box",
+                    overflow: "hidden",
+                } },
+                React.createElement("div", { style: {
+                        transition: "all " + (dragging ? "0s" : transitionDuration),
+                        backgroundColor: barBackgroundColorActive,
+                        width: progress * barWidth,
+                        height: barHeight,
+                    } })))) : undefined,
         React.createElement("div", { style: __assign({ marginLeft: "-100%" }, overlayStyles) },
             React.createElement("div", { style: {
-                    transition: "all " + transitionDuration,
+                    transition: "all " + (dragging ? "0s" : transitionDuration),
                     paddingTop: Math.max(barHeight - handleSize, 0) / 2,
-                    paddingLeft: ((active && !flip || !active && flip) ? barWidth - padding - handleSize : padding),
+                    paddingLeft: Math.max(padding, Math.min(barWidth - padding - handleSize, progress * barWidth - handleSize / 2)),
                 } }, active ? handleActive : handle))));
@@ -50,0 +114,0 @@ }

package.json

 {
   "name": "react-toggle-slider",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "author": {
@@ -14,3 +14,9 @@ "email": "[e-mail]",
   "description": "A highly customizable React toggle slider component.",
-  "keywords": ["react", "slider", "toggle", "switch", "typescript"],
+  "keywords": [
+    "react",
+    "slider",
+    "toggle",
+    "switch",
+    "typescript"
+  ],
   "main": "./lib/cjs/index.js",
@@ -20,3 +26,5 @@ "module": "./lib/esm/index.js",
   "license": "MIT",
-  "files": ["./lib"],
+  "files": [
+    "./lib"
+  ],
   "scripts": {
@@ -36,3 +44,6 @@ "build": "yarn build:esm && yarn build:cjs",
     "react-dom": "^17.0.2"
+  },
+  "dependencies": {
+    "color-interpolate": "^1.0.5"
   }
 }

README.md

 # react-toggle-slider
 
+[![npm version](https://badge.fury.io/js/react-toggle-slider.svg)](https://www.npmjs.com/package/react-toggle-slider)
+
 A highly customizable React toggle slider component.
 
+![default](https://user-images.githubusercontent.com/20135416/122633007-293cda80-d0a4-11eb-90e9-86b1cce29061.gif)
+![square](https://user-images.githubusercontent.com/20135416/122632977-03173a80-d0a4-11eb-9ada-ba742ddf5aba.gif)
+
+
 ## Installation
@@ -38,2 +44,3 @@
 | `active` | `false` | Initial state | 
+| `draggable` | `true` | Whether or not the handle can be dragged |
 | `onToggle` | `undefined` | Function to call when slider is toggled, passes active state as parameter | 
@@ -58,2 +65,3 @@ | `padding` | `5` | Padding between the handle and the sides of the bar |
 | `barTransitionDuration` | `undefined` | Transition duration of the bar (overrides `transitionDuration`) | 
+| `barTransitionType` | `fade` | Specify if the bar should `fade` or `slide` |
 | `barStyles` | `undefined` | Extra styles object to be applied to the bar | 
@@ -60,0 +68,0 @@ | `barStylesActive` | `undefined` | Extra styles object to be applied to the bar while active |

No alert changes

Improved metrics

Total package byte prevSize

35302

25.55%

Lines of code

342

65.22%

Number of lines in readme file

119

7.21%

Worsened metrics

Dependency count

3

50%

Dependency changes

• + Added

  color-interpolate@^1.0.5

• + Added

  almost-equal@1.1.0
  (transitive)

• + Added

  clamp@1.0.1
  (transitive)

• + Added

  color-interpolate@1.0.5
  (transitive)

• + Added

  color-name@1.1.4
  (transitive)

• + Added

  color-parse@1.4.3
  (transitive)

• + Added

  color-space@1.16.0
  (transitive)

• + Added

  hsluv@0.0.3
  (transitive)

• + Added

  lerp@1.0.3
  (transitive)

• + Added

  mumath@3.3.4
  (transitive)