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

React component library

"use strict";const t=require("react/jsx-runtime"),i=require("react"),v=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),s=require("./index-BPVoEhTF.cjs"),o=require("./utils-NZLCh-J5.cjs"),S=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),C=({theme:e,size:y})=>{var u=o.getSizeValueWithUnits(e,y);return`
    min-height: ${u};
    max-height: ${u};
  `},b={small:"0.875rem",medium:"1.125rem",large:"1.375rem"},N=v.newStyled.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=>b[e.size]}; /* Set a specific slider handle width */
    height: ${e=>b[e.size]}; /* Slider handle height */
    border-radius: 50%;
    background-color: ${e=>o.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=>b[e.size]}; /* Set a specific slider handle width */
    height: ${e=>b[e.size]}; /* Slider handle height */
    border-radius: 50%;
    background-color: ${e=>o.getColorRgbaValue(e.theme,"Range",e.color,e.disabled===!0?"disabled":"enabled","background")};
    cursor: pointer; /* Cursor on hover */
    border: none;
    pointer-events: all;
  }
`,T=v.newStyled.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=>o.getColorRgbaValue(e.theme,"Range",e.color,"enabled","unfilled")};
    width: 100%;
    z-index: 1;
    border-radius: ${e=>o.getBorderRadiusValueWithUnits(e.theme,"regular")};
  }

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