https://burtsbeesbaby.com/cdn/shop/t/697/assets/range-slider.js?v=1874270551365346031790879277

1const{debounce,formatMoney}=window.BAO.Utils;class RangeSlider extends window.BAO.CustomElement(){static get requiredAttributes(){return["min","max"]}static get requiredElements(){return["touchLeft","touchRight","line","min","max"]}connectedCallback(){super.connectedCallback(),this.startX=0,this.x=0,this.selectedTouchEl=null,this.isBeingInteractedWith=!1,this.setTouchElPositions(),this.setupAccessibility()}setupListeners(){super.setupListeners(),this.onStart=this.onStart.bind(this),this.onStop=this.onStop.bind(this),this.onMove=this.onMove.bind(this),this.onKeyDown=this.onKeyDown.bind(this),this.listeners.add(this.touchLeftEl,"mousedown",this.onStart),this.listeners.add(this.touchRightEl,"mousedown",this.onStart),this.listeners.add(this.touchLeftEl,"touchstart",this.onStart),this.listeners.add(this.touchRightEl,"touchstart",this.onStart),this.listeners.add(this.touchLeftEl,"keydown",this.onKeyDown),this.listeners.add(this.touchRightEl,"keydown",this.onKeyDown),this.onResize=this.onResize.bind(this),this.debouncedResize=debounce(event=>{this.onResize(event)},240),this.listeners.add(window,"resize",this.debouncedResize);const detailsEl=this.closest("details");detailsEl&&this.listeners.add(detailsEl,"toggle",this.handleDetailsToggle.bind(this))}handleDetailsToggle(event){event.target.open&&this.setTouchElPositions()}onResize(){this.setTouchElPositions()}onStart(event){if(!(this.isBeingInteractedWith||event?.button&&event?.button!==0)){if(this.isBeingInteractedWith=!0,event.preventDefault(),this.eventTouch=event.touches?event.touches[0]:event,this.selectedTouchEl=event.target.closest(this.els.touchLeft.selector)||event.target.closest(this.els.touchRight.selector),!this.selectedTouchEl){this.isBeingInteractedWith=!1;return}this.setTouchElPositions(),this.x=this.selectedTouchEl?.matches(this.els.touchLeft.selector)?this.touchLeftEl.offsetLeft:this.touchRightEl.offsetLeft,this.startX=this.eventTouch.pageX-this.x,this.listeners.add(document,"mousemove",this.onMove),this.listeners.add(document,"mouseup",this.onStop),this.listeners.add(document,"touchmove",this.onMove),this.listeners.add(document,"touchend",this.onStop)}}onStop(){if(!this.isBeingInteractedWith)return;this.listeners.remove(document,"mousemove",this.onMove),this.listeners.remove(document,"mouseup",this.onStop),this.listeners.remove(document,"touchmove",this.onMove),this.listeners.remove(document,"touchend",this.onStop),this.isBeingInteractedWith=!1;

1const changeEvent=new Event("change",{bubbles:!0,cancelable:!0});this.els.min?.exists&&this.selectedTouchEl?.matches(this.els.touchLeft.selector)&&this.els.min.element.dispatchEvent(changeEvent),this.els.max?.exists&&this.selectedTouchEl?.matches(this.els.touchRight.selector)&&this.els.max.element.dispatchEvent(changeEvent),this.dispatchEvent(new CustomEvent("AFTER_RANGE_SLIDER_CHANGE",{bubbles:!0,cancelable:!0})),this.selectedTouchEl=null}onMove(event){this.eventTouch=event.touches?event.touches[0]:event,this.x=this.eventTouch.pageX-this.startX,this.selectedTouchEl?.matches(this.els.touchLeft.selector)&&(this.x>this.touchRightEl.offsetLeft-this.selectedTouchEl.offsetWidth?this.x=this.touchRightEl.offsetLeft-this.selectedTouchEl.offsetWidth:this.x<0&&(this.x=0),this.selectedTouchEl.style.left=`${this.x}px`,this.minValue=this.roundRangeValue(this.min+this.range*this.percentage,Math.floor),this.setHighlighterPosition(this.x,null)),this.selectedTouchEl?.matches(this.els.touchRight.selector)&&(this.x<this.touchLeftEl.offsetLeft+this.touchLeftEl.offsetWidth?this.x=this.touchLeftEl.offsetLeft+this.touchLeftEl.offsetWidth:this.x>this.maxX&&(this.x=this.maxX),this.selectedTouchEl.style.left=`${this.x}px`,this.maxValue=this.roundRangeValue(this.min+this.range*this.percentage,Math.ceil),this.setHighlighterPosition(null,this.els.line.element.offsetWidth-this.x))}onKeyDown(event){const isLeftThumb=event.currentTarget?.matches(this.els.touchLeft.selector),isRightThumb=event.currentTarget?.matches(this.els.touchRight.selector);if(!isLeftThumb&&!isRightThumb)return;const pageStep=this.step*10,currentValue=isLeftThumb?this.minValue:this.maxValue;let nextValue=currentValue,handled=!0;switch(event.key){case"ArrowRight":case"ArrowUp":nextValue=currentValue+this.step;break;case"ArrowLeft":case"ArrowDown":nextValue=currentValue-this.step;break;case"PageUp":nextValue=currentValue+pageStep;break;case"PageDown":nextValue=currentValue-pageStep;break;

1case"Home":nextValue=isLeftThumb?this.min:this.minValue;break;case"End":nextValue=isRightThumb?this.max:this.maxValue;break;default:handled=!1}handled&&(event.preventDefault(),isLeftThumb&&(this.minValue=nextValue,this.els.min?.element?.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0}))),isRightThumb&&(this.maxValue=nextValue,this.els.max?.element?.dispatchEvent(new Event("change",{bubbles:!0,cancelable:!0}))),this.setTouchElPositions(),this.dispatchEvent(new CustomEvent("AFTER_RANGE_SLIDER_CHANGE",{bubbles:!0,cancelable:!0})))}setupAccessibility(){this.querySelectorAll("svg").forEach(icon=>{icon.setAttribute("aria-hidden","true")}),this.applyThumbAriaAttributes()}applyThumbAriaAttributes(){const leftMax=Math.max(this.min,this.maxValue-this.step),rightMin=Math.min(this.max,this.minValue+this.step);this.setThumbAria(this.touchLeftEl,{max:leftMax,min:this.min,value:this.minValue}),this.setThumbAria(this.touchRightEl,{max:this.max,min:rightMin,value:this.maxValue})}setThumbAria(thumb,{min,max,value}={}){if(!thumb)return;const clampedValue=Math.min(Math.max(Number(value),Number(min)),Number(max)),valueLabel=formatMoney(clampedValue*100).replace(".00","");thumb.setAttribute("role","slider"),thumb.setAttribute("tabindex","0"),thumb.setAttribute("aria-valuemin",`${min}`),thumb.setAttribute("aria-valuemax",`${max}`),thumb.setAttribute("aria-valuenow",`${clampedValue}`),thumb.setAttribute("aria-valuetext",valueLabel),thumb.setAttribute("data-value-label",valueLabel)}clampValue(value,min,max){return Math.min(Math.max(Number(value),Number(min)),Number(max))}setTouchElPositions(){const leftX=this.percentageFromValue(this.minValue)*this.els.line.element.offsetWidth,rightX=this.percentageFromValue(this.maxValue)*this.els.line.element.offsetWidth;this.touchLeftEl.style.left=`${leftX}px`,this.touchRightEl.style.left=`${rightX}px`,this.touchRightEl.style.insetInlineEnd="unset",this.setHighlighterPosition(leftX,this.els.line.element.offsetWidth-rightX),this.applyThumbAriaAttributes()}setHighlighterPosition(leftX,rightX){this.els?.highlighter?.exists&&((leftX||leftX===0)&&(this.els.highlighter.element.style.left=`${leftX}px`),(rightX||rightX===0)&&(this.els.highlighter.element.style.right=`${rightX}px`))}get percentage(){return Math.min(Math.max(this.x/this.els.line.element.offsetWidth,0),1)}get valueFromPercentage(){return this.min+this.range*this.percentage}percentageFromValue(value){return this.range<=0?0:Math.min(Math.max((value-this.min)/this.range,0),1)}roundRangeValue(value,roundingFunction=Math.round){const steppedValue=roundingFunction(value/this.step)*this.step,multiplier=10**this.decimalPrecision;return Math.round(steppedValue*multiplier)/multiplier}get min(){return this.hasAttribute("min")?parseFloat(this.getAttribute("min")):0}get max(){return this.hasAttribute("max")?parseFloat(this.getAttribute("max")):100}get range(){return this.max-this.min}get step(){const step=Number.parseFloat(this.getAttribute("step"));return Number.isFinite(step)&&step>0?step:1}get decimalPrecision(){return this.getDecimalPlaces(this.step)}getDecimalPlaces(value){const[,decimalPlaces=""]=String(value).split(".");return decimalPlaces.length}get maxX(){return this.offsetWidth-this.touchRightEl.offsetWidth}set minValue(value){const maxAllowed=Math.max(this.min,this.maxValue-this.step),nextValue=this.roundRangeValue(this.clampValue(value,this.min,maxAllowed),Math.floor);this.setAttribute("min-value",nextValue),this.els.min?.exists&&(this.els.min.element.value=nextValue,this.els.min.element.dispatchEvent(new Event("input",{bubbles:!0}))),this._minValue=nextValue,this.applyThumbAriaAttributes()}get minValue(){return this._minValue==null?this.hasAttribute("min-value")?parseFloat(this.getAttribute("min-value")):this.min:this._minValue}set maxValue(value){const minAllowed=Math.min(this.max,this.minValue+this.step),nextValue=this.roundRangeValue(this.clampValue(value,minAllowed,this.max),Math.ceil);this.setAttribute("max-value",nextValue),this.els.max?.exists&&(this.els.max.element.value=nextValue,this.els.max.element.dispatchEvent(new Event("input",{bubbles:!0}))),this._maxValue=nextValue,this.applyThumbAriaAttributes()}get maxValue(){return this._maxValue==null?this.hasAttribute("max-value")?parseFloat(this.getAttribute("max-value")):this.max:this._maxValue}get defaultMinValue(){const tmpMin=this.minValue>=this.min?this.minValue:this.min;return tmpMin>this.defaultMaxValue?this.defaultMaxValue:tmpMin}get defaultMaxValue(){return this.maxValue>=this.max?this.maxValue:this.max}get touchLeftEl(){return this.els.touchLeft.element}get touchRightEl(){return this.els.touchRight.element}get isBeingInteractedWith(){return this._isBeingInteractedWith}set isBeingInteractedWith(val){this._isBeingInteractedWith=val,this.classList.toggle("rng-Slider-active",val)}}customElements.get("range-slider")||customElements.define("range-slider",RangeSlider);
2//# sourceMappingURL=/cdn/shop/t/697/assets/range-slider.js.map?v=1874270551365346031790879277