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

React component library

"use strict";const t=require("react/jsx-runtime"),i=require("react"),f=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),s=require("./utils-BK6B_Y9X.cjs"),z=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),C=({theme:e,size:p})=>{var d=s.getSizeValueWithUnits(e,p);return`
    min-height: ${d};
    max-height: ${d};
  `},m={small:"0.875rem",medium:"1.125rem",large:"1.375rem"},S=f.styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  ${e=>C(e)};

  /* Removing the default appearance */
  & > :is(.thumb, .thumb::-webkit-slider-thumb) {
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
  }

  & > .thumb {
    pointer-events: none;
    position: absolute;
    height: 0;
    width: 100%;
    outline: none;
  }

  & > .thumb--left {
    z-index: 3;
  }

  & > .thumb--right {
    z-index: 4;
  }

  /* For Chrome browsers */
  & > .thumb::-webkit-slider-thumb {
    -webkit-appearance: none; /* Override default look */
    appearance: none;
    width: ${e=>m[e.size]}; /* Set a specific slider handle width */
    height: ${e=>m[e.size]}; /* Slider handle height */
    border-radius: 50%;
    background-color: ${e=>s.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
    cursor: pointer; /* Cursor on hover */
    border: none;
    pointer-events: all;
  }

  /* For Firefox browsers */
  & > .thumb::-moz-range-thumb {
    width: ${e=>m[e.size]}; /* Set a specific slider handle width */
    height: ${e=>m[e.size]}; /* Slider handle height */
    border-radius: 50%;
    background-color: ${e=>s.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
    cursor: pointer; /* Cursor on hover */
    border: none;
    pointer-events: all;
  }
`,N=f.styled.div`
  position: relative;
  width: 100%;
  height: 0.25rem;
  &
    > :is(.slider__track, .slider__range, .slider__left-value, .slider__right-value) {
    position: absolute;
  }

  & > :is(.slider__track, .slider__range) {
    height: 0.25rem;
  }

  & > .slider__track {
    background-color: ${e=>s.getColorRgbaValue(e.theme,"Range",e.color,"enabled","unfilled")};
    width: 100%;
    z-index: 1;
    border-radius: ${e=>s.getBorderRadiusValueWithUnits(e.theme,"regular")};
  }

  & > .slider__range {
    border-radius: ${e=>s.getBorderRadiusValueWithUnits(e.theme,"regular")};
    background-color: ${e=>s.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
    z-index: 2;
  }
`,R=f.styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  position: absolute;
  left: ${e=>`calc(${e.inputValue+"%"} + (${8-e.inputValue*.15}px))`};
  top: ${e=>"calc(-"+m[e.size]+")"};
  transform: translateX(-50%);
  ${e=>s.getComponentTypographyCss(e.theme,"Range",e.size,"enabled")};
  & > .text-content {
    color: white;
    background-color: ${e=>s.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-color: ${e=>s.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;
      }
    }
  }
`,M=i.forwardRef((e,p)=>{const{minValue:d=null,maxValue:v=null,min:c=0,max:h=100,disabled:g=!1,onChange:w=()=>{},color:j="primary",size:V="small",...y}=e,b={theme:z.useTheme(),size:V,color:j},[_,x]=i.useState(),[r,$]=i.useState(d),[a,k]=i.useState(v);i.useEffect(()=>{$(d),k(v)},[d,v]);const u=i.useRef(null),l=i.useCallback(n=>Math.round((n-c)/(h-c)*100),[c,h]);return i.useEffect(()=>{const n=l(r),o=l(a);u.current&&(u.current.style.left=`${n}%`,u.current.style.width=`${o-n}%`)},[r,l]),i.useEffect(()=>{const n=l(r),o=l(a);u.current&&(u.current.style.width=`${o-n}%`)},[a,l]),i.useEffect(()=>{w({min:r,max:a})},[r,a,w]),t.jsxs(S,{disabled:g,...b,...y,children:[_&&r&&t.jsx(t.Fragment,{children:t.jsxs(R,{...b,inputValue:l(r),disabled:g,children:[t.jsx("div",{className:"text-content",children:r}),t.jsx("div",{className:"arrow",children:t.jsx("div",{className:"outer",children:t.jsx("div",{className:"inner"})})})]})}),_&&a&&t.jsx(t.Fragment,{children:t.jsxs(R,{...b,inputValue:l(a),disabled:g,children:[t.jsx("div",{className:"text-content",children:a}),t.jsx("div",{className:"arrow",children:t.jsx("div",{className:"outer",children:t.jsx("div",{className:"inner"})})})]})}),t.jsx("input",{type:"range",min:c,max:h,value:r|"",onChange:n=>{const o=Math.min(Number(n.target.value),a-1);$(o)},className:"thumb thumb--left",style:{zIndex:r>h-100&&"5"},onMouseEnter:()=>{x(!0)},onMouseLeave:()=>{x(!1)}}),t.jsx("input",{type:"range",min:c,max:h,value:a|"",onChange:n=>{const o=Math.max(Number(n.target.value),r+1);k(o)},className:"thumb thumb--right",onMouseEnter:()=>{x(!0)},onMouseLeave:()=>{x(!1)}}),t.jsxs(N,{...b,disabled:g,children:[t.jsx("div",{className:"slider__track"}),t.jsx("div",{ref:u,className:"slider__range"})]})]})});module.exports=M;