range-slider-element/dist/range-slider-element.umd.cjs

A cross browser customizable and accessible <range-slider> web component

(function(n,r){typeof exports=="object"&&typeof module<"u"?module.exports=r():typeof define=="function"&&define.amd?define(r):(n=typeof globalThis<"u"?globalThis:n||self,n.RangeSliderElement=r())})(this,function(){"use strict";var Q=Object.defineProperty;var Y=n=>{throw TypeError(n)};var Z=(n,r,a)=>r in n?Q(n,r,{enumerable:!0,configurable:!0,writable:!0,value:a}):n[r]=a;var I=(n,r,a)=>Z(n,typeof r!="symbol"?r+"":r,a),H=(n,r,a)=>r.has(n)||Y("Cannot "+a);var t=(n,r,a)=>(H(n,r,"read from private field"),a?a.call(n):r.get(n)),l=(n,r,a)=>r.has(n)?Y("Cannot add the same private member more than once"):r instanceof WeakSet?r.add(n):r.set(n,a),w=(n,r,a,$)=>(H(n,r,"write to private field"),$?$.call(n,a):r.set(n,a),a),d=(n,r,a)=>(H(n,r,"access private method"),a);var m,x,u,g,o,i,f,O,R,c,U,C,V,k,y,A,T,L,q,j,B,X,P,W,G;const n={value:"valuenow",min:"valuemin",max:"valuemax"};function r(F=""){const M=String(F).split(".")[1];return M?M.length:0}function a(F,M,e){const s=n[M];s&&F.setAttribute(`aria-${s}`,e)}const $=["min","max","step","value","disabled","value-precision"],_={stepUp:["ArrowUp","ArrowRight"],stepDown:["ArrowDown","ArrowLeft"]},z=document.createElement("template");z.innerHTML=`
  <div data-track></div>
  <div data-track-fill></div>
  <div data-runnable-track>
    <div data-thumb></div>
  </div>
`;class v extends HTMLElement{constructor(){super();l(this,i);l(this,m);l(this,x);l(this,u,[]);l(this,g,[]);l(this,o,0);l(this,V,e=>{e.target.dataset.thumb!==void 0&&w(this,o,Number(e.target.dataset.thumb))});l(this,k,e=>{if(!this.disabled)if(this.setPointerCapture(e.pointerId),this.addEventListener("pointermove",t(this,y)),window.addEventListener("pointerup",t(this,A)),window.addEventListener("pointercancel",t(this,A)),w(this,x,this.value),e.target.dataset.thumb!==void 0)w(this,o,Number(e.target.dataset.thumb));else{const{offsetX:s,offsetY:h}=e;w(this,o,d(this,i,X).call(this,t(this,i,f)?h:s)),t(this,L).call(this,t(this,i,f)?h:s)}});l(this,y,e=>{e.target===this&&(e.preventDefault(),t(this,L).call(this,t(this,i,f)?e.offsetY:e.offsetX))});l(this,A,e=>{this.releasePointerCapture(e.pointerId),this.removeEventListener("pointermove",t(this,y)),window.removeEventListener("pointerup",t(this,A)),window.removeEventListener("pointercancel",t(this,A)),t(this,x)!==this.value&&this.dispatchEvent(new Event("change",{bubbles:!0}))});l(this,T,e=>{const h=Object.keys(_).find(b=>_[b].includes(e.code)&&b);document.activeElement!==t(this,i,c)[t(this,o)]&&t(this,i,c)[t(this,o)].focus({focusVisible:!1}),h&&(e.preventDefault(),this[h]())});l(this,L,e=>{const h=Math.min(Math.max(e,0),t(this,i,C))/t(this,i,C),b=d(this,i,B).call(this,t(this,i,O)?1-h:h);d(this,i,P).call(this,t(this,o),b,["input"])});w(this,m,this.attachInternals()),this.addEventListener("focusin",t(this,V)),this.addEventListener("pointerdown",t(this,k)),this.addEventListener("keydown",t(this,T))}get min(){return this.hasAttribute("min")?Number(this.getAttribute("min")):0}get max(){return this.hasAttribute("max")?Number(this.getAttribute("max")):100}get step(){return this.hasAttribute("step")?Number(this.getAttribute("step")):1}get value(){return t(this,u).join(",")}get disabled(){return this.getAttribute("disabled")===""||!1}get valuePrecision(){return this.getAttribute("value-precision")||""}set min(e){this.setAttribute("min",e);for(const s of t(this,i,c))a(s,"min",e)}set max(e){this.setAttribute("max",e);for(const s of t(this,i,c))a(s,"max",e)}set step(e){this.setAttribute("step",e)}set value(e){String(e).split(",").map((s,h)=>{d(this,i,P).call(this,h,s)})}set disabled(e){if(e){this.setAttribute("disabled",""),this.removeAttribute("tabindex");for(const s of t(this,i,c))s.removeAttribute("tabindex")}else{this.removeAttribute("disabled"),this.setAttribute("tabindex","-1");for(const s of t(this,i,c))s.setAttribute("tabindex",0)}}set valuePrecision(e){this.setAttribute("value-precision",e)}get form(){return t(this,m).form}get name(){return this.getAttribute("name")}get type(){return this.localName}get validity(){return t(this,m).validity}get validationMessage(){return t(this,m).validationMessage}get willValidate(){return t(this,m).willValidate}checkValidity(){return t(this,m).checkValidity()}reportValidity(){return t(this,m).reportValidity()}connectedCallback(){this.firstChild||this.appendChild(z.content.cloneNode(!0)),this.disabled||this.setAttribute("tabindex","-1"),t(this,i,c).forEach((e,s)=>{e.dataset.thumb=s,e.setAttribute("role","slider"),a(e,"min",this.min),a(e,"max",this.max),this.disabled||e.setAttribute("tabindex",0)}),this.value=this.getAttribute("value")||d(this,i,q).call(this)}disconnectedCallback(){this.removeEventListener("focusin",t(this,V)),this.removeEventListener("pointerdown",t(this,k)),this.removeEventListener("keydown",t(this,T))}attributeChangedCallback(e,s,h){s!==h&&(e==="value"?this.value=h:this.value=this.value)}stepUp(e=this.step){const s=t(this,u)[t(this,o)]+e;d(this,i,P).call(this,t(this,o),s,["change"])}stepDown(e=this.step){const s=t(this,u)[t(this,o)]-e;d(this,i,P).call(this,t(this,o),s,["change"])}}return m=new WeakMap,x=new WeakMap,u=new WeakMap,g=new WeakMap,o=new WeakMap,i=new WeakSet,f=function(){return this.getAttribute("orientation")==="vertical"},O=function(){return!!(t(this,i,f)||this.getAttribute("dir")==="rtl")},R=function(){return t(this,i,c).length>1},c=function(){return this.querySelectorAll("[data-runnable-track] [data-thumb]")},U=function(){return this.querySelector("[data-track-fill]")},C=function(){return t(this,i,f)?this.offsetHeight:this.offsetWidth},V=new WeakMap,k=new WeakMap,y=new WeakMap,A=new WeakMap,T=new WeakMap,L=new WeakMap,q=function(){return this.max<this.min?this.min:this.min+(this.max-this.min)/2},j=function(e){return 100*(e-this.min)/(this.max-this.min)},B=function(e){return this.min+e*(this.max-this.min)},X=function(e){let s;const b=Math.min(Math.max(e,0),t(this,i,C))/t(this,i,C),E=d(this,i,B).call(this,t(this,i,O)?1-b:b),p=t(this,u).findIndex(N=>E-N<0);if(p===0)s=p;else if(p===-1)s=t(this,u).length-1;else{const N=t(this,u)[p-1],S=t(this,u)[p];Math.abs(N-E)<Math.abs(S-E)?s=p-1:s=p}return s},P=function(e,s,h=[]){const b=t(this,u)[e],E=Number(this.valuePrecision)||r(this.step)||0,p=t(this,u)[e-1]||this.min,N=t(this,u)[e+1]||this.max,S=Math.min(Math.max(s,p),N),K=Math.round(S/this.step)*this.step,D=Number(E?K.toFixed(E):Math.round(K));b!==D&&(t(this,u)[e]=D,t(this,g)[e]=d(this,i,j).call(this,D),t(this,m).setFormValue(t(this,u).join(",")),d(this,i,W).call(this,e,D),d(this,i,G).call(this),h.map(J=>{this.dispatchEvent(new Event(J,{bubbles:!0}))}))},W=function(e,s){t(this,i,c)[e]&&(t(this,i,c)[e].style.setProperty(`inset-${t(this,i,f)?"block":"inline"}-${t(this,i,f)?"end":"start"}`,`${d(this,i,j).call(this,s)}%`),a(t(this,i,c)[e],"value",s))},G=function(){if(!t(this,i,U))return;const e=t(this,i,R)?`${t(this,g)[0]}%`:0,h=`clamp(var(--thumb-size) / 2, ${t(this,i,R)?`${100-t(this,g)[t(this,g).length-1]}%`:`${100-t(this,g)[0]}%`}, 100% - var(--thumb-size) / 2)`;t(this,i,U).style.setProperty(`inset-${t(this,i,f)?"block":"inline"}`,t(this,i,f)?`${h} ${e}`:`${e} ${h}`)},I(v,"tagName","range-slider"),I(v,"observedAttributes",$),I(v,"formAssociated",!0),window.customElements.get(v.tagName)||(window.RangeSliderElement=v,window.customElements.define(v.tagName,v)),v});