@progress/kendo-react-inputs/range-slider/RangeSlider.js

React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),I=require("prop-types"),s=require("@progress/kendo-react-common"),h=require("../messages/index.js"),Q=require("@progress/kendo-react-intl"),r=require("./range-raducer.js"),w=require("../package-metadata.js");function Z(n){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const d in n)if(d!=="default"){const i=Object.getOwnPropertyDescriptor(n,d);Object.defineProperty(l,d,i.get?i:{enumerable:!0,get:()=>n[d]})}}return l.default=n,Object.freeze(l)}const a=Z(J),ee=(n,l,d)=>{const[i,o]=a.useState(n),e=a.useCallback(g=>{const A=r.rangeReducer(l.state||i,{...g,...l});d&&d(A,g.event),o(A)},[l,d]);return[i,e]},K=s.createPropsContext(),O=a.forwardRef((n,l)=>{const d=!s.validatePackage(w.packageMetadata,{component:"RangeSlider"}),i=s.getLicenseMessage(w.packageMetadata),o=s.usePropsContext(K,n),e={step:k.step,largeStep:k.largeStep,defaultValue:k.defaultValue,vertical:k.vertical,disabled:k.disabled,...o},g=a.useRef(null),A=a.useRef(null),$=a.useRef(null),T=a.useRef(null),D=a.useRef(null),M=a.useCallback(()=>{T.current&&T.current.focus()},[T]);a.useImperativeHandle(g,()=>({element:A.current,focus:M,props:e})),a.useImperativeHandle(l,()=>g.current);const f=a.useMemo(()=>e.min,[e.min]),y=a.useMemo(()=>e.max,[e.max]),L=a.useMemo(()=>e.step!==void 0?e.step:k.step,[e.step,k.step]),P=a.useMemo(()=>e.largeStep!==void 0?e.largeStep:k.largeStep,[e.largeStep,k.largeStep]),p=s.useDir(A,e.dir),z=(t,m)=>{e.onChange&&g.current&&e.onChange.call(void 0,{value:t,target:g.current,syntheticEvent:m})},[_,S]=a.useState(""),[N,c]=ee(e.defaultValue||k.defaultValue,{min:f,max:y,step:L,largeStep:P,state:e.value},z),u=a.useMemo(()=>e.value||N,[e.value,N]),V=a.useRef(null),C=a.useRef(null),v=a.useMemo(()=>(u.start-f)/(y-f)*100,[u.start,f,y]),R=a.useMemo(()=>(u.end-f)/(y-f)*100,[u.end,f,y]),q=a.useMemo(()=>e.vertical?{paddingTop:0,height:"100%"}:{},[e.vertical]),j=a.useMemo(()=>e.vertical?{marginTop:"0.5rem",marginBottom:"0.5rem"}:{marginLeft:"0.5rem",marginRight:"0.5rem"},[e.vertical]),G=Q.useLocalization(),E=a.useCallback(t=>{if(!C.current)return;const m=C.current.getBoundingClientRect(),b=e.vertical?m.bottom-t.clientY:p==="rtl"?m.right-t.clientX:t.clientX-m.left,x=e.vertical?m.height:m.width,Y=b/x;return f+Y*(y-f)},[C,e.vertical,p,f,y,N.start,N.end,e.value&&e.value.start,e.value&&e.value.end]),H=a.useCallback(t=>t<=u.start?"start":t>=u.end?"end":2*t<u.end+u.start?"start":"end",[N.start,N.end,e.value&&e.value.start,e.value&&e.value.end]),W=a.useCallback(t=>{switch(t.keyCode){case s.Keys.right:t.preventDefault(),c({type:p==="rtl"?r.RANGE_ACTION.decrease:r.RANGE_ACTION.increase,key:"start",event:t});break;case s.Keys.up:t.preventDefault(),c({type:r.RANGE_ACTION.increase,key:"start",event:t});break;case s.Keys.left:t.preventDefault(),c({type:p==="rtl"?r.RANGE_ACTION.increase:r.RANGE_ACTION.decrease,key:"start",event:t});break;case s.Keys.down:t.preventDefault(),c({type:r.RANGE_ACTION.decrease,key:"start",event:t});break;case s.Keys.home:t.preventDefault(),c({type:r.RANGE_ACTION.min,key:"start",event:t});break;case s.Keys.end:t.preventDefault(),c({type:r.RANGE_ACTION.max,key:"start",event:t});break;case s.Keys.pageDown:t.preventDefault(),c({type:p==="rtl"?r.RANGE_ACTION.increaseLarge:r.RANGE_ACTION.decreaseLarge,key:"start",event:t});break;case s.Keys.pageUp:t.preventDefault(),c({type:p==="rtl"?r.RANGE_ACTION.decreaseLarge:r.RANGE_ACTION.increaseLarge,key:"start",event:t});break}},[c]),B=a.useCallback(t=>{switch(t.keyCode){case s.Keys.right:t.preventDefault(),c({type:p==="rtl"?r.RANGE_ACTION.decrease:r.RANGE_ACTION.increase,key:"end",event:t});break;case s.Keys.up:t.preventDefault(),c({type:r.RANGE_ACTION.increase,key:"end",event:t});break;case s.Keys.left:t.preventDefault(),c({type:p==="rtl"?r.RANGE_ACTION.increase:r.RANGE_ACTION.decrease,key:"end",event:t});break;case s.Keys.down:t.preventDefault(),c({type:r.RANGE_ACTION.decrease,key:"end",event:t});break;case s.Keys.home:t.preventDefault(),c({type:r.RANGE_ACTION.min,key:"end",event:t});break;case s.Keys.end:t.preventDefault(),c({type:r.RANGE_ACTION.max,key:"end",event:t});break;case s.Keys.pageDown:t.preventDefault(),c({type:p==="rtl"?r.RANGE_ACTION.increaseLarge:r.RANGE_ACTION.decreaseLarge,key:"end",event:t});break;case s.Keys.pageUp:t.preventDefault(),c({type:p==="rtl"?r.RANGE_ACTION.decreaseLarge:r.RANGE_ACTION.increaseLarge,key:"end",event:t});break}},[c,p]),U=a.useCallback(t=>{const m=E(t),b=H(m);S(b),b==="end"?D.current.focus():T.current.focus();const x=b==="end"?r.RANGE_ACTION.end:r.RANGE_ACTION.start;c({type:x,payload:m,event:t})},[e.vertical,f,y,c]),X=t=>{const m=E(t),b=_==="end"?r.RANGE_ACTION.end:r.RANGE_ACTION.start;c({type:b,payload:m,event:t})},F=t=>{const m=E(t),b=_==="end"?r.RANGE_ACTION.end:r.RANGE_ACTION.start;c({type:b,payload:m,event:t}),S("")};return s.useDraggable(C,{onPress:U,onDrag:X,onRelease:F},{autoScroll:!1}),a.createElement(a.Fragment,null,a.createElement("div",{id:e.id,style:e.style,ref:A,dir:p,className:s.classNames("k-slider",{"k-rtl":p==="rtl","k-disabled":e.disabled,"k-slider-vertical":e.vertical,"k-slider-horizontal":!e.vertical},e.className)},a.createElement("div",{ref:C,className:"k-slider-track-wrap",style:{flexGrow:1,position:"relative",touchAction:"none",...j}},e.children&&a.createElement("ul",{className:"k-reset k-slider-items",style:{...q}},a.Children.map(e.children,(t,m)=>t&&a.cloneElement(t,{position:100*(t.props.position-e.min)/(e.max-e.min),vertical:e.vertical,firstTick:m===0,lastTick:m===a.Children.count(e.children)-1},t.props.children))),a.createElement("div",{ref:V,className:"k-slider-track",style:e.vertical?{bottom:0,height:"100%"}:{[p==="rtl"?"right":"left"]:0,width:"100%"}},v!==null&&R!==null&&a.createElement("div",{"data-selection":!0,ref:$,title:`${u.start} - ${u.end}`,className:"k-slider-selection",style:e.vertical?{height:R-v+"%",bottom:v+"%"}:{[p==="rtl"?"right":"left"]:v+"%",width:R-v+"%"}}),a.createElement("span",{ref:T,role:"slider",tabIndex:s.getTabIndex(e.startTabIndex,e.disabled,void 0),"aria-valuemin":f,"aria-valuemax":Math.max(y,u.end),"aria-valuenow":u.start,"aria-disabled":e.disabled?"true":void 0,"aria-valuetext":`${u.start} - ${u.end}`,className:"k-draghandle k-draghandle-start",title:G.toLanguageString(h.sliderDragTitle,h.messages[h.sliderDragTitle]),style:e.vertical?{bottom:"calc("+v+"%)",zIndex:1}:p==="rtl"?{right:"calc("+v+"% - 13px)",zIndex:1}:{left:"calc("+v+"%)",zIndex:1},onKeyDown:W}),a.createElement("span",{ref:D,role:"slider",tabIndex:s.getTabIndex(e.endTabIndex,e.disabled,void 0),"aria-valuemin":Math.min(f,u.start),"aria-valuemax":y,"aria-valuenow":u.end,"aria-disabled":e.disabled?"true":void 0,"aria-valuetext":`${u.start} - ${u.end}`,className:"k-draghandle k-draghandle-end",title:G.toLanguageString(h.sliderDragTitle,h.messages[h.sliderDragTitle]),style:e.vertical?{bottom:"calc("+R+"%)",zIndex:1}:p==="rtl"?{right:"calc("+R+"% - 13px)",zIndex:1}:{left:"calc("+R+"%)",zIndex:1},onKeyDown:B})))),d&&a.createElement(s.WatermarkOverlay,{message:i}))}),te={value:(n,l,d)=>{if(n.value){const i=n.value.start,o=n.value.end,e=n.min,g=n.max;if(i>o||i>g||i<e||o>g||o<e||o<i)return new Error(`Invalid prop + ${l} supplied to ${d}.
                    The { start, end } value must be between the min & max value and { start, end } must be start < end.
                    `)}return null},defaultValue:(n,l,d)=>{if(n.defaultValue){const i=n.defaultValue.start,o=n.defaultValue.end,e=n.min,g=n.max;if(i>o||i>g||i<e||o>g||o<e||o<i)return new Error(`Invalid prop + ${l} supplied to ${d}.
                    The { start, end } value must be between the min & max value and { start, end } must be start < end.
                    `)}return null},onChange:I.func,step:I.number,min:(n,l,d)=>{const i=n[l],o=n.min,e=n.max;return o===void 0?new Error(`Invalid prop + ${l} supplied to ${d}.
                ${l} value can not be undefined.
                `):i&&o>=e?new Error(`Invalid prop + ${l} supplied to ${d}.
                ${l} value can not be equal to or bigger than the max value.
                `):null},max:(n,l,d)=>{const i=n[l],o=n.min,e=n.max;return e===void 0?new Error(`Invalid prop + ${l} supplied to ${d}.
                ${l} value can not be undefined.
                `):i&&e<=o?new Error(`Invalid prop + ${l} supplied to ${d}.
                ${l} value can not be equal to or smaller than the min value.
                `):null},vertical:I.bool,disabled:I.bool,dir:I.oneOf(["ltr","rtl"])},k={step:1,largeStep:10,defaultValue:{start:0,end:0},vertical:!1,disabled:!1};O.displayName="KendoReactRangeSlider";O.propTypes=te;exports.RangeSlider=O;exports.RangeSliderPropsContext=K;