primevue/slider/slider.min.js

[](https://opensource.org/licenses/MIT) [](https://badge.fury.io/js/primevue) [![Discord Chat](https://img.shields.io/discord/55794023

this.primevue=this.primevue||{},this.primevue.slider=function(e,t){"use strict";var i={name:"Slider",emits:["update:modelValue","change","slideend"],props:{modelValue:[Number,Array],min:{type:Number,default:0},max:{type:Number,default:100},orientation:{type:String,default:"horizontal"},step:{type:Number,default:null},range:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},ariaLabelledBy:{type:String,default:null}},dragging:!1,handleIndex:null,initX:null,initY:null,barWidth:null,barHeight:null,dragListener:null,dragEndListener:null,beforeUnmount(){this.unbindDragListeners()},methods:{updateDomData(){let t=this.$el.getBoundingClientRect();this.initX=t.left+e.DomHandler.getWindowScrollLeft(),this.initY=t.top+e.DomHandler.getWindowScrollTop(),this.barWidth=this.$el.offsetWidth,this.barHeight=this.$el.offsetHeight},setValue(e){let t,i=e.touches?e.touches[0].pageX:e.pageX,n=e.touches?e.touches[0].pageY:e.pageY;t="horizontal"===this.orientation?100*(i-this.initX)/this.barWidth:100*(this.initY+this.barHeight-n)/this.barHeight;let a=(this.max-this.min)*(t/100)+this.min;if(this.step){const e=this.range?this.modelValue[this.handleIndex]:this.modelValue,t=a-e;t<0?a=e+Math.ceil(a/this.step-e/this.step)*this.step:t>0&&(a=e+Math.floor(a/this.step-e/this.step)*this.step)}else a=Math.floor(a);this.updateModel(e,a)},updateModel(e,t){let i,n=parseFloat(t.toFixed(10));if(this.range)if(i=this.modelValue?[...this.modelValue]:[],0==this.handleIndex){let e=this.modelValue?this.modelValue[1]:this.max;n<this.min?n=this.min:n>=e&&(n=e),i[0]=n,i[1]=i[1]||this.max}else{let e=this.modelValue?this.modelValue[0]:this.min;n>this.max?n=this.max:n<=e&&(n=e),i[0]=i[0]||this.min,i[1]=n}else n<this.min?n=this.min:n>this.max&&(n=this.max),i=n;this.$emit("update:modelValue",i),this.$emit("change",i)},onDragStart(t,i){this.disabled||(e.DomHandler.addClass(this.$el,"p-slider-sliding"),this.dragging=!0,this.updateDomData(),this.handleIndex=i,t.preventDefault())},onDrag(e){this.dragging&&(this.setValue(e),e.preventDefault())},onDragEnd(t){this.dragging&&(this.dragging=!1,e.DomHandler.removeClass(this.$el,"p-slider-sliding"),this.$emit("slideend",{originalEvent:t,value:this.modelValue}))},onBarClick(t){this.disabled||e.DomHandler.hasClass(t.target,"p-slider-handle")||(this.updateDomData(),this.setValue(t))},onMouseDown(e,t){this.bindDragListeners(),this.onDragStart(e,t)},onKeyDown(e,t){switch(this.handleIndex=t,e.which){case 40:this.vertical&&(this.decrementValue(e,t),e.preventDefault());break;case 38:this.vertical&&(this.incrementValue(e,t),e.preventDefault());break;case 37:this.horizontal&&(this.decrementValue(e,t),e.preventDefault());break;case 39:this.horizontal&&(this.incrementValue(e,t),e.preventDefault())}},decrementValue(e,t){let i;i=this.range?this.step?this.modelValue[t]-this.step:this.modelValue[t]-1:this.step?this.modelValue-this.step:this.modelValue-1,this.updateModel(e,i),e.preventDefault()},incrementValue(e,t){let i;i=this.range?this.step?this.modelValue[t]+this.step:this.modelValue[t]+1:this.step?this.modelValue+this.step:this.modelValue+1,this.updateModel(e,i),e.preventDefault()},bindDragListeners(){this.dragListener||(this.dragListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.dragListener)),this.dragEndListener||(this.dragEndListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.dragEndListener))},unbindDragListeners(){this.dragListener&&(document.removeEventListener("mousemove",this.dragListener),this.dragListener=null),this.dragEndListener&&(document.removeEventListener("mouseup",this.dragEndListener),this.dragEndListener=null)}},computed:{containerClass(){return["p-slider p-component",{"p-disabled":this.disabled,"p-slider-horizontal":"horizontal"===this.orientation,"p-slider-vertical":"vertical"===this.orientation}]},horizontal(){return"horizontal"===this.orientation},vertical(){return"vertical"===this.orientation},rangeStyle(){return this.range?this.horizontal?{left:this.rangeStartPosition+"%",width:this.rangeEndPosition-this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%",height:this.rangeEndPosition-this.rangeStartHandlePosition+"%"}:this.horizontal?{width:this.handlePosition+"%"}:{height:this.handlePosition+"%"}},handleStyle(){return this.horizontal?{left:this.handlePosition+"%"}:{bottom:this.handlePosition+"%"}},handlePosition(){return this.modelValue<this.min?0:this.modelValue>this.max?100:100*(this.modelValue-this.min)/(this.max-this.min)},rangeStartPosition(){return this.modelValue&&this.modelValue[0]?100*(this.modelValue[0]<this.min?0:this.modelValue[0]-this.min)/(this.max-this.min):0},rangeEndPosition(){return this.modelValue&&this.modelValue[1]?100*(this.modelValue[1]>this.max?100:this.modelValue[1]-this.min)/(this.max-this.min):100},rangeStartHandleStyle(){return this.horizontal?{left:this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%"}},rangeEndHandleStyle(){return this.horizontal?{left:this.rangeEndPosition+"%"}:{bottom:this.rangeEndPosition+"%"}}}};return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===i&&n.firstChild?n.insertBefore(a,n.firstChild):n.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}("\n.p-slider {\n\tposition: relative;\n}\n.p-slider .p-slider-handle {\n\tposition: absolute;\n\tcursor: -webkit-grab;\n\tcursor: grab;\n    -ms-touch-action: none;\n        touch-action: none;\n    display: block;\n}\n.p-slider-range {\n\tposition: absolute;\n    display: block;\n}\n.p-slider-horizontal .p-slider-range {\n    top: 0;\n    left: 0;\n\theight: 100%;\n}\n.p-slider-horizontal .p-slider-handle {\n    top: 50%;\n}\n.p-slider-vertical {\n\theight: 100px;\n}\n.p-slider-vertical .p-slider-handle {\n    left: 50%;\n}\n.p-slider-vertical .p-slider-range {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n"),i.render=function(e,i,n,a,l,s){return t.openBlock(),t.createBlock("div",{class:s.containerClass,onClick:i[16]||(i[16]=(...e)=>s.onBarClick&&s.onBarClick(...e))},[t.createVNode("span",{class:"p-slider-range",style:s.rangeStyle},null,4),n.range?t.createCommentVNode("",!0):(t.openBlock(),t.createBlock("span",{key:0,class:"p-slider-handle",style:s.handleStyle,onTouchstart:i[1]||(i[1]=e=>s.onDragStart(e)),onTouchmove:i[2]||(i[2]=e=>s.onDrag(e)),onTouchend:i[3]||(i[3]=e=>s.onDragEnd(e)),onMousedown:i[4]||(i[4]=e=>s.onMouseDown(e)),onKeydown:i[5]||(i[5]=e=>s.onKeyDown(e)),tabindex:"0",role:"slider","aria-valuemin":n.min,"aria-valuenow":n.modelValue,"aria-valuemax":n.max,"aria-labelledby":n.ariaLabelledBy},null,44,["aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby"])),n.range?(t.openBlock(),t.createBlock("span",{key:1,class:"p-slider-handle",style:s.rangeStartHandleStyle,onTouchstart:i[6]||(i[6]=e=>s.onDragStart(e,0)),onTouchmove:i[7]||(i[7]=e=>s.onDrag(e)),onTouchend:i[8]||(i[8]=e=>s.onDragEnd(e)),onMousedown:i[9]||(i[9]=e=>s.onMouseDown(e,0)),onKeydown:i[10]||(i[10]=e=>s.onKeyDown(e)),tabindex:"0",role:"slider","aria-valuemin":n.min,"aria-valuenow":n.modelValue?n.modelValue[0]:null,"aria-valuemax":n.max,"aria-labelledby":n.ariaLabelledBy},null,44,["aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby"])):t.createCommentVNode("",!0),n.range?(t.openBlock(),t.createBlock("span",{key:2,class:"p-slider-handle",style:s.rangeEndHandleStyle,onTouchstart:i[11]||(i[11]=e=>s.onDragStart(e,1)),onTouchmove:i[12]||(i[12]=e=>s.onDrag(e)),onTouchend:i[13]||(i[13]=e=>s.onDragEnd(e)),onMousedown:i[14]||(i[14]=e=>s.onMouseDown(e,1)),onKeydown:i[15]||(i[15]=e=>s.onKeyDown(e,1)),tabindex:"0",role:"slider","aria-valuemin":n.min,"aria-valuenow":n.modelValue?n.modelValue[1]:null,"aria-valuemax":n.max,"aria-labelledby":n.ariaLabelledBy},null,44,["aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby"])):t.createCommentVNode("",!0)],2)},i}(primevue.utils,Vue);