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