@coderundebug/ui-web/ui-range.js

A collection of UI web components that can be used in any web project.

/* By Stephen Paul Hassall (web: https://coderundebug.com) */
import{UiTools as i}from"./ui-tools.js";export class UiRange extends HTMLElement{static get formAssociated(){return!0}constructor(){super(),this.attachShadow({mode:"open",delegatesFocus:!0,slotAssignment:"manual"}),this.shadowRoot.innerHTML=UiRange.uiHtml,this.shadowRoot.adoptedStyleSheets=[UiRange.uiCssStyleSheet],this.i=this.attachInternals(),this.t=this.shadowRoot.querySelector(".base"),this.h=this.shadowRoot.querySelector(".base-track"),this.o=this.shadowRoot.querySelector(".inner-track"),this.l=this.shadowRoot.querySelector(".thumb-from"),this.u=this.shadowRoot.querySelector(".thumb-to"),this.p=this.shadowRoot.querySelector(".steppers"),this.v=this.shadowRoot.querySelector(".highlight-from"),this.m=this.shadowRoot.querySelector(".highlight-to"),this.k=this.shadowRoot.querySelector(".label-lines"),this._=this.shadowRoot.querySelector(".label-blocks"),this.j=this.j.bind(this),this.F=this.F.bind(this),this.A=this.A.bind(this),this.R=this.R.bind(this),this.C=this.C.bind(this),this.M=this.M.bind(this),this.U=this.U.bind(this),this.D=this.D.bind(this),this.T=this.T.bind(this),this.P=!1,this.S=!1,this.H=!1,this.L=!1,this.V=!1,this.B=void 0,this.I=void 0,this.K=0,this.O=100,this.q=void 0,this.G=0,this.J=0,this.N="",this.W="",this.X=!1,this.Y=-1}get value(){if(!0===this.H){return this.O-(this.I-this.K)}return this.I}set value(i){null!=i&&("string"==typeof i&&(i=parseFloat(i)),0!==this.G&&(i=this.Z(i)),i<this.K&&(i=this.K),i>this.O&&(i=this.O),!0===this.hasAttribute("reverse")?this.I=this.O-(i-this.K):this.I=i,this.$())}get valueFrom(){if(!1===this.P)return this.valueTo;if(!0===this.H){let i=this.O-(this.B-this.K);return!0===this.P&&(i=this.O-(this.I-this.K)),i}return this.B}set valueFrom(i){null!=i&&("string"==typeof i&&(i=parseFloat(i)),0!==this.G&&(i=this.Z(i)),i<this.K&&(i=this.K),i>this.O&&(i=this.O),!0===this.hasAttribute("reverse")?!0===this.hasAttribute("multiple")?this.I=this.O-(i-this.K):this.B=this.O-(i-this.K):this.B=i,this.$())}get valueTo(){if(!0===this.H){let i=this.O-(this.I-this.K);return!0===this.P&&(i=this.O-(this.B-this.K)),i}return this.I}set valueTo(i){null!=i&&("string"==typeof i&&(i=parseFloat(i)),0!==this.G&&(i=this.Z(i)),i<this.K&&(i=this.K),i>this.O&&(i=this.O),!0===this.hasAttribute("reverse")?!0===this.hasAttribute("multiple")?this.B=this.O-(i-this.K):this.I=this.O-(i-this.K):this.I=i,this.$())}connectedCallback(){this.ii=new MutationObserver(this.T),this.ii.observe(this,{childList:!0}),this.l.addEventListener("pointerdown",this.j),this.l.addEventListener("pointerup",this.F),this.l.addEventListener("pointermove",this.A),this.u.addEventListener("pointerdown",this.j),this.u.addEventListener("pointerup",this.F),this.u.addEventListener("pointermove",this.A),this.h.addEventListener("click",this.R),this.l.addEventListener("keydown",this.C),this.u.addEventListener("keydown",this.C),this.l.addEventListener("focus",this.M),this.u.addEventListener("focus",this.M),this.l.addEventListener("blur",this.U),this.u.addEventListener("blur",this.U),this.P=!1,!0===this.hasAttribute("multiple")&&(this.P=!0),this.S=!1,!0===this.hasAttribute("vertical")&&(this.S=!0),this.H=!1,!0===this.hasAttribute("reverse")&&(this.H=!0),this.L=!1,!0===this.hasAttribute("highlight")&&(this.L=!0),this.N="",this.W="",!0===this.hasAttribute("highlight-prefix")&&(this.N=this.getAttribute("highlight-prefix")),!0===this.hasAttribute("highlight-suffix")&&(this.W=this.getAttribute("highlight-suffix")),this.V=!1,!0===this.hasAttribute("stepper")&&(this.V=!0),this.ti(),this.si(),void 0===this.I&&(!0===this.hasAttribute("value")?this.ei(this.getAttribute("value")):(this.B=this.K,this.I=this.K,!0===this.H&&(this.B=this.O,this.I=this.O))),this.hi(),this.$()}disconnectedCallback(){this.ii.disconnect(),this.ii=void 0,this.l.removeEventListener("pointerdown",this.j),this.l.removeEventListener("pointerup",this.F),this.l.removeEventListener("pointermove",this.A),this.u.removeEventListener("pointerdown",this.j),this.u.removeEventListener("pointerup",this.F),this.u.removeEventListener("pointermove",this.A),this.h.removeEventListener("click",this.R),this.l.removeEventListener("keydown",this.C),this.u.removeEventListener("keydown",this.C),this.l.removeEventListener("focus",this.M),this.u.removeEventListener("focus",this.M),this.l.removeEventListener("blur",this.U),this.u.removeEventListener("blur",this.U)}attributeChangedCallback(i,t,s){"min"!==i&&"max"!==i&&"step"!==i?("value"===i&&this.ei(s),this.$()):this.si()}static get observedAttributes(){return["max","min","step","value"]}T(i,t){this.ti()}j(i){if(!1===i.isPrimary)return;if(0!==i.button)return;if(!0===this.t.hasAttribute("disabled"))return;i.target.setPointerCapture(i.pointerId),this.X=!0,this.t.classList.add("dragging");let t=!1;i.currentTarget===this.l&&(t=!0),this.ri=this.valueFrom,this.ai=this.valueTo,this.oi(i.clientX,i.clientY,t,!0),i.preventDefault()}F(i){!1!==this.X&&(i.target.releasePointerCapture(i.pointerId),this.X=!1,this.t.classList.remove("dragging"),this.$(),this.ri===this.valueFrom&&this.ai===this.valueTo||this.li(),i.preventDefault())}A(i){if(!1===this.X)return;let t=!1;i.currentTarget===this.l&&(t=!0),this.oi(i.clientX,i.clientY,t,!1),this.ni=!0}R(i){if(!0!==this.ni){if(!0!==this.t.hasAttribute("disabled")){if(!1===this.P){const t=this.u.getBoundingClientRect();let s=!0;if(!1===this.S){if(i.clientX>t.left&&i.clientX<t.right)return;const e=t.left+t.width/2;i.clientX>e&&(s=!1)}if(!0===this.S){if(i.clientY>t.top&&i.clientY<t.bottom)return;const e=t.top+t.height/2;i.clientY>e&&(s=!1)}this.ui(!1,s,0)}if(!0===this.P){const t=this.l.getBoundingClientRect(),s=this.u.getBoundingClientRect();let e=!0,h=!0;if(!1===this.S){if(i.clientX>t.left&&i.clientX<t.right)return;if(i.clientX>s.left&&i.clientX<s.right)return;const r=t.left+t.width/2,a=s.left+s.width/2;if(i.clientX<r)h=!0,e=!0;else if(i.clientX>a)h=!1,e=!1;else{const t=r+(a-r)/2;i.clientX<t?(h=!0,e=!1):(h=!1,e=!0)}}if(!0===this.S){if(i.clientY>t.top&&i.clientY<t.bottom)return;if(i.clientY>s.top&&i.clientY<s.bottom)return;const r=t.top+t.height/2,a=s.top+s.height/2;if(i.clientY<r)h=!0,e=!0;else if(i.clientY>a)h=!1,e=!1;else{const t=r+(a-r)/2;i.clientY<t?(h=!0,e=!1):(h=!1,e=!0)}}this.ui(h,e,0)}this.Y=Date.now()+1e3,this.t.classList.add("highlight-show"),setTimeout(this.D,1250)}}else this.ni=!1}C(i){if(!1===this.S&&("ArrowLeft"===i.key||"ArrowRight"===i.key)){if(!0===this.t.hasAttribute("disabled"))return;let t=!1;i.target===this.l&&(t=!0);let s=!0;"ArrowRight"===i.key&&(s=!1),this.ui(t,s,0),i.preventDefault(),i.stopPropagation()}if(!0===this.S&&("ArrowUp"===i.key||"ArrowDown"===i.key)){if(!0===this.t.hasAttribute("disabled"))return;let t=!1;i.target===this.l&&(t=!0);let s=!0;"ArrowDown"===i.key&&(s=!1),this.ui(t,s,0),i.preventDefault(),i.stopPropagation()}if("PageUp"===i.key||"PageDown"===i.key){if(!0===this.t.hasAttribute("disabled"))return;let t=!1;i.target===this.l&&(t=!0);let s=!0;"PageDown"===i.key&&(s=!1),this.ui(t,s,1),i.preventDefault(),i.stopPropagation()}if("Home"===i.key||"End"===i.key){if(!0===this.t.hasAttribute("disabled"))return;let t=!1;i.target===this.l&&(t=!0);let s=!0;"End"===i.key&&(s=!1),this.ui(t,s,2),i.preventDefault(),i.stopPropagation()}}M(){!0!==this.t.hasAttribute("disabled")&&!1!==this.L&&this.t.classList.add("dragging")}U(){!0!==this.t.hasAttribute("disabled")&&!1!==this.L&&this.t.classList.remove("dragging")}di(){const i=new Event("input",{bubbles:!0,composed:!0});this.dispatchEvent(i)}li(){const i=new Event("change",{bubbles:!0,composed:!0});this.dispatchEvent(i)}D(){Date.now()<this.Y||this.t.classList.remove("highlight-show")}oi(i,t,s,e){const h=this.B,r=this.I;if(!0===e){let e=this.u;!0===s&&(e=this.l);const h=e.getBoundingClientRect();this.gi=h.left+h.width/2-i,this.ci=h.top+h.height/2-t}const a=this.gi+i,o=this.ci+t,l=this.o.getBoundingClientRect();let n=a-l.left,u=o-l.top;const d=this.o.clientWidth,g=this.o.clientHeight;let c=0,f=this.o.clientWidth,b=0,p=this.o.clientHeight;if(!0===this.P&&!1===s){const i=this.l.getBoundingClientRect(),t=i.left+i.width/2,s=i.top+i.height/2;c=t-l.left,b=s-l.top}if(!0===s){const i=this.u.getBoundingClientRect(),t=i.left+i.width/2,s=i.top+i.height/2;f=t-l.left,p=s-l.top}!1===this.S&&(n<c&&(n=c),n>f&&(n=f)),!0===this.S&&(u<b&&(u=b),u>p&&(u=p));let v=0;if(!1===this.S&&(v=n/d),!0===this.S&&(v=u/g),0!==this.G){if(v=Math.round(v/this.G)*this.G,this.fi===v)return;this.fi=v}let m=this.K+this.bi*v;if(0!==this.G){const i=m.toFixed(this.J);m=parseFloat(i)}!0===s&&(this.B=m),!1===s&&(this.I=m),this.$(),h===this.B&&r===this.I||this.di()}si(){let i=0,t=0,s=0;if(this.K=0,this.O=100,this.q=void 0,!0===this.hasAttribute("min")){let t=this.getAttribute("min");this.K=parseFloat(t);let s=t.indexOf(".");-1!==s&&(i=t.length-s)}if(!0===this.hasAttribute("max")){let i=this.getAttribute("max");this.O=parseFloat(i);let s=i.indexOf(".");-1!==s&&(t=i.length-s)}if(!0===this.hasAttribute("step")){let i=this.getAttribute("step");this.q=parseFloat(i);let t=i.indexOf(".");-1!==t&&(s=i.length-t)}if(this.J=0,i>this.J&&(this.J=i),t>this.J&&(this.J=t),s>this.J&&(this.J=s),this.K>this.O){const i=this.K;this.K=this.O,this.O=i}if(this.l.setAttribute("aria-valuemin",this.K.toString()),this.l.setAttribute("aria-valuemax",this.O.toString()),this.u.setAttribute("aria-valuemin",this.K.toString()),this.u.setAttribute("aria-valuemax",this.O.toString()),!0===this.S?(this.l.setAttribute("aria-orientation","vertical"),this.u.setAttribute("aria-orientation","vertical")):(this.l.setAttribute("aria-orientation","horizontal"),this.u.setAttribute("aria-orientation","horizontal")),this.bi=this.O-this.K,0===this.bi)return this.G=0,void this.t.style.setProperty("--ui-rsc",1);this.q?(this.pi=Math.ceil(this.bi/this.q),this.t.style.setProperty("--ui-rs",this.q),this.t.style.setProperty("--ui-rsc",this.pi),this.G=this.q/this.bi):(this.pi=0,this.G=0,this.t.style.setProperty("--ui-rs",0),this.t.style.setProperty("--ui-rsc",0))}ui(i,t,s){let e=0,h=this.q;if(this.q||(h=(this.O-this.K)/20),1===s){if(this.q){const i=Math.round((this.O-this.K)/10)*this.q;h=i<2*this.q?2*this.q:i}this.q||(h=(this.O-this.K)/10)}let r=this.I;if(!0===i&&(r=this.B),!0===t&&(e=r-h),!1===t&&(e=r+h),2===s&&(!0===t&&(e=this.K),!1===t&&(e=this.O)),!0===this.P){if(!0===i){if(e<this.K&&(e=this.K),e>this.I&&(e=this.I),e===this.B)return;this.B=e}if(!1===i){if(e<this.B&&(e=this.B),e>this.O&&(e=this.O),e===this.I)return;this.I=e}}if(!1===this.P){if(e<this.K&&(e=this.K),e>this.O&&(e=this.O),e===this.I)return;this.I=e}this.$(),this.li()}ei(i){if(this.H=!1,!0===this.hasAttribute("reverse")&&(this.H=!0),!i)return this.B=this.K,this.I=this.K,void(!0===this.H&&(this.B=this.O,this.I=this.O));this.P=!1,!0===this.hasAttribute("multiple")&&(this.P=!0);const t=i.indexOf(",");if(-1!==t?(this.B=parseFloat(i.substring(0,t)),this.I=parseFloat(i.substring(t+1))):(this.B=this.K,this.I=parseFloat(i)),this.B>this.I){const i=this.B;this.B=this.I,this.I=i}if(0!==this.G&&(this.I=this.Z(this.I),!0===this.P&&(this.B=this.Z(this.B))),this.I<this.K&&(this.I=this.K),this.I>this.O&&(this.I=this.O),this.B<this.K&&(this.B=this.K),this.B>this.O&&(this.B=this.O),!0===this.H){if(!0===this.P){const i=this.B;this.B=this.I,this.I=i}this.I=this.O-(this.I-this.K),this.B=this.O-(this.B-this.K)}}Z(i){let t=(i-this.K)/this.bi;return t=Math.round(t/this.G)*this.G,t*this.bi+this.K}$(){if(this.O-this.K==0)return;let i=(this.I-this.K)/this.bi;i<0&&(i=0),i>1&&(i=1),this.t.style.setProperty("--ui-rp-to",i.toFixed(4));const t=i;i=(this.B-this.K)/this.bi,i<0&&(i=0),i>1&&(i=1),this.t.style.setProperty("--ui-rp-from",i.toFixed(4));const s=i;if(this.l.setAttribute("tabindex","0"),this.u.setAttribute("tabindex","0"),!0===this.P&&(this.B===this.I?this.B===this.O?(this.u.setAttribute("tabindex","-1"),this.u.style.zIndex="0"):this.l.setAttribute("tabindex","-1"):(this.l.setAttribute("tabindex","0"),this.u.setAttribute("tabindex","0"),this.u.style.zIndex="1")),!0===this.t.hasAttribute("disabled")&&(this.l.setAttribute("tabindex","-1"),this.u.setAttribute("tabindex","-1")),!0===this.V&&this.mi.forEach((i=>{i._uiRangePercentage>=s&&i._uiRangePercentage<=t?i.classList.add("on"):i.classList.remove("on")})),!0===this.L){let i=this.valueFrom,t=this.valueTo;!0===this.H&&(i=this.O-(this.B-this.K),t=this.O-(this.I-this.K));let s=i.toFixed(this.J),e=t.toFixed(this.J);0===this.G&&(s=i.toString(),e=t.toString()),!0===this.P?(this.v.textContent=this.N+s+this.W,this.m.textContent=this.N+e+this.W):this.m.textContent=this.N+e+this.W}!0===this.P?this.i.setFormValue(this.B.toString()+","+this.I.toString()):this.i.setFormValue(this.I.toFixed(this.J)),this.u.setAttribute("aria-valuenow",this.I),this.u.setAttribute("aria-valuetext",this.I.toString()),!0===this.P&&(this.l.setAttribute("aria-valuenow",this.B),this.l.setAttribute("aria-valuetext",this.B.toString()))}hi(){if(this.p.innerHTML="",this.mi=[],!1===this.V)return;const i=this.pi+1;if(!(i<2||i>100))for(let t=0;t<i;t++){const s=document.createElement("div"),e=t/(i-1);s._uiRangeCount=t,s._uiRangePercentage=e;const h=100*(t/(i-1)-.05);!1===this.S?(s.style.insetInlineStart=h.toFixed(4)+"%",s.style.insetBlockStart="unset"):(s.style.insetBlockStart=h.toFixed(4)+"%",s.style.insetInlineStart="unset");const r=document.createElement("div");s.appendChild(r),this.mi.push(s),this.p.appendChild(s)}}ti(){this._.innerHTML="";let i=0,t=[];for(const s of this.children){if("thumb"===s.slot)continue;i++;const e=document.createElement("div"),h=document.createElement("slot");e.appendChild(h),this._.appendChild(e),h.assign(s),t.push(e)}if(this.k.innerHTML="",i<2&&this.t.classList.remove("has-labels"),i>=2){this.t.classList.add("has-labels");for(let t=0;t<i;t++){const s=document.createElement("div"),e=document.createElement("div");s.appendChild(e);const h=100*(t/(i-1)-.05);!1===this.S?(s.style.insetInlineStart=h.toFixed(4)+"%",s.style.insetBlockStart="unset"):(s.style.insetBlockStart=h.toFixed(4)+"%",s.style.insetInlineStart="unset"),this.k.appendChild(s)}for(let i=0;i<t.length;i++){const s=t[i],e=100*(i/(t.length-1)-.05);!1===this.S?(s.style.insetInlineStart=e.toFixed(4)+"%",s.style.insetBlockStart="unset"):(s.style.insetBlockStart=e.toFixed(4)+"%",s.style.insetInlineStart="unset")}}this.t.classList.remove("thumb-slot-from"),this.t.classList.remove("thumb-slot-to"),this.l.innerHTML="",this.u.innerHTML="";let s=null,e=null;for(const i of this.children)if("thumb"===i.slot)if(null!==s){if(null===e){e=i;break}}else s=i;if(!1===this.P&&null!==s){this.t.classList.add("thumb-slot-to");const i=document.createElement("slot");this.u.appendChild(i),i.assign(s)}if(!0===this.P){if(null!==s){this.t.classList.add("thumb-slot-from");const i=document.createElement("slot");this.l.appendChild(i),i.assign(s)}if(null!==e){this.t.classList.add("thumb-slot-to");const i=document.createElement("slot");this.u.appendChild(i),i.assign(e)}}}formDisabledCallback(i){!0===i?this.t.setAttribute("disabled",""):this.t.removeAttribute("disabled"),this.$()}formStateRestoreCallback(i){this.ei(i),this.$(),this.i.setFormValue(this.I)}formResetCallback(){this.B=this.K,this.I=this.K,!0===this.H&&(this.B=this.O,this.I=this.O),this.i.setFormValue(this.I),this.$()}}UiRange.uiCss=' :host{display:block;}.base{display:grid;direction:ltr;isolation:isolate;user-select:none;-webkit-user-select:none;--ui-rms:max(var(--ui-range-track-size, 4px), var(--ui-range-thumb-height, 16px));--ui-rt2lg:max(calc((var(--ui-range-thumb-height, 16px) - var(--ui-range-track-size, 4px)) / 2), 0px);--ui-rto:var(--ui-range-track-offset, 8px);--ui-rsc:0;--ui-rp-from:0;--ui-rp-to:0;--ui-rhtms:calc(var(--ui-range-thumb-width, 16px) / 2);--ui-r-size:calc(100% - (var(--ui-rto) * 2) );--ui-roffset-thumb-from:calc(var(--ui-rto) + (var(--ui-r-size) * var(--ui-rp-from)) - var(--ui-rhtms));--ui-roffset-thumb-to:calc(var(--ui-rto) + (var(--ui-r-size) * var(--ui-rp-to)) - var(--ui-rhtms));--ui-roffset-onoff-from:calc(var(--ui-rto) + (var(--ui-r-size) * var(--ui-rp-from)));--ui-roffset-onoff-to:calc(var(--ui-rto) + (var(--ui-r-size) * var(--ui-rp-to)));--ui-rc-off:var(--ui-range-track-off-background, var(--ui-default-foreground, hsl(0 0% 30% / 1)));--ui-rc-on:var(--ui-range-track-on-background, var(--ui-default-background, hsl(0 0% 90% / 1)));}:host([step][stepper]) .base{--ui-rt2lg:max(calc((var(--ui-range-thumb-height, 16px) - var(--ui-range-stepper-height, 12px)) / 2), 0px);}.base-track{position:relative;z-index:1;}.base-labels{overflow:hidden;z-index:0;}.track{border-radius:10rem;overflow:hidden;}.track .on{background:var(--ui-rc-off);}.track .off-before, .track .off-after{background:var(--ui-rc-on);}:host(:not([multiple])[reverse]){& .on{background:var(--ui-rc-on);}& .off-after{background:var(--ui-rc-off);}} :host(:not([stepper])) .steppers{display:none;}:host([stepper]) .steppers{overflow:hidden;& div > div{background-color:var(--ui-range-stepper-off-color, var(--ui-default-background, hsl(0 0% 90% / 1)));}& div.on > div{background-color:var(--ui-range-stepper-on-color, var(--ui-default-foreground, hsl(0 0% 30% / 1)));}} slot[name="thumb"]::slotted(*){pointer-events:none;}.thumb-from-parent, .thumb-to-parent{position:absolute;display:grid;}.thumb-from, .thumb-to{background-color:var(--ui-range-thumb-background, var(--ui-default-foreground, hsl(0 0% 30% / 1)));--ui-icon-primary-color:var(--ui-range-thumb-background, var(--ui-default-foreground, hsl(0 0% 30% / 1)));height:var(--ui-range-thumb-size, 24px);width:var(--ui-range-thumb-size, 24px);box-sizing:border-box;border-radius:var(--ui-range-thumb-radius, 10rem);border-style:var(--ui-range-thumb-border-style, none);border-width:var(--ui-range-thumb-border-width, 0);border-color:var(--ui-range-thumb-border-color, var(--ui-default-background, hsl(0 0% 90% / 1)));box-shadow:var(--ui-range-thumb-box-shadow, none);z-index:1;touch-action:none;}.thumb-from:active, .thumb-to:active{filter:brightness(65%);}.base.thumb-slot-from .thumb-from, .base.thumb-slot-to .thumb-to{background-color:transparent;border-style:none;}.base:not(.thumb-slot-from) .thumb-from:focus-visible, .base:not(.thumb-slot-to) .thumb-to:focus-visible{outline-offset:2px;outline-style:solid;outline-width:2px;outline-color:var(--ui-range-track-on-background, var(--ui-default-foreground, hsl(0 0% 30% / 1)));}.base.thumb-slot-from .thumb-from:focus-visible, .base.thumb-slot-to .thumb-to:focus-visible{outline:none;}.labels{display:none;gap:var(--ui-range-label-gap, 4px);}.label-lines{display:none;}:host([label-lines]) .label-lines{display:grid;}.label-lines > div > div{border-style:none;border-width:var(--ui-range-label-line-width, 2px);border-color:var(--ui-range-label-line-color, var(--ui-default-background, hsl(0 0% 90% / 1)));}:host(:not([vertical])){display:block;& .base{grid-template-columns:1fr;grid-template-rows:[track] var(--ui-rms) [label] auto;}& .base-track{grid-column:1;grid-row:track;display:grid;padding-inline:var(--ui-range-track-padding, 4px);}& .track{grid-column:1;grid-row:1;align-self:center;position:relative;display:grid;height:var(--ui-range-track-size, 4px);padding-inline:var(--ui-range-track-offset, 8px);}& .inner-track{grid-column:1;grid-row:1;height:100%;}& .on, .off-before, .off-after{position:absolute;inset:0;}& .steppers{grid-column:1;grid-row:1;align-self:center;padding-inline:var(--ui-range-track-offset, 8px);display:grid;}& .steppers > div{grid-column:1;grid-row:1;display:grid;align-items:center;justify-items:center;position:relative;width:10%;}& .steppers > div > div{border-radius:var(--ui-range-stepper-radius, 10rem);height:var(--ui-range-stepper-height, 12px);width:var(--ui-range-stepper-width, 12px);}& .thumb-bar{grid-column:1;grid-row:1;align-self:stretch;display:grid;align-items:center;position:relative;}& .thumb-from-parent{inset-inline-start:var(--ui-roffset-thumb-from);}& .thumb-to-parent{inset-inline-start:var(--ui-roffset-thumb-to);}& .thumb-from, .thumb-to{height:var(--ui-range-thumb-height, 16px);width:var(--ui-range-thumb-width, 16px);}& .base-labels{grid-column:1;grid-row:label;display:grid;}& .labels{grid-template-columns:1fr;grid-template-rows:[lines] auto [blocks] auto;padding-inline:var(--ui-range-track-offset, 8px);}& .base.has-labels .labels{display:grid;}& .label-lines{grid-column:1;grid-row:lines;padding-inline:var(--ui-range-track-padding, 4px);}& .label-lines > div{grid-column:1;grid-row:1;display:grid;align-items:center;justify-items:center;position:relative;width:10%;}& .label-lines > div > div{height:var(--ui-range-label-line-size, 16px);border-inline-start-style:var(--ui-range-label-line-style, solid);}& .label-blocks{grid-column:1;grid-row:blocks;padding-inline:var(--ui-range-track-padding, 4px);display:grid;}.label-blocks > div{grid-column:1;grid-row:1;display:grid;align-items:center;justify-items:center;position:relative;width:10%;}} :host(:not([vertical]):not([multiple])){& .thumb-from-parent{display:none;}& .off-before{display:none;}& .on{inset-inline-end:calc(100% - var(--ui-roffset-onoff-to));}& .off-after{inset-inline-start:var(--ui-roffset-onoff-to);}} :host(:not([vertical])[multiple]){& .off-before{inset-inline-end:calc(100% - var(--ui-roffset-onoff-from));}& .on{inset-inline-start:var(--ui-roffset-onoff-from);inset-inline-end:calc(100% - var(--ui-roffset-onoff-to));}& .off-after{inset-inline-start:var(--ui-roffset-onoff-to);}} :host(:not([vertical])[label-swap]){& .base{grid-template-columns:1fr;grid-template-rows:[label] auto [track] var(--ui-rms);}& .labels{grid-template-columns:1fr;grid-template-rows:[blocks] auto [lines] auto;}} :host(:not([vertical])[label-lines]:not([label-swap])) .base-labels{position:relative;inset-block-start:calc(var(--ui-rt2lg) * -1);}:host(:not([vertical])[label-lines][label-swap]) .base-labels{position:relative;inset-block-end:calc(var(--ui-rt2lg) * -1);}:host([vertical]){display:inline-block;& .base{grid-template-columns:[track] var(--ui-rms) [label] auto;grid-template-rows:1fr;height:100%;}& .base-track{grid-column:track;grid-row:1;padding-block:var(--ui-range-track-padding, 4px);display:grid;}& .track{grid-column:1;grid-row:1;justify-self:center;position:relative;display:grid;width:var(--ui-range-track-size, 4px);padding-block:var(--ui-range-track-offset, 8px);}& .inner-track{height:100%;width:100%;}& .on, .off-before, .off-after{position:absolute;inset:0;}& .steppers{grid-column:1;grid-row:1;justify-self:center;padding-block:var(--ui-range-track-offset, 8px);display:grid;}& .steppers > div{grid-column:1;grid-row:1;display:grid;align-items:center;justify-items:center;position:relative;height:10%;}& .steppers > div > div{border-radius:var(--ui-range-stepper-radius, 10rem);height:var(--ui-range-stepper-width, 12px);width:var(--ui-range-stepper-height, 12px);}& .thumb-bar{grid-column:1;grid-row:1;justify-self:stretch;display:grid;justify-items:center;position:relative;}& .thumb-from-parent{inset-block-start:var(--ui-roffset-thumb-from);}& .thumb-to-parent{inset-block-start:var(--ui-roffset-thumb-to);}& .thumb-from, .thumb-to{height:var(--ui-range-thumb-width, 16px);width:var(--ui-range-thumb-height, 16px);}& .base-labels{grid-column:label;grid-row:1;display:grid;}& .labels{grid-template-columns:[lines] auto [blocks] auto;grid-template-rows:1fr;padding-block:var(--ui-range-track-offset, 8px);}& .base.has-labels .labels{display:inline-grid;}& .label-lines{grid-column:lines;grid-row:1;padding-block:var(--ui-range-track-padding, 4px);}& .label-lines > div{grid-column:1;grid-row:1;display:grid;align-items:center;justify-items:center;position:relative;height:10%;}& .label-lines > div > div{width:var(--ui-range-label-line-size, 16px);border-block-start-style:var(--ui-range-label-line-style, solid);}& .label-blocks{grid-column:blocks;grid-row:1;padding-block:var(--ui-range-track-padding, 4px);display:grid;}& .label-blocks > div{grid-column:1;grid-row:1;display:grid;align-items:center;justify-items:start;position:relative;height:10%;}} :host([vertical]:not([multiple])){& .thumb-from-parent{display:none;}& .off-before{display:none;}& .on{inset-block-end:calc(100% - var(--ui-roffset-onoff-to));}& .off-after{inset-block-start:var(--ui-roffset-onoff-to);}} :host([vertical][multiple]){& .off-before{inset-block-end:calc(100% - var(--ui-roffset-onoff-from));}& .on{inset-block-start:var(--ui-roffset-onoff-from);inset-block-end:calc(100% - var(--ui-roffset-onoff-to));}& .off-after{inset-block-start:var(--ui-roffset-onoff-to);}} :host([vertical][label-swap]){& .base{grid-template-columns:[label] auto [track] var(--ui-rms);grid-template-rows:1fr;}& .labels{grid-template-columns:[blocks] auto [lines] auto;grid-template-rows:1fr;}& .label-blocks > div{justify-items:end;}} :host([vertical][label-lines]:not([label-swap])) .base-labels{position:relative;inset-inline-start:calc(var(--ui-rt2lg) * -1);}:host([vertical][label-lines][label-swap]) .base-labels{position:relative;inset-inline-end:calc(var(--ui-rt2lg) * -1);}:host(:not([highlight])){& .highlight-from, .highlight-to{display:none;}} :host([highlight]){& .highlight-from, .highlight-to{opacity:0;display:none;position:absolute;inset:unset;text-wrap:nowrap;background-color:var(--ui-range-highlight-background, var(--ui-default-background, hsl(0 0% 90% / 1)));color:var(--ui-range-highlight-foreground, var(--ui-default-foreground, hsl(0 0% 30% / 1)));font-size:var(--ui-range-highlight-font-size, var(--ui-font-size-normal, 16px));font-weight:var(--ui-range-highlight-font-weight, var(--ui-font-weight-bold, bold));padding:var(--ui-range-highlight-padding, 8px 16px);border-radius:var(--ui-range-highlight-border-radius, var(--ui-border-radius-normal, 4px));border-style:var(--ui-range-highlight-border-style, none);border-width:var(--ui-range-highlight-border-width, var(--ui-border-width, 1px));border-color:var(--ui-range-highlight-border-color, var(--ui-default-foreground, hsl(0 0% 30% / 1)));box-shadow:var(--ui-range-highlight-box-shadow, none);transition-property:opacity, display;transition-duration:var(--ui-animation-duration-default, 200ms);transition-timing-function:ease-in-out;transition-behavior:allow-discrete;}& .base.dragging .highlight-from, .base.dragging .highlight-to, .base.highlight-show .highlight-from, .base.highlight-show .highlight-to{opacity:1;display:grid;@starting-style{opacity:0;}}}:host(:not([vertical])[highlight]:not([highlight-swap])){& .highlight-from, .highlight-to{inset-block-end:calc(100% + var(--ui-range-highlight-gap, 8px));justify-self:center;align-self:end;}} :host(:not([vertical])[highlight][highlight-swap]){& .highlight-from, .highlight-to{inset-block-start:calc(100% + var(--ui-range-highlight-gap, 8px));justify-self:center;align-self:start;}} :host([vertical][highlight]:not([highlight-swap])){& .highlight-from, .highlight-to{inset-inline-end:calc(100% + var(--ui-range-highlight-gap, 8px));justify-self:end;align-self:center;}} :host([vertical][highlight][highlight-swap]){& .highlight-from, .highlight-to{inset-inline-start:calc(100% + var(--ui-range-highlight-gap, 8px));justify-self:start;align-self:center;}} .base[disabled] .base-track{cursor:not-allowed;filter:brightness(75%);}@media (forced-colors:active) or (prefers-contrast:more){.steppers{display:none;}.track > *{background-color:transparent;}.track{border-style:solid;border-width:1px;border-color:fieldtext;box-shadow:none;}.thumb-from, .thumb-to{border-style:solid;border-width:2px;border-color:fieldtext;box-shadow:none;}:host([highlight]) .highlight-from, :host([highlight]) .highlight-to{border-style:solid;border-width:1px;border-color:fieldtext;box-shadow:none;}} @media (prefers-reduced-motion){:host([highlight]){transition:none;}} ',UiRange.uiHtml='<div class="base"><div class="base-track"><div class="steppers"></div><div class="track" tabindex="-1"><div class="inner-track"></div><div class="off-before"></div><div class="on"></div><div class="off-after"></div></div><div class="thumb-bar"><div class="thumb-from-parent"><div class="thumb-from" role="slider" tabindex="0"></div><div class="highlight-from"></div></div><div class="thumb-to-parent"><div class="thumb-to" role="slider" tabindex="0"></div><div class="highlight-to"></div></div></div></div><div class="base-labels"><div class="labels"><div class="label-lines"></div><div class="label-blocks"></div></div></div></div>',i.createUi(UiRange,"ui-range",import.meta.url);