react-multi-slider-pro/dist/index.js

A highly customizable, accessible multi-range slider component for React with keyboard navigation, touch support, and Tailwind CSS styling

"use strict";var e=require("react");function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var a=0,n=Array(t);a<t;a++)n[a]=e[a];return n}function a(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){var a=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=a){var n,l,r,o,s=[],c=!0,i=!1;try{if(r=(a=a.call(e)).next,0===t){if(Object(a)!==a)return;c=!1}else for(;!(c=(n=r.call(a)).done)&&(s.push(n.value),s.length!==t);c=!0);}catch(e){i=!0,l=e}finally{try{if(!c&&null!=a.return&&(o=a.return(),Object(o)!==o))return}finally{if(i)throw l}}return s}}(e,t)||l(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function n(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||l(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function l(e,a){if(e){if("string"==typeof e)return t(e,a);var n={}.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,a):void 0}}document.head.appendChild(document.createElement("style")).textContent="@tailwind base;@tailwind components;@tailwind utilities;";var r=function(t){var l=t.values,r=void 0===l?[20,80]:l,o=t.min,s=void 0===o?0:o,c=t.max,i=void 0===c?100:c,u=t.step,m=void 0===u?1:u,d=t.disabled,b=void 0!==d&&d,v=t.onChange,f=t.onChangeCommitted,g=t.showLabels,h=void 0!==g&&g,p=t.showValueLabels,y=void 0!==p&&p,E=t.formatLabel,x=t.trackColor,w=void 0===x?"bg-gray-300":x,C=t.rangeColor,N=void 0===C?"bg-blue-500":C,k=t.handleColor,M=void 0===k?"bg-blue-500":k,S=t.labelColor,L=void 0===S?"text-white":S,A=t.trackHeight,D=void 0===A?"h-1":A,P=t.handleSize,H=void 0===P?"w-5 h-5":P,j=t.containerHeight,V=void 0===j?"h-10":j,R=t.marks,$=void 0===R?[]:R,I=t.allowCross,T=void 0!==I&&I,z=t.pushable,K=void 0===z?0:z,F=t.className,U=void 0===F?"":F,B=t.style,O=void 0===B?{}:B,X=t["aria-label"],q=void 0===X?"Multi-range slider":X,G=t["aria-labelledby"],J=a(e.useState(r),2),Q=J[0],W=J[1],Y=a(e.useState(-1),2),Z=Y[0],_=Y[1],ee=a(e.useState(!1),2),te=ee[0],ae=ee[1],ne=e.useRef(null),le=e.useRef([]);e.useEffect(function(){W(r)},[r]);var re=e.useCallback(function(e){return E?E(e):e.toString()},[E]),oe=e.useCallback(function(e){if(!ne.current)return s;var t=ne.current.getBoundingClientRect(),a=Math.max(0,Math.min(1,(e-t.left)/t.width)),n=s+a*(i-s);return Math.round(n/m)*m},[s,i,m]),se=e.useCallback(function(e){return(e-s)/(i-s)*100},[s,i]),ce=e.useCallback(function(e,t){var a=Math.max(s,Math.min(i,t)),l=n(Q);T?l[e]=a:e>0&&a<l[e-1]+K?l[e]=l[e-1]+K:e<l.length-1&&a>l[e+1]-K?l[e]=l[e+1]-K:l[e]=a,W(l),null==v||v(l)},[Q,T,K,s,i,v]),ie=e.useCallback(function(e,t){var a;b||(e.preventDefault(),_(t),ae(!0),null===(a=le.current[t])||void 0===a||a.focus())},[b]),ue=e.useCallback(function(e,t){var a;b||(e.preventDefault(),_(t),ae(!0),null===(a=le.current[t])||void 0===a||a.focus())},[b]),me=e.useCallback(function(e){if(-1!==Z&&!b){var t=oe(e);ce(Z,t)}},[Z,b,oe,ce]),de=e.useCallback(function(e){me(e.clientX)},[me]),be=e.useCallback(function(e){e.touches.length>0&&me(e.touches[0].clientX)},[me]),ve=e.useCallback(function(){-1!==Z&&(null==f||f(Q),_(-1),ae(!1))},[Z,Q,f]),fe=e.useCallback(function(e){if(!b&&!te){for(var t=oe(e.clientX),a=0,n=Math.abs(Q[0]-t),l=1;l<Q.length;l++){var r=Math.abs(Q[l]-t);r<n&&(n=r,a=l)}ce(a,t),null==f||f(Q)}},[b,te,oe,Q,ce,f]),ge=e.useCallback(function(e,t){if(!b){var a=Q[t],n=(i-s)/10;switch(e.key){case"ArrowLeft":case"ArrowDown":e.preventDefault(),a=Math.max(s,a-(e.shiftKey?n:m)),ce(t,a);break;case"ArrowRight":case"ArrowUp":e.preventDefault(),a=Math.min(i,a+(e.shiftKey?n:m)),ce(t,a);break;case"Home":e.preventDefault(),ce(t,s);break;case"End":e.preventDefault(),ce(t,i);break;case"PageDown":e.preventDefault(),a=Math.max(s,a-n),ce(t,a);break;case"PageUp":e.preventDefault(),a=Math.min(i,a+n),ce(t,a)}}},[b,Q,s,i,m,ce]);e.useEffect(function(){if(-1!==Z){var e=function(e){return de(e)},t=function(e){return be(e)},a=function(){return ve()},n=function(){return ve()};return document.addEventListener("mousemove",e),document.addEventListener("mouseup",a),document.addEventListener("touchmove",t,{passive:!1}),document.addEventListener("touchend",n),function(){document.removeEventListener("mousemove",e),document.removeEventListener("mouseup",a),document.removeEventListener("touchmove",t),document.removeEventListener("touchend",n)}}},[Z,de,be,ve]);var he=n(Q).sort(function(e,t){return e-t}),pe=se(Math.min.apply(Math,n(he))),ye=se(Math.max.apply(Math,n(he)))-pe;return e.createElement("div",{className:"w-full ".concat(U),style:O},h&&e.createElement("div",{className:"flex justify-between mb-2 text-sm text-gray-600"},e.createElement("span",null,re(s)),e.createElement("span",null,re(i))),e.createElement("div",{ref:ne,className:"relative w-full ".concat(V," flex items-center ").concat(b?"cursor-not-allowed opacity-60":"cursor-pointer"," select-none"),style:{touchAction:"none"},onClick:fe,role:"slider","aria-label":q,"aria-labelledby":G,"aria-valuemin":s,"aria-valuemax":i,"aria-valuenow":Q[0]},e.createElement("div",{className:"absolute w-full ".concat(D," ").concat(w," rounded-full top-1/2 transform -translate-y-1/2")}),e.createElement("div",{className:"absolute ".concat(D," ").concat(N," rounded-full top-1/2 transform -translate-y-1/2"),style:{left:"".concat(pe,"%"),width:"".concat(ye,"%")}}),$.map(function(t){return e.createElement("div",{key:t.value,className:"absolute top-1/2 transform -translate-x-1/2",style:{left:"".concat(se(t.value),"%")}},e.createElement("div",{className:"w-0.5 h-3 bg-gray-400 transform -translate-y-1/2"}),t.label&&e.createElement("div",{className:"absolute top-full left-1/2 transform -translate-x-1/2 mt-1 text-xs text-gray-600 whitespace-nowrap"},t.label))}),Q.map(function(t,a){return e.createElement("div",{key:a,ref:function(e){return le.current[a]=e},className:"absolute ".concat(H," ").concat(M," rounded-full top-1/2 transform -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow-lg ").concat(b?"cursor-not-allowed":"cursor-grab hover:shadow-xl focus:ring-4 focus:ring-blue-200 active:cursor-grabbing"," ").concat(Z===a?"ring-4 ring-blue-200":""," transition-all duration-200"),tabIndex:b?-1:0,role:"slider","aria-valuemin":s,"aria-valuemax":i,"aria-valuenow":t,"aria-label":"".concat(q," handle ").concat(a+1),style:{left:"".concat(se(t),"%")},onMouseDown:function(e){return ie(e,a)},onTouchStart:function(e){return ue(e,a)},onKeyDown:function(e){return ge(e,a)}},y&&(Z===a||!te)&&e.createElement("div",{className:"absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2"},e.createElement("div",{className:"px-2 py-1 bg-gray-800 ".concat(L," rounded text-xs whitespace-nowrap")},re(t),e.createElement("div",{className:"absolute top-full left-1/2 transform -translate-x-1/2 border-l-2 border-r-2 border-t-2 border-transparent border-t-gray-800"}))))})),h&&e.createElement("div",{className:"flex gap-2 mt-2 flex-wrap"},Q.map(function(t,a){return e.createElement("div",{key:a,className:"px-2 py-1 bg-gray-100 border border-gray-300 rounded text-sm"},"Handle ",a+1,": ",re(t))})))};exports.MultiSliderPro=r,exports.MultiSliderProDemo=function(){var t=a(e.useState([20,80]),2),n=t[0],l=t[1],o=a(e.useState([10,30,70]),2),s=o[0],c=o[1],i=a(e.useState([25,75]),2),u=i[0],m=i[1];return e.createElement("div",{className:"p-6 max-w-4xl mx-auto space-y-8"},e.createElement("div",null,e.createElement("h1",{className:"text-3xl font-bold mb-6 text-gray-800"},"Multi-Range Slider Component Demo")),e.createElement("div",{className:"space-y-4"},e.createElement("h2",{className:"text-xl font-semibold text-gray-700"},"Basic Two-Handle Slider"),e.createElement(r,{values:n,onChange:l,showLabels:!0,showValueLabels:!0,"aria-label":"Price range"}),e.createElement("p",{className:"text-sm text-gray-600"},"Values: ",n.join(", "))),e.createElement("div",{className:"space-y-4"},e.createElement("h2",{className:"text-xl font-semibold text-gray-700"},"Three-Handle Slider with Custom Styling"),e.createElement(r,{values:s,onChange:c,showLabels:!0,showValueLabels:!0,rangeColor:"bg-red-500",handleColor:"bg-red-500",trackHeight:"h-2",handleSize:"w-6 h-6",formatLabel:function(e){return"".concat(e,"%")},"aria-label":"Performance metrics"}),e.createElement("p",{className:"text-sm text-gray-600"},"Values: ",s.join(", "))),e.createElement("div",{className:"space-y-4"},e.createElement("h2",{className:"text-xl font-semibold text-gray-700"},"Slider with Marks and Custom Range"),e.createElement(r,{values:u,min:0,max:100,step:5,onChange:m,showLabels:!0,marks:[{value:0,label:"0%"},{value:25,label:"25%"},{value:50,label:"50%"},{value:75,label:"75%"},{value:100,label:"100%"}],rangeColor:"bg-green-500",handleColor:"bg-green-500",formatLabel:function(e){return"$".concat(e)},"aria-label":"Budget range"}),e.createElement("p",{className:"text-sm text-gray-600"},"Values: ",u.join(", "))),e.createElement("div",{className:"space-y-4"},e.createElement("h2",{className:"text-xl font-semibold text-gray-700"},"Disabled Slider"),e.createElement(r,{values:[30,70],disabled:!0,showLabels:!0,showValueLabels:!0,"aria-label":"Disabled range"})),e.createElement("div",{className:"space-y-4"},e.createElement("h2",{className:"text-xl font-semibold text-gray-700"},"Advanced Example: Price Range Filter"),e.createElement("div",{className:"p-4 bg-gray-50 rounded-lg"},e.createElement(r,{values:[250,750],min:0,max:1e3,step:50,onChange:function(e){return console.log("Price range changed:",e)},onChangeCommitted:function(e){return console.log("Final price range:",e)},showLabels:!0,showValueLabels:!0,rangeColor:"bg-purple-500",handleColor:"bg-purple-500",trackHeight:"h-2",handleSize:"w-6 h-6",formatLabel:function(e){return"$".concat(e)},marks:[{value:0,label:"$0"},{value:250,label:"$250"},{value:500,label:"$500"},{value:750,label:"$750"},{value:1e3,label:"$1000"}],"aria-label":"Product price range filter"}))),e.createElement("div",{className:"mt-8 p-4 bg-gray-50 rounded-lg"},e.createElement("h2",{className:"text-xl font-semibold text-gray-700 mb-3"},"Keyboard Controls"),e.createElement("div",{className:"text-sm text-gray-600 space-y-1"},e.createElement("div",null,"• ",e.createElement("strong",null,"Arrow keys:")," Move handle by step size"),e.createElement("div",null,"• ",e.createElement("strong",null,"Shift + Arrow keys:")," Move handle by large step (10% of range)"),e.createElement("div",null,"• ",e.createElement("strong",null,"Home/End:")," Move to min/max values"),e.createElement("div",null,"• ",e.createElement("strong",null,"Page Up/Down:")," Move by large step"),e.createElement("div",null,"• ",e.createElement("strong",null,"Tab:")," Navigate between handles"))),e.createElement("div",{className:"mt-8 p-4 bg-blue-50 rounded-lg"},e.createElement("h2",{className:"text-xl font-semibold text-gray-700 mb-3"},"Component Features"),e.createElement("div",{className:"text-sm text-gray-600 space-y-2"},e.createElement("div",null,"✅ ",e.createElement("strong",null,"Multiple handles:")," Support for 2+ handles"),e.createElement("div",null,"✅ ",e.createElement("strong",null,"Keyboard navigation:")," Full keyboard support"),e.createElement("div",null,"✅ ",e.createElement("strong",null,"Mobile friendly:")," Touch events and responsive design"),e.createElement("div",null,"✅ ",e.createElement("strong",null,"Accessibility:")," ARIA labels and screen reader support"),e.createElement("div",null,"✅ ",e.createElement("strong",null,"Customizable:")," Colors, sizes, formatting, and behavior"),e.createElement("div",null,"✅ ",e.createElement("strong",null,"Marks support:")," Visual indicators with custom labels"),e.createElement("div",null,"✅ ",e.createElement("strong",null,"Handle constraints:")," Prevent crossing and set minimum distance"),e.createElement("div",null,"✅ ",e.createElement("strong",null,"Event callbacks:")," onChange and onChangeCommitted"))))};
//# sourceMappingURL=index.js.map