react-enhanced-slider/dist/index.cjs.js

Feature-rich slider component for React with step controls, smooth animations and full customization.

"use strict";var e=require("react/jsx-runtime"),t=require("react");function n(e,{min:t,max:n}){return(e-t)/(n-t)*100}function r(e,{min:t,max:n,step:r}){if(r>n-t)return t;const a=r.toString().split(".")[1]?.length||0,o=Math.pow(10,a);let u=t+Math.round((e-t)/r)*r;u=Math.round(u*o)/o;const s=Math.min(n,Math.max(t,u));return Number(s.toFixed(a))}exports.Slider=({range:a={min:0,max:100,step:1},defaultValue:o=r((a.min+a.max)/2,a),onChange:u,className:s,showBar:l=!1,thumbColor:i="#3b82f6",barColor:c="#3b82f6"})=>{const{min:d,max:m,step:h}=a,[v,f]=t.useState(o),x=t.useRef(v),[b,g]=t.useState(!1),p=t.useRef(null),[S,w]=t.useState(v.toString()),C=t.useCallback((e=>{const t=r(e,a);e==t&&(w(t.toString()),u?.(t)),x.current=e,f(e)}),[u,a]),M=t.useCallback((e=>{const t=r(e,a);x.current=t,f(t),w(t.toString()),u?.(t)}),[u,a]),y=t.useCallback((e=>{if(!p.current)return d;const t=p.current.getBoundingClientRect(),n=function(e,{min:t,max:n}){return e*(n-t)/100+t}(Math.min(t.width,Math.max(0,e-t.left))/t.width*100,a);return n}),[d,m,h]),N=t.useCallback((e=>{e.preventDefault(),g(!0);const t="touches"in e?e.touches[0].clientX:e.clientX,n=y(t);C(n);const o=e=>{const t=e,n="touches"in t?t.touches[0].clientX:t.clientX,r=y(n);M(r)},u=()=>{g(!1),document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",u),document.removeEventListener("touchmove",o),document.removeEventListener("touchend",u),C(r(x.current,a))};document.addEventListener("mousemove",o),document.addEventListener("mouseup",u),document.addEventListener("touchmove",o),document.addEventListener("touchend",u)}),[y]);return t.useEffect((()=>{const e=r(v,a);e!==v&&(f(e),w(e.toString()),u?.(e))}),[a]),e.jsxs("div",{className:`react-slider relative h-4 w-xs ${s}`,children:[e.jsx("div",{ref:p,className:"absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-gray-300 cursor-pointer",onMouseDown:N,onTouchStart:N,role:"slider","aria-valuemin":d,"aria-valuemax":m,"aria-valuenow":v,children:l?e.jsx("div",{className:"h-full rounded-full "+(b?"":"transition-all duration-500"),style:{width:`${n(v,a)}%`,backgroundColor:c}}):null}),e.jsx("div",{className:"group absolute top-1/2 h-6 w-6 -translate-x-1/2 -translate-y-1/2 rounded-full "+(b?"":"transition-all duration-500"),style:{left:`${n(v,a)}%`,backgroundColor:`${i}${Math.round(76.5).toString(16).padStart(2,"0")}`},onMouseDown:N,onTouchStart:N,children:e.jsx("div",{className:"absolute top-1/2 left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rounded-full shadow-md transition-transform duration-200 ease-in-out group-hover:scale-[3]",style:{backgroundColor:i}})}),e.jsx("input",{type:"number",value:S,onChange:e=>{const t=Number(e.target.value),n=Math.min(Math.max(t,d),m);w(n.toString()),C(n)},onBlur:()=>{M(Number(S))},min:d,max:m,step:h,className:"absolute top-1/2 left-full ml-6 w-16 -translate-y-1/2 text-center border border-gray-300 rounded","aria-label":"Slider value"})]})};
//# sourceMappingURL=index.cjs.js.map