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

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

import e,{useState as t,useRef as a,useEffect as n,useCallback as r}from"react";function l(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 o(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,r,l,o,s=[],c=!0,i=!1;try{if(l=(a=a.call(e)).next,0===t){if(Object(a)!==a)return;c=!1}else for(;!(c=(n=l.call(a)).done)&&(s.push(n.value),s.length!==t);c=!0);}catch(e){i=!0,r=e}finally{try{if(!c&&null!=a.return&&(o=a.return(),Object(o)!==o))return}finally{if(i)throw r}}return s}}(e,t)||c(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 s(e){return function(e){if(Array.isArray(e))return l(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||c(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 c(e,t){if(e){if("string"==typeof e)return l(e,t);var a={}.toString.call(e).slice(8,-1);return"Object"===a&&e.constructor&&(a=e.constructor.name),"Map"===a||"Set"===a?Array.from(e):"Arguments"===a||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(a)?l(e,t):void 0}}document.head.appendChild(document.createElement("style")).textContent="@tailwind base;@tailwind components;@tailwind utilities;";var i=function(l){var c=l.values,i=void 0===c?[20,80]:c,u=l.min,m=void 0===u?0:u,d=l.max,v=void 0===d?100:d,b=l.step,f=void 0===b?1:b,g=l.disabled,h=void 0!==g&&g,p=l.onChange,y=l.onChangeCommitted,E=l.showLabels,x=void 0!==E&&E,w=l.showValueLabels,N=void 0!==w&&w,C=l.formatLabel,M=l.trackColor,L=void 0===M?"bg-gray-300":M,k=l.rangeColor,S=void 0===k?"bg-blue-500":k,A=l.handleColor,D=void 0===A?"bg-blue-500":A,P=l.labelColor,H=void 0===P?"text-white":P,j=l.trackHeight,V=void 0===j?"h-1":j,$=l.handleSize,I=void 0===$?"w-5 h-5":$,T=l.containerHeight,z=void 0===T?"h-10":T,R=l.marks,K=void 0===R?[]:R,F=l.allowCross,U=void 0!==F&&F,B=l.pushable,O=void 0===B?0:B,X=l.className,q=void 0===X?"":X,G=l.style,J=void 0===G?{}:G,Q=l["aria-label"],W=void 0===Q?"Multi-range slider":Q,Y=l["aria-labelledby"],Z=o(t(i),2),_=Z[0],ee=Z[1],te=o(t(-1),2),ae=te[0],ne=te[1],re=o(t(!1),2),le=re[0],oe=re[1],se=a(null),ce=a([]);n(function(){ee(i)},[i]);var ie=r(function(e){return C?C(e):e.toString()},[C]),ue=r(function(e){if(!se.current)return m;var t=se.current.getBoundingClientRect(),a=Math.max(0,Math.min(1,(e-t.left)/t.width)),n=m+a*(v-m);return Math.round(n/f)*f},[m,v,f]),me=r(function(e){return(e-m)/(v-m)*100},[m,v]),de=r(function(e,t){var a=Math.max(m,Math.min(v,t)),n=s(_);U?n[e]=a:e>0&&a<n[e-1]+O?n[e]=n[e-1]+O:e<n.length-1&&a>n[e+1]-O?n[e]=n[e+1]-O:n[e]=a,ee(n),null==p||p(n)},[_,U,O,m,v,p]),ve=r(function(e,t){var a;h||(e.preventDefault(),ne(t),oe(!0),null===(a=ce.current[t])||void 0===a||a.focus())},[h]),be=r(function(e,t){var a;h||(e.preventDefault(),ne(t),oe(!0),null===(a=ce.current[t])||void 0===a||a.focus())},[h]),fe=r(function(e){if(-1!==ae&&!h){var t=ue(e);de(ae,t)}},[ae,h,ue,de]),ge=r(function(e){fe(e.clientX)},[fe]),he=r(function(e){e.touches.length>0&&fe(e.touches[0].clientX)},[fe]),pe=r(function(){-1!==ae&&(null==y||y(_),ne(-1),oe(!1))},[ae,_,y]),ye=r(function(e){if(!h&&!le){for(var t=ue(e.clientX),a=0,n=Math.abs(_[0]-t),r=1;r<_.length;r++){var l=Math.abs(_[r]-t);l<n&&(n=l,a=r)}de(a,t),null==y||y(_)}},[h,le,ue,_,de,y]),Ee=r(function(e,t){if(!h){var a=_[t],n=(v-m)/10;switch(e.key){case"ArrowLeft":case"ArrowDown":e.preventDefault(),a=Math.max(m,a-(e.shiftKey?n:f)),de(t,a);break;case"ArrowRight":case"ArrowUp":e.preventDefault(),a=Math.min(v,a+(e.shiftKey?n:f)),de(t,a);break;case"Home":e.preventDefault(),de(t,m);break;case"End":e.preventDefault(),de(t,v);break;case"PageDown":e.preventDefault(),a=Math.max(m,a-n),de(t,a);break;case"PageUp":e.preventDefault(),a=Math.min(v,a+n),de(t,a)}}},[h,_,m,v,f,de]);n(function(){if(-1!==ae){var e=function(e){return ge(e)},t=function(e){return he(e)},a=function(){return pe()},n=function(){return pe()};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)}}},[ae,ge,he,pe]);var xe=s(_).sort(function(e,t){return e-t}),we=me(Math.min.apply(Math,s(xe))),Ne=me(Math.max.apply(Math,s(xe)))-we;return e.createElement("div",{className:"w-full ".concat(q),style:J},x&&e.createElement("div",{className:"flex justify-between mb-2 text-sm text-gray-600"},e.createElement("span",null,ie(m)),e.createElement("span",null,ie(v))),e.createElement("div",{ref:se,className:"relative w-full ".concat(z," flex items-center ").concat(h?"cursor-not-allowed opacity-60":"cursor-pointer"," select-none"),style:{touchAction:"none"},onClick:ye,role:"slider","aria-label":W,"aria-labelledby":Y,"aria-valuemin":m,"aria-valuemax":v,"aria-valuenow":_[0]},e.createElement("div",{className:"absolute w-full ".concat(V," ").concat(L," rounded-full top-1/2 transform -translate-y-1/2")}),e.createElement("div",{className:"absolute ".concat(V," ").concat(S," rounded-full top-1/2 transform -translate-y-1/2"),style:{left:"".concat(we,"%"),width:"".concat(Ne,"%")}}),K.map(function(t){return e.createElement("div",{key:t.value,className:"absolute top-1/2 transform -translate-x-1/2",style:{left:"".concat(me(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))}),_.map(function(t,a){return e.createElement("div",{key:a,ref:function(e){return ce.current[a]=e},className:"absolute ".concat(I," ").concat(D," rounded-full top-1/2 transform -translate-x-1/2 -translate-y-1/2 border-2 border-white shadow-lg ").concat(h?"cursor-not-allowed":"cursor-grab hover:shadow-xl focus:ring-4 focus:ring-blue-200 active:cursor-grabbing"," ").concat(ae===a?"ring-4 ring-blue-200":""," transition-all duration-200"),tabIndex:h?-1:0,role:"slider","aria-valuemin":m,"aria-valuemax":v,"aria-valuenow":t,"aria-label":"".concat(W," handle ").concat(a+1),style:{left:"".concat(me(t),"%")},onMouseDown:function(e){return ve(e,a)},onTouchStart:function(e){return be(e,a)},onKeyDown:function(e){return Ee(e,a)}},N&&(ae===a||!le)&&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(H," rounded text-xs whitespace-nowrap")},ie(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"}))))})),x&&e.createElement("div",{className:"flex gap-2 mt-2 flex-wrap"},_.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,": ",ie(t))})))};function u(){var a=o(t([20,80]),2),n=a[0],r=a[1],l=o(t([10,30,70]),2),s=l[0],c=l[1],u=o(t([25,75]),2),m=u[0],d=u[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(i,{values:n,onChange:r,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(i,{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(i,{values:m,min:0,max:100,step:5,onChange:d,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: ",m.join(", "))),e.createElement("div",{className:"space-y-4"},e.createElement("h2",{className:"text-xl font-semibold text-gray-700"},"Disabled Slider"),e.createElement(i,{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(i,{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"))))}export{i as MultiSliderPro,u as MultiSliderProDemo};
//# sourceMappingURL=index.esm.js.map