react-compare-slider - npm Package Compare versions

Comparing version 1.0.6 to 1.1.0

dist/react-compare-slider.cjs.development.js

@@ -244,4 +244,6 @@ 'use strict';
       position = _ref4$position === void 0 ? 50 : _ref4$position,
+      _ref4$boundsPadding = _ref4.boundsPadding,
+      boundsPadding = _ref4$boundsPadding === void 0 ? 0 : _ref4$boundsPadding,
       style = _ref4.style,
-      props = _objectWithoutPropertiesLoose(_ref4, ["handle", "itemOne", "itemTwo", "onPositionChange", "portrait", "position", "style"]);
+      props = _objectWithoutPropertiesLoose(_ref4, ["handle", "itemOne", "itemTwo", "onPositionChange", "portrait", "position", "boundsPadding", "style"]);
 
@@ -253,5 +255,2 @@ /** Reference to root container. */
   var internalPositionPc = React.useRef(position);
-  /** Previous `portrait` prop value. */
-  // const prevPropPortrait = usePrevious(portrait);
-
   /** Previous `position` prop value. */
@@ -277,7 +276,8 @@
 
-  var updateInternalPosition = React.useCallback(function (_ref5) {
+  var updateInternalPosition = React.useCallback(function updateInternalCall(_ref5) {
     var x = _ref5.x,
         y = _ref5.y,
         isOffset = _ref5.isOffset,
-        _portrait = _ref5.portrait;
+        _portrait = _ref5.portrait,
+        _boundsPadding = _ref5.boundsPadding;
 
@@ -292,18 +292,30 @@ var _containerRef$current = containerRef.current.getBoundingClientRect(),
 
-    if (width === 0 || height === 0) return;
-    /** Position in pixels with offsets *optionally* applied. */
+    if (width === 0 || height === 0) return; // Clamp pixel position to always be within the container's bounds.
+    // This does *not* take `boundsPadding` into account because we need
+    // the real coords to correctly position the handle.
 
-    var positionPx = _portrait ? isOffset ? y - top - window.pageYOffset : y : isOffset ? x - left - window.pageXOffset : x; // Snap `positionPx` to container extremity if it exceeds container bounds.
+    var positionPx = Math.min(Math.max( // Determine bounds based on orientation
+    _portrait ? isOffset ? y - top - window.pageYOffset : y : isOffset ? x - left - window.pageXOffset : x, // Min value
+    0), // Max value
+    _portrait ? height : width); // Calculate internal position percentage *without* bounds - we always
+    // want to return 0-100 of the *slideable* bounds.
 
-    if (positionPx < 0) {
-      positionPx = 0;
-    } else if (_portrait && positionPx > height) {
-      positionPx = height;
-    } else if (!_portrait && positionPx > width) {
-      positionPx = width;
-    } // Calculate percentage with bounds checking.
+    var nextInternalPositionPc = positionPx / (_portrait ? height : width) * 100;
+    /** Determine if the current pixel position meets the min/max bounds. */
 
+    var positionMeetsBounds = _portrait ? positionPx === 0 || positionPx === height : positionPx === 0 || positionPx === width;
+    var canSkipPositionPc = nextInternalPositionPc === internalPositionPc.current && (internalPositionPc.current === 0 || internalPositionPc.current === 100); // Early out if pixel and percentage positions are already at the min/max
+    // to prevent update spamming when the user is sliding outside of the
+    // container.
 
-    internalPositionPc.current = positionPx / (_portrait ? height : width) * 100, 100;
-    setInternalPositionPx(positionPx);
+    if (canSkipPositionPc && positionMeetsBounds) {
+      return;
+    } // Set new internal position.
+
+
+    internalPositionPc.current = nextInternalPositionPc; // Update internal pixel position capped to min/max bounds.
+
+    setInternalPositionPx(Math.min( // Get largest from pixel position *or* bounds padding.
+    Math.max(positionPx, 0 + _boundsPadding), // Use height *or* width based on orientation.
+    (_portrait ? height : width) - _boundsPadding));
     if (onPositionChange) onPositionChange(internalPositionPc.current);
@@ -322,6 +334,7 @@ }, [onPositionChange]); // Update internal position if `position` prop changes.
       portrait: portrait,
+      boundsPadding: boundsPadding,
       x: width / 100 * nextPosition,
       y: height / 100 * nextPosition
     });
-  }, [portrait, position, prevPropPosition, updateInternalPosition]);
+  }, [portrait, position, prevPropPosition, boundsPadding, updateInternalPosition]);
   /** Handle mouse/touch down. */
@@ -333,2 +346,3 @@
       portrait: portrait,
+      boundsPadding: boundsPadding,
       isOffset: true,
@@ -339,9 +353,10 @@ x: ev instanceof MouseEvent ? ev.pageX : ev.touches[0].pageX,
     setIsDragging(true);
-  }, [portrait, updateInternalPosition]);
+  }, [portrait, boundsPadding, updateInternalPosition]);
   /** Handle mouse/touch move. */
 
-  var handlePointerMove = React.useCallback(function (ev) {
+  var handlePointerMove = React.useCallback(function moveCall(ev) {
     if (!isDragging) return;
     updateInternalPosition({
       portrait: portrait,
+      boundsPadding: boundsPadding,
       isOffset: true,
@@ -351,3 +366,3 @@ x: ev instanceof MouseEvent ? ev.pageX : ev.touches[0].pageX,
     });
-  }, [portrait, isDragging, updateInternalPosition]);
+  }, [portrait, isDragging, boundsPadding, updateInternalPosition]);
   /** Handle mouse/touch up. */
@@ -365,6 +380,7 @@
       portrait: portrait,
+      boundsPadding: boundsPadding,
       x: width / 100 * internalPositionPc.current,
       y: height / 100 * internalPositionPc.current
     });
-  }, [portrait, updateInternalPosition]); // Allow drag outside of container while pointer is still down.
+  }, [portrait, boundsPadding, updateInternalPosition]); // Allow drag outside of container while pointer is still down.
 
@@ -371,0 +387,0 @@ React.useEffect(function () {

dist/react-compare-slider.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=require("resize-observer");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function i(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}var a=!("undefined"==typeof window||!window.document||!window.document.createElement),s=function(){return!a||"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("object-fit","cover")},c=function(e){var t=void 0===e?{}:e,n=t.objectFit,r=t.objectPosition;return o({display:"block",width:"100%",height:"100%",maxWidth:"100%",objectFit:void 0===n?"cover":n,objectPosition:void 0===r?"center":r},i(t,["objectFit","objectPosition"]))},u=function(e,n,r,o){var i=t.useRef();t.useEffect((function(){i.current=n}),[n]),t.useEffect((function(){if(r&&r.addEventListener){var t=function(e){return i.current&&i.current(e)};return r.addEventListener(e,t,o),function(){r.removeEventListener(e,t,o)}}}),[e,r,o])},l=a?t.useLayoutEffect:t.useEffect,d=function(e){var t=e.position,r=e.portrait;return n.createElement("div",{style:{position:"absolute",top:0,width:"100%",height:"100%",transform:r?"translateY("+t+"px)":"translateX("+t+"px)",pointerEvents:"none"},"data-rcs":"main-handle-container"},n.createElement("div",{style:{position:"absolute",width:r?"100%":void 0,height:r?void 0:"100%",transform:r?"translateY(-50%)":"translateX(-50%)",pointerEvents:"all"}},e.children))},f=function(e){var t=e.portrait,r=e.style,a=i(e,["portrait","style"]),s=o({height:t?3:"100%",width:t?"100%":3,backgroundColor:"#fff",boxShadow:"0 0 .2rem #000",cursor:t?"ns-resize":"ew-resize"},r);return n.createElement("div",Object.assign({},a,{style:s,"data-rcs":"main-handle-inner"}))},p=function(e){var t=e.portrait,r=e.position,o=i(e,["portrait","position"]);return n.createElement("div",Object.assign({},o,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",clip:t?"rect(auto,auto,"+r+"px,auto)":"rect(auto,"+r+"px,auto,auto)",willChange:"clip",userSelect:"none",KhtmlUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},"data-rcs":"clip-item"}))};exports.ReactCompareSlider=function(e){var a,s,c=e.handle,v=e.itemOne,h=e.itemTwo,m=e.onPositionChange,b=e.portrait,g=void 0!==b&&b,w=e.position,E=void 0===w?50:w,y=e.style,S=i(e,["handle","itemOne","itemTwo","onPositionChange","portrait","position","style"]),C=t.useRef(null),k=t.useRef(E),x=(s=t.useRef(a=E),t.useEffect((function(){s.current=a})),s.current),O=t.useState(0),j=O[0],R=O[1],L=t.useState(!1),z=L[0],P=L[1],M=t.useRef(!1),U=t.useCallback((function(e){var t=e.x,n=e.y,r=e.isOffset,o=e.portrait,i=C.current.getBoundingClientRect(),a=i.width,s=i.height;if(0!==a&&0!==s){var c=o?r?n-i.top-window.pageYOffset:n:r?t-i.left-window.pageXOffset:t;c<0?c=0:o&&c>s?c=s:!o&&c>a&&(c=a),k.current=c/(o?s:a)*100,R(c),m&&m(k.current)}}),[m]);t.useEffect((function(){var e=C.current.getBoundingClientRect(),t=E===x?k.current:E;U({portrait:g,x:e.width/100*t,y:e.height/100*t})}),[g,E,x,U]);var X=t.useCallback((function(e){e.preventDefault(),U({portrait:g,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY}),P(!0)}),[g,U]),Y=t.useCallback((function(e){z&&U({portrait:g,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY})}),[g,z,U]),F=t.useCallback((function(){P(!1)}),[]),I=t.useCallback((function(e){U({portrait:g,x:e.width/100*k.current,y:e.height/100*k.current})}),[g,U]);t.useEffect((function(){return z&&!M.current&&(window.addEventListener("mousemove",Y,{passive:!0}),window.addEventListener("mouseup",F,{passive:!0}),window.addEventListener("touchmove",Y,{passive:!0}),window.addEventListener("touchend",F,{passive:!0}),M.current=!0),function(){M.current&&(window.removeEventListener("mousemove",Y),window.removeEventListener("mouseup",F),window.removeEventListener("touchmove",Y),window.removeEventListener("touchend",F),M.current=!1)}}),[Y,F,z]),function(e,n){var o=t.useRef(new r.ResizeObserver((function(e){n(e[0].contentRect)}))),i=t.useCallback((function(){o.current.disconnect()}),[]),a=t.useCallback((function(){e.current&&o.current.observe(e.current)}),[e]);l((function(){return a(),function(){return i()}}),[i,a])}(C,I),u("mousedown",X,C.current,{capture:!0,passive:!1}),u("touchstart",X,C.current,{capture:!0,passive:!1});var N=c||n.createElement(f,{portrait:g}),W=o({position:"relative",overflow:"hidden",cursor:z?g?"ns-resize":"ew-resize":void 0,userSelect:"none",KhtmlUserSelect:"none",msUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},y);return n.createElement("div",Object.assign({},S,{ref:C,style:W,"data-rcs":"root"}),h,n.createElement(p,{position:j,portrait:g},v),n.createElement(d,{position:j,portrait:g},N))},exports.ReactCompareSliderHandle=f,exports.ReactCompareSliderImage=function(e){var r=e.className,a=e.fallbackEnable,u=void 0===a||a,l=e.style,d=i(e,["className","fallbackEnable","style"]),f=t.useRef(s()),p=c(o({},l)),v={width:p.width,height:p.height,boxSizing:"border-box"};return!f.current&&u&&(v.backgroundImage=p.backgroundImage||"url("+d.src+")",v.backgroundSize=p.backgroundSize||"cover",v.backgroundPosition=p.backgroundPosition||"center",p.opacity=0),n.createElement("div",{className:r,style:v,"data-rcs":"image-root"},n.createElement("img",Object.assign({},d,{style:p,"data-rcs":"image-inner"})))},exports.styleFitContainer=c,exports.supportsCssObjectFit=s;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=require("resize-observer");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function i(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)t.indexOf(n=i[r])>=0||(o[n]=e[n]);return o}var a=!("undefined"==typeof window||!window.document||!window.document.createElement),s=function(){return!a||"undefined"!=typeof CSS&&"function"==typeof CSS.supports&&CSS.supports("object-fit","cover")},c=function(e){var t=void 0===e?{}:e,n=t.objectFit,r=t.objectPosition;return o({display:"block",width:"100%",height:"100%",maxWidth:"100%",objectFit:void 0===n?"cover":n,objectPosition:void 0===r?"center":r},i(t,["objectFit","objectPosition"]))},u=function(e,n,r,o){var i=t.useRef();t.useEffect((function(){i.current=n}),[n]),t.useEffect((function(){if(r&&r.addEventListener){var t=function(e){return i.current&&i.current(e)};return r.addEventListener(e,t,o),function(){r.removeEventListener(e,t,o)}}}),[e,r,o])},d=a?t.useLayoutEffect:t.useEffect,l=function(e){var t=e.position,r=e.portrait;return n.createElement("div",{style:{position:"absolute",top:0,width:"100%",height:"100%",transform:r?"translateY("+t+"px)":"translateX("+t+"px)",pointerEvents:"none"},"data-rcs":"main-handle-container"},n.createElement("div",{style:{position:"absolute",width:r?"100%":void 0,height:r?void 0:"100%",transform:r?"translateY(-50%)":"translateX(-50%)",pointerEvents:"all"}},e.children))},f=function(e){var t=e.portrait,r=e.style,a=i(e,["portrait","style"]),s=o({height:t?3:"100%",width:t?"100%":3,backgroundColor:"#fff",boxShadow:"0 0 .2rem #000",cursor:t?"ns-resize":"ew-resize"},r);return n.createElement("div",Object.assign({},a,{style:s,"data-rcs":"main-handle-inner"}))},p=function(e){var t=e.portrait,r=e.position,o=i(e,["portrait","position"]);return n.createElement("div",Object.assign({},o,{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",clip:t?"rect(auto,auto,"+r+"px,auto)":"rect(auto,"+r+"px,auto,auto)",willChange:"clip",userSelect:"none",KhtmlUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},"data-rcs":"clip-item"}))};exports.ReactCompareSlider=function(e){var a,s,c=e.handle,v=e.itemOne,h=e.itemTwo,m=e.onPositionChange,b=e.portrait,g=void 0!==b&&b,w=e.position,E=void 0===w?50:w,y=e.boundsPadding,S=void 0===y?0:y,x=e.style,C=i(e,["handle","itemOne","itemTwo","onPositionChange","portrait","position","boundsPadding","style"]),k=t.useRef(null),O=t.useRef(E),j=(s=t.useRef(a=E),t.useEffect((function(){s.current=a})),s.current),P=t.useState(0),R=P[0],L=P[1],z=t.useState(!1),M=z[0],U=z[1],X=t.useRef(!1),Y=t.useCallback((function(e){var t=e.x,n=e.y,r=e.isOffset,o=e.portrait,i=e.boundsPadding,a=k.current.getBoundingClientRect(),s=a.width,c=a.height;if(0!==s&&0!==c){var u=Math.min(Math.max(o?r?n-a.top-window.pageYOffset:n:r?t-a.left-window.pageXOffset:t,0),o?c:s),d=u/(o?c:s)*100;d===O.current&&(0===O.current||100===O.current)&&(o?0===u||u===c:0===u||u===s)||(O.current=d,L(Math.min(Math.max(u,0+i),(o?c:s)-i)),m&&m(O.current))}}),[m]);t.useEffect((function(){var e=k.current.getBoundingClientRect(),t=E===j?O.current:E;Y({portrait:g,boundsPadding:S,x:e.width/100*t,y:e.height/100*t})}),[g,E,j,S,Y]);var F=t.useCallback((function(e){e.preventDefault(),Y({portrait:g,boundsPadding:S,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY}),U(!0)}),[g,S,Y]),I=t.useCallback((function(e){M&&Y({portrait:g,boundsPadding:S,isOffset:!0,x:e instanceof MouseEvent?e.pageX:e.touches[0].pageX,y:e instanceof MouseEvent?e.pageY:e.touches[0].pageY})}),[g,M,S,Y]),N=t.useCallback((function(){U(!1)}),[]),W=t.useCallback((function(e){Y({portrait:g,boundsPadding:S,x:e.width/100*O.current,y:e.height/100*O.current})}),[g,S,Y]);t.useEffect((function(){return M&&!X.current&&(window.addEventListener("mousemove",I,{passive:!0}),window.addEventListener("mouseup",N,{passive:!0}),window.addEventListener("touchmove",I,{passive:!0}),window.addEventListener("touchend",N,{passive:!0}),X.current=!0),function(){X.current&&(window.removeEventListener("mousemove",I),window.removeEventListener("mouseup",N),window.removeEventListener("touchmove",I),window.removeEventListener("touchend",N),X.current=!1)}}),[I,N,M]),function(e,n){var o=t.useRef(new r.ResizeObserver((function(e){n(e[0].contentRect)}))),i=t.useCallback((function(){o.current.disconnect()}),[]),a=t.useCallback((function(){e.current&&o.current.observe(e.current)}),[e]);d((function(){return a(),function(){return i()}}),[i,a])}(k,W),u("mousedown",F,k.current,{capture:!0,passive:!1}),u("touchstart",F,k.current,{capture:!0,passive:!1});var q=c||n.createElement(f,{portrait:g}),B=o({position:"relative",overflow:"hidden",cursor:M?g?"ns-resize":"ew-resize":void 0,userSelect:"none",KhtmlUserSelect:"none",msUserSelect:"none",MozUserSelect:"none",WebkitUserSelect:"none"},x);return n.createElement("div",Object.assign({},C,{ref:k,style:B,"data-rcs":"root"}),h,n.createElement(p,{position:R,portrait:g},v),n.createElement(l,{position:R,portrait:g},q))},exports.ReactCompareSliderHandle=f,exports.ReactCompareSliderImage=function(e){var r=e.className,a=e.fallbackEnable,u=void 0===a||a,d=e.style,l=i(e,["className","fallbackEnable","style"]),f=t.useRef(s()),p=c(o({},d)),v={width:p.width,height:p.height,boxSizing:"border-box"};return!f.current&&u&&(v.backgroundImage=p.backgroundImage||"url("+l.src+")",v.backgroundSize=p.backgroundSize||"cover",v.backgroundPosition=p.backgroundPosition||"center",p.opacity=0),n.createElement("div",{className:r,style:v,"data-rcs":"image-root"},n.createElement("img",Object.assign({},l,{style:p,"data-rcs":"image-inner"})))},exports.styleFitContainer=c,exports.supportsCssObjectFit=s;
 //# sourceMappingURL=react-compare-slider.cjs.production.min.js.map

dist/react-compare-slider.d.ts

@@ -20,2 +20,4 @@ import React from 'react';
 export interface ReactCompareSliderProps extends Omit<ReactCompareSliderCommonProps, 'position'> {
+    /** Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait). */
+    boundsPadding?: number;
     /** Custom handle component. */
@@ -22,0 +24,0 @@ handle?: React.ReactNode;

dist/react-compare-slider.esm.js

@@ -237,4 +237,6 @@ import React, { useRef, useEffect, useCallback, useLayoutEffect, useState } from 'react';
       position = _ref4$position === void 0 ? 50 : _ref4$position,
+      _ref4$boundsPadding = _ref4.boundsPadding,
+      boundsPadding = _ref4$boundsPadding === void 0 ? 0 : _ref4$boundsPadding,
       style = _ref4.style,
-      props = _objectWithoutPropertiesLoose(_ref4, ["handle", "itemOne", "itemTwo", "onPositionChange", "portrait", "position", "style"]);
+      props = _objectWithoutPropertiesLoose(_ref4, ["handle", "itemOne", "itemTwo", "onPositionChange", "portrait", "position", "boundsPadding", "style"]);
 
@@ -246,5 +248,2 @@ /** Reference to root container. */
   var internalPositionPc = useRef(position);
-  /** Previous `portrait` prop value. */
-  // const prevPropPortrait = usePrevious(portrait);
-
   /** Previous `position` prop value. */
@@ -270,7 +269,8 @@
 
-  var updateInternalPosition = useCallback(function (_ref5) {
+  var updateInternalPosition = useCallback(function updateInternalCall(_ref5) {
     var x = _ref5.x,
         y = _ref5.y,
         isOffset = _ref5.isOffset,
-        _portrait = _ref5.portrait;
+        _portrait = _ref5.portrait,
+        _boundsPadding = _ref5.boundsPadding;
 
@@ -285,18 +285,30 @@ var _containerRef$current = containerRef.current.getBoundingClientRect(),
 
-    if (width === 0 || height === 0) return;
-    /** Position in pixels with offsets *optionally* applied. */
+    if (width === 0 || height === 0) return; // Clamp pixel position to always be within the container's bounds.
+    // This does *not* take `boundsPadding` into account because we need
+    // the real coords to correctly position the handle.
 
-    var positionPx = _portrait ? isOffset ? y - top - window.pageYOffset : y : isOffset ? x - left - window.pageXOffset : x; // Snap `positionPx` to container extremity if it exceeds container bounds.
+    var positionPx = Math.min(Math.max( // Determine bounds based on orientation
+    _portrait ? isOffset ? y - top - window.pageYOffset : y : isOffset ? x - left - window.pageXOffset : x, // Min value
+    0), // Max value
+    _portrait ? height : width); // Calculate internal position percentage *without* bounds - we always
+    // want to return 0-100 of the *slideable* bounds.
 
-    if (positionPx < 0) {
-      positionPx = 0;
-    } else if (_portrait && positionPx > height) {
-      positionPx = height;
-    } else if (!_portrait && positionPx > width) {
-      positionPx = width;
-    } // Calculate percentage with bounds checking.
+    var nextInternalPositionPc = positionPx / (_portrait ? height : width) * 100;
+    /** Determine if the current pixel position meets the min/max bounds. */
 
+    var positionMeetsBounds = _portrait ? positionPx === 0 || positionPx === height : positionPx === 0 || positionPx === width;
+    var canSkipPositionPc = nextInternalPositionPc === internalPositionPc.current && (internalPositionPc.current === 0 || internalPositionPc.current === 100); // Early out if pixel and percentage positions are already at the min/max
+    // to prevent update spamming when the user is sliding outside of the
+    // container.
 
-    internalPositionPc.current = positionPx / (_portrait ? height : width) * 100, 100;
-    setInternalPositionPx(positionPx);
+    if (canSkipPositionPc && positionMeetsBounds) {
+      return;
+    } // Set new internal position.
+
+
+    internalPositionPc.current = nextInternalPositionPc; // Update internal pixel position capped to min/max bounds.
+
+    setInternalPositionPx(Math.min( // Get largest from pixel position *or* bounds padding.
+    Math.max(positionPx, 0 + _boundsPadding), // Use height *or* width based on orientation.
+    (_portrait ? height : width) - _boundsPadding));
     if (onPositionChange) onPositionChange(internalPositionPc.current);
@@ -315,6 +327,7 @@ }, [onPositionChange]); // Update internal position if `position` prop changes.
       portrait: portrait,
+      boundsPadding: boundsPadding,
       x: width / 100 * nextPosition,
       y: height / 100 * nextPosition
     });
-  }, [portrait, position, prevPropPosition, updateInternalPosition]);
+  }, [portrait, position, prevPropPosition, boundsPadding, updateInternalPosition]);
   /** Handle mouse/touch down. */
@@ -326,2 +339,3 @@
       portrait: portrait,
+      boundsPadding: boundsPadding,
       isOffset: true,
@@ -332,9 +346,10 @@ x: ev instanceof MouseEvent ? ev.pageX : ev.touches[0].pageX,
     setIsDragging(true);
-  }, [portrait, updateInternalPosition]);
+  }, [portrait, boundsPadding, updateInternalPosition]);
   /** Handle mouse/touch move. */
 
-  var handlePointerMove = useCallback(function (ev) {
+  var handlePointerMove = useCallback(function moveCall(ev) {
     if (!isDragging) return;
     updateInternalPosition({
       portrait: portrait,
+      boundsPadding: boundsPadding,
       isOffset: true,
@@ -344,3 +359,3 @@ x: ev instanceof MouseEvent ? ev.pageX : ev.touches[0].pageX,
     });
-  }, [portrait, isDragging, updateInternalPosition]);
+  }, [portrait, isDragging, boundsPadding, updateInternalPosition]);
   /** Handle mouse/touch up. */
@@ -358,6 +373,7 @@
       portrait: portrait,
+      boundsPadding: boundsPadding,
       x: width / 100 * internalPositionPc.current,
       y: height / 100 * internalPositionPc.current
     });
-  }, [portrait, updateInternalPosition]); // Allow drag outside of container while pointer is still down.
+  }, [portrait, boundsPadding, updateInternalPosition]); // Allow drag outside of container while pointer is still down.
 
@@ -364,0 +380,0 @@ useEffect(function () {

package.json

 {
   "name": "react-compare-slider",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "repository": {

README.md

 <div align="center">
     <h1>React Compare Slider</h1>
-    <p>Compare two components, side-by-side or top-to-toe.</p>
+    <p>Compare two components side-by-side or top-to-toe.</p>
 
@@ -21,5 +21,5 @@ [![Example](./example/default-handle-capture.gif)](https://codesandbox.io/s/react-compare-slider-simple-example-9si6l?file=/src/App.jsx)
 <a href="https://codeclimate.com/github/nerdyman/react-compare-slider">
-    <img src="https://img.shields.io/codeclimate/coverage/nerdyman/react-compare-slider" alt="Coverage" />
+    <img src="https://img.shields.io/github/workflow/status/nerdyman/react-compare-slider/test?label=test" alt="Coverage" />
 </a>
-<a href="https://react-compare-slider.netlify.app/">
+<a href="https://react-compare-slider.netlify.app">
     <img src="https://img.shields.io/badge/demos-🚀-blue.svg" alt="Demos" />
@@ -79,2 +79,3 @@ </a>
 |------|------|:--------:|---------------|-------------|
+| `boundsPadding`    | `number` |   | `0` | Padding to limit the slideable bounds in pixels on the X-axis (landscape) or Y-axis (portrait). |
 | `handle`    | `ReactNode` |   | `undefined` | Custom handle component |
@@ -102,11 +103,6 @@ | `itemOne`   | `ReactNode` | ✓ | `undefined` | First component to show in slider |
 
-<details>
-<summary>Blurred Arrows</summary>
-
 [![Custom Handles](./example/custom-handle-capture.gif)](https://codesandbox.io/s/react-compare-slider-simple-example-9si6l?file=/src/App.jsx)
 
-</details>
+See the [Handles docs](https://react-compare-slider.netlify.app/?path=/docs/docs-handles--page) for more information.
 
-See the [Handles docs](https://react-compare-slider.netlify.app/?path=/docs/docs-images--page) for more information.
-
 ## Requirements
@@ -113,0 +109,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

140575

increased by7.53%

Lines of code

936

increased by3.43%

Worsened metrics

Number of lines in readme file

112

decreased by-3.45%

No dependency changes