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

TODO

/**
 * @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 s=require("vue"),r=require("@progress/kendo-vue-common"),n=require("../messages/main.js"),c=require("@progress/kendo-vue-intl"),a=require("./range-raducer.js"),h=require("../package-metadata.js"),u=s.defineComponent({name:"KendoRangeSlider",model:{event:"changemodel"},props:{id:String,value:{type:Object,validator:function(e){return e.start<=e.end}},defaultValue:{type:Object,default:function(){return{start:0,end:0}},validator:function(e){return e.start<=e.end}},step:{type:Number,default:1},min:{type:Number,required:!0},max:{type:Number,required:!0},vertical:Boolean,disabled:Boolean,dir:{type:String,default:"ltr",validator:function(e){return[null,"ltr","rtl"].includes(e)}},startTabIndex:Number,endTabIndex:Number},provide(){return{kendoMin:this.$props.min,kendoMax:this.$props.max,kendoVertical:this.$props.vertical}},inject:{kendoLocalizationService:{default:null}},created(){r.validatePackage(h.packageMetadata)},data(){return{currentValue:this.defaultValue,currentDrag:"",currentDir:"ltr"}},computed:{computedValue(){return this.$props.value!==void 0?this.$props.value:this.currentValue},percentStart(){return(this.computedValue.start-this.min)/(this.max-this.min)*100},percentEnd(){return(this.computedValue.end-this.min)/(this.max-this.min)*100},sliderItemsStyle(){return this.vertical?{paddingTop:0,height:"100%"}:{}},trackStyles(){return this.vertical?{marginTop:"0.5rem",marginBottom:"0.5rem"}:{marginLeft:"0.5rem",marginRight:"0.5rem"}}},mounted(){if(this.sliderRef=this.$refs.sliderRef,this.sliderSelectionRef=this.$refs.sliderSelectionRef,this.startHandle=this.$refs.startHandle,this.endHandle=this.$refs.endHandle,this.sliderTrackRef=this.$refs.sliderTrackRef,this.sliderTrackWrapRef=this.$refs.sliderTrackWrapRef,!this.currentDir&&window&&this.$el){const e=window.getComputedStyle(this.$el).direction;e&&(this.currentDir=e)}},setup(){const e=s.ref(null),t=s.inject("kendoLocalizationService",{});return{inputRef:e,kendoLocalizationService:t}},render(){const e=c.provideLocalizationService(this),t=r.getDefaultSlots(this),{id:i,dir:l}=this.$props;return s.createVNode("div",{id:i,dir:this.currentDir,class:r.classNames("k-slider",{"k-rtl":this.currentDir==="rtl","k-disabled":this.$props.disabled,"k-slider-vertical":this.$props.vertical,"k-slider-horizontal":!this.$props.vertical},this.$props.class),"aria-labelledby":this.$props.ariaLabelledBy,"aria-describedby":this.$props.ariaDescribedBy},[s.createVNode(r.Draggable,{onDrag:this.handleTrackDrag,onPress:this.handleTrackPress,onRelease:this.handleTrackRelease,ref:"draggable"},{default:()=>[s.createVNode("div",{ref:"sliderTrackWrapRef",class:"k-slider-track-wrap",style:{flexGrow:1,position:"relative",touchAction:"none",...this.trackStyles}},[t&&s.createVNode("ul",{class:"k-reset k-slider-items",style:{...this.sliderItemsStyle}},[t]),s.createVNode("div",{ref:"sliderTrackRef",class:"k-slider-track",style:this.$props.vertical?{bottom:0,height:"100%"}:{[this.currentDir==="rtl"?"right":"left"]:0,width:"100%"}},[this.percentStart!==null&&this.percentEnd!==null&&s.createVNode("div",{"data-selection":!0,ref:"sliderSelectionRef",title:`${this.computedValue.start} - ${this.computedValue.end}`,class:"k-slider-selection",style:this.vertical?{height:this.percentEnd-this.percentStart+"%",bottom:this.percentStart+"%"}:{[this.currentDir==="rtl"?"right":"left"]:this.percentStart+"%",width:this.percentEnd-this.percentStart+"%"}},null),s.createVNode("span",{ref:"startHandle",role:"slider",tabindex:r.getTabIndex(this.startTabIndex,this.$props.disabled,void 0),"aria-valuemin":this.min,"aria-valuemax":Math.max(this.max,this.computedValue.end),"aria-valuenow":this.computedValue.start,"aria-disabled":this.disabled?"true":void 0,"aria-valuetext":this.computedValue.start,class:"k-draghandle",title:e.toLanguageString(n.sliderDragTitle,n.messages[n.sliderDragTitle]),style:this.vertical?{bottom:"calc("+this.percentStart+"%)",zIndex:1}:this.currentDir==="rtl"?{right:"calc("+this.percentStart+"% - 13px)",zIndex:1}:{left:"calc("+this.percentStart+"%)",zIndex:1},onKeydown:this.handleStartKeyDown},null),s.createVNode("span",{ref:"endHandle",role:"slider",tabindex:r.getTabIndex(this.endTabIndex,this.$props.disabled,void 0),"aria-valuemin":Math.min(this.min,this.computedValue.start),"aria-valuemax":this.max,"aria-valuenow":this.computedValue.end,"aria-disabled":this.disabled?"true":void 0,"aria-valuetext":this.computedValue.end,class:"k-draghandle",title:e.toLanguageString(n.sliderDragTitle,n.messages[n.sliderDragTitle]),style:this.vertical?{bottom:"calc("+this.percentEnd+"%)",zIndex:1}:this.currentDir==="rtl"?{right:"calc("+this.percentEnd+"% - 13px)",zIndex:1}:{left:"calc("+this.percentEnd+"%)",zIndex:1},onKeydown:this.handleEndKeyDown},null)])])]})])},methods:{dispatchStateValue(e){const t=a.rangeReducer({start:this.computedValue.start,end:this.computedValue.end},{...e,min:this.min,max:this.max,step:this.step});this.currentValue.start=t.start,this.currentValue.end=t.end,this.$emit("change",{min:this.min,max:this.max,step:this.step,value:{start:t.start,end:t.end}})},focus(){this.startHandle&&this.startHandle.focus()},handleChange(e,t){this.$emit("change",{value:e,event:t})},calcNewDistance(e){if(!this.sliderTrackWrapRef)return;e.originalEvent.preventDefault();const t=this.sliderTrackWrapRef.getBoundingClientRect(),i=this.$props.vertical?t.bottom-e.clientY:this.currentDir==="rtl"?t.right-e.clientX:e.clientX-t.left,l=this.$props.vertical?t.height:t.width,d=i/l;return this.min+d*(this.max-this.min)},calcKey(e){return e<=this.computedValue.start?"start":e>=this.computedValue.end?"end":2*e<this.computedValue.end+this.computedValue.start?"start":"end"},handleStartKeyDown(e){switch(e.keyCode){case r.Keys.right:e.preventDefault(),this.dispatchStateValue({type:this.currentDir==="rtl"?a.RANGE_ACTION.decrease:a.RANGE_ACTION.increase,key:"start",event:e});break;case r.Keys.up:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.increase,key:"start",event:e});break;case r.Keys.left:e.preventDefault(),this.dispatchStateValue({type:this.currentDir==="rtl"?a.RANGE_ACTION.increase:a.RANGE_ACTION.decrease,key:"start",event:e});break;case r.Keys.down:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.decrease,key:"start",event:e});break;case r.Keys.home:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.min,key:"start",event:e});break;case r.Keys.end:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.max,key:"start",event:e});break}},handleEndKeyDown(e){switch(e.keyCode){case r.Keys.right:e.preventDefault(),this.dispatchStateValue({type:this.currentDir==="rtl"?a.RANGE_ACTION.decrease:a.RANGE_ACTION.increase,key:"end",event:e});break;case r.Keys.up:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.increase,key:"end",event:e});break;case r.Keys.left:e.preventDefault(),this.dispatchStateValue({type:this.currentDir==="rtl"?a.RANGE_ACTION.increase:a.RANGE_ACTION.decrease,key:"end",event:e});break;case r.Keys.down:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.decrease,key:"end",event:e});break;case r.Keys.home:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.min,key:"end",event:e});break;case r.Keys.end:e.preventDefault(),this.dispatchStateValue({type:a.RANGE_ACTION.max,key:"end",event:e});break}},handleTrackPress(e){const t=this.calcNewDistance(e),i=this.calcKey(t);this.currentDrag=i,i==="end"?this.endHandle.focus():this.startHandle.focus();const l=i==="end"?a.RANGE_ACTION.end:a.RANGE_ACTION.start;this.dispatchStateValue({type:l,payload:t,event:e})},handleTrackDrag(e){const t=this.calcNewDistance(e),i=this.currentDrag==="end"?a.RANGE_ACTION.end:a.RANGE_ACTION.start;this.dispatchStateValue({type:i,payload:t,event:e})},handleTrackRelease(e){const t=this.calcNewDistance(e),i=this.currentDrag==="end"?a.RANGE_ACTION.end:a.RANGE_ACTION.start;this.dispatchStateValue({type:i,payload:t,event:e}),this.currentDrag=""}}});exports.RangeSlider=u;