@lanaco/lnc-react-ui/dist/RangeSlider.cjs

React component library

"use strict";const t=require("react/jsx-runtime"),x=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),r=require("react"),a=require("./utils-BK6B_Y9X.cjs"),F=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),U=require("./useUpdateEffect-BtMgpgIV.cjs"),_=({theme:e,size:i})=>{var u=a.getSizeValueWithUnits(e,i);return`
    min-height: ${u};
    max-height: ${u};
  `},g={small:"0.875rem",medium:"1.125rem",large:"1.375rem"},T=x.styled.div`
  position: relative;
  ${e=>_(e)};
  display: inline-flex;
  align-items: center;
`,E=x.styled.input`
  -webkit-appearance: none; /* Override default CSS styles */
  appearance: none;
  width: 100%; /* Full-width */
  height: 0.25rem; /* Specified height */
  border-radius: 3px;
  outline: none; /* Remove outline */
  -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */
  background: ${e=>e.rangeBackground};
  transition: background 450ms ease-in;
  -webkit-appearance: none;
  border-radius: ${e=>a.getBorderRadiusValueWithUnits(e.theme,"regular")};
  &::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: ${e=>g[e.size]}; /* Set a specific slider handle width */
    height: ${e=>g[e.size]}; /* Slider handle height */
    border-radius: 50%;
    background-color: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background","backgroundOpacity")};
    cursor: pointer; /* Cursor on hover */
    border: none;
  }
  &::-moz-range-thumb {
    width: ${e=>g[e.size]}; /* Set a specific slider handle width */
    height: ${e=>g[e.size]}; /* Slider handle height */
    border-radius: 50%;
    background-color: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background","backgroundOpacity")};
    cursor: pointer; /* Cursor on hover */
    border: none;
  }
`,L=x.styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  ${e=>a.getComponentTypographyCss(e.theme,"Range",e.size,"enabled")};
  left: ${e=>`calc(${e.inputValue+"%"} + (${8-e.inputValue*.15}px))`};
  top: ${e=>"calc(-"+g[e.size]+")"};
  transform: translateX(-50%);
  & > .text-content {
    color: white;
    background-color: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
    border-radius: 3px;
    z-index: 2;
    padding: 2px 6px;
  }
  & > .arrow {
    & > .outer {
      height: 4px;
      position: relative;
      & > .inner {
        width: 8px;
        height: 8px;
        background: ${e=>a.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
        transform: rotate(45deg);
        position: absolute;
        top: -6px;
        left: -4px;
        z-index: 1;
        border-radius: 1px;
      }
    }
  }
`,W=r.forwardRef((e,i)=>{const{defaultValue:u,value:s=null,min:c=0,max:h=100,disabled:l,tabIndex:v=0,onChange:R=()=>{},onInput:k=()=>{},color:d="primary",size:q="small",className:O="",style:M={},...$}=e,C=r.useRef(),b=F.useTheme(),m={theme:b,size:q,color:d,className:O,style:M},w=a.getColorRgbaValue(b,"Range",d,"enabled","unfilled"),[S,N]=r.useState(a.getColorRgbaValue(b,"Range",d,l?"disabled":"enabled","background")),[y,P]=r.useState(),[B,p]=r.useState(),f=r.useCallback(n=>Math.round((n-c)/(h-c)*100),[c,h]),[o,V]=r.useState(s||u);U.useUpdateEffect(()=>{V(s)},[s]),r.useEffect(()=>{j(o||0)},[o,f,l,d]),r.useEffect(()=>{N(a.getColorRgbaValue(b,"Range",d,l?"disabled":"enabled","background"))},[d,l]);const z=n=>{j(n.target.value),k&&k(n)},j=n=>{P(`linear-gradient(to right, ${S} 0%, ${S} ${f(n)}%, ${w} ${f(n)}%, ${w} 100%)`)},I=n=>{V(n.target.value),R&&R(n)};return t.jsxs(T,{...m,children:[B&&o&&t.jsx(t.Fragment,{children:t.jsxs(L,{...m,inputValue:f(o),children:[t.jsx("div",{className:"text-content",children:o}),t.jsx("div",{className:"arrow",children:t.jsx("div",{className:"outer",children:t.jsx("div",{className:"inner"})})})]})}),s==null||s=="undefined"?t.jsx(E,{ref:i||C,id:"fader",type:"range",min:c,max:h,defaultValue:u,disabled:l,tabIndex:v,onMouseEnter:()=>{p(!0)},onMouseLeave:()=>{p(!1)},rangeBackground:y,onInput:z,onChange:I,...m,...$}):t.jsx(E,{ref:i||C,id:"fader",type:"range",min:c,max:h,value:o,disabled:l,tabIndex:v,onMouseEnter:()=>{p(!0)},onMouseLeave:()=>{p(!1)},rangeBackground:y,onInput:z,onChange:I,...m,...$})]})});module.exports=W;