@expofp/floorplan
Version:
Interactive floor plan library for expos and events
2 lines (1 loc) • 1.37 kB
JavaScript
import{jsx as e,jsxs as a}from"react/jsx-runtime";import"./RangeInput.scss";import{t as u}from"../../../../utils/i18n";export function RangeInput({value:n,name:o,min:t,max:r,step:l,onChange:i,isDisabled:p,symbol:f}){const m=()=>i(Math.min(n+l,r)),d=()=>i(Math.max(n-l,t));let s=0;r!==t&&(s=(n-t)/(r-t)*100);let c="-50%";return s===0?c="0":s===100&&(c="-100%"),a("div",{className:"efp-range-input",children:[a("span",{className:"efp-range-input__header",children:[e("button",{type:"button",className:"efp-range-input__control",draggable:"false",onClick:d,disabled:p,"aria-label":u("Decrease"),children:e("i",{className:"icon-minus"})}),a("span",{className:"efp-no-select",children:[o," ",a("strong",{children:[n,f??""]})]}),e("button",{type:"button",className:"efp-range-input__control",draggable:"false",onClick:m,disabled:p,"aria-label":u("Increase"),children:e("i",{className:"icon-plus"})})]}),a("label",{className:"efp-range-input__input-block",children:[e("input",{className:"efp-range-input__input",name:o,type:"range",min:t,max:r,step:l,value:n,disabled:p,onChange:_=>i(Number(_.target.value))}),a("span",{className:"efp-range-input__custom-input",children:[e("span",{className:"efp-range-input__progress",style:{width:`${s}%`}}),e("span",{className:"efp-range-input__thumb",style:{insetInlineStart:`${s}%`,transform:`translateX(${c}) translateY(-50%)`}})]})]})]})}