slider-styler.min.js

const version="20211225",defaultSetup={element:{height:"2.2em",disableOutline:!0},handle:{isPresent:!0,background:{color:"#007cf8",color2:"green",gradient:!1,hover:{color:"#0061c3"},active:{color:"#2f98f9"}},width:"2em",height:"2em",borderRadius:"1em",border:{width:"0",color:"lightgray",hover:{},active:{}},shadow:{color:"black",x:"0",y:"0",blur:"2px",spread:"0"}},track:{isPresent:!0,background:{color:"#efefef",color2:"green",gradient:!1,hover:{color:"#e5e5e5"},active:{color:"#f5f5f5"}},height:"1em",borderRadius:"0.5em",border:{width:"1px",color:"#b2b2b2",hover:{color:"#9a9a9a"},active:{color:"#c1c1c1"}},shadow:{color:"black",x:"0",y:"0",blur:"0",spread:"0"}},progress:{isPresent:!0,background:{color:"#007cf8",color2:"green",gradient:!1,hover:{color:"#0061c3"},active:{color:"#2f98f9"}}}};function createColorPicker(e,t,n="enabled"){return new Pickr({el:e,container:"#controlsContainer",theme:"monolith",appClass:"colorPicker",disabled:"disabled"==n,outputPrecision:0,comparison:!1,default:t,defaultRepresentation:"HEX",position:"bottom-start",adjustableNumbers:!0,components:{palette:!0,preview:!1,opacity:!0,hue:!0,interaction:{hex:!0,rgba:!0,hsla:!1,hsva:!1,cmyk:!1,input:!0,cancel:!1,clear:!1,save:!1}}})}function toRGBa(e){return e.getColor().toHEXA().toString()}function generateBackground(e,t,n){return n?`linear-gradient(to right, ${e}, ${t})`:e}class Length{constructor(e,t="px"){this.length=e,this.unit=t}get value(){return Length.makeValue(this.length,this.unit)}static makeValue(e,t){return 0==e?"0":e+t}static parse(e){if("0"==e)return new Length(0);const t=/^(.*)(px|em)$/i.exec(e);if(null!==t){const e=Number.parseFloat(t[1]);if(NaN!=e)return new Length(e,t[2])}throw new Error(`Failed to parse CSS length '${e}'`)}}function generateBorder(e,t){return 0==e.length?"none":e.value+" solid "+t}function generateShadow(e,t,n,r,a){if(0==t.length&&0==n.length&&0==r.length&&0==a.length)return"none";let o=t.value+" "+n.value;return 0!=a.length?o+=" "+r.value+" "+a.value:0!=r.length&&(o+=" "+r.value),o+" "+e}function evluateWithHook(e,t){return null===t?e():t(e)}function getEvaluatorWithHook(e,t){return null===t?e:()=>t(e)}function addEventListeners(e,t,n){if(Array.isArray(e))for(let r of e)t.addEventListener(r,n);else t.addEventListener(e,n)}function setupValidation(e,t,n,r=!0,a=null){const o=document.querySelector(e+" .validationDisplay");function d(e=!0){e?o.classList.remove("invalid"):o.classList.add("invalid")}d(r);const s=()=>CSS.supports(t,n.value),l=null===a?s:()=>a(n.value,s);return addEventListeners(["input","change"],n,(function(){d(l())})),d}function dispatchValueChangedEvent(e){e.dispatchEvent(new CustomEvent("valueChanged"))}function isFunction(e){return e&&"[object Function]"===Object.prototype.toString.call(e)}class RawInput{constructor(e,t){if(null!==t&&!isFunction(t))throw TypeError("updateFunction is not a function");this.input=e,this.updateFunction=t}}function setupBackgroundSection(e,t,n=null){function r(e){const n=t[e];return void 0!==n?n:(console.error("Failed to get value '"+e+"' for background"),"#00ff00")}const a=createColorPicker(e+" #backgroundColor",r("color")),o=createColorPicker(e+" #backgroundColor2",r("color2")),d=document.querySelector(e),s=d.querySelector("#gradientCheckbox"),l=d.querySelector("#rawBackground");try{t.gradient||o.disable(),s.checked=t.gradient,l.value=evluateWithHook((()=>generateBackground(t.color,t.color2,t.gradient)),n)}catch(e){console.error("Failed to parse values: "+e)}const u=setupValidation(e,"background",l),i=getEvaluatorWithHook((()=>generateBackground(toRGBa(a),toRGBa(o),s.checked)),n);function c(){const e=i();l.value!=e&&(l.value=e,dispatchValueChangedEvent(l),u())}a.on("change",c),o.on("change",c);return addEventListeners(["change","input"],s,(()=>{c(),s.checked?o.enable():o.disable()})),new RawInput(l,c)}function getVisibilityCheckbox(e){const t=e+' input[type="checkbox"].visibilityControl',n=document.querySelector(t);if(null===n)throw new Error("Can't find "+t);return n}function setupOverriddenBackgroundSection(e,t,n){const r=getVisibilityCheckbox(e);let a;void 0===t||void 0===t.color?(r.checked=!1,a=n):(r.checked=!0,a={color:t.color},void 0===t.color2?(a.color2=n.color2,a.gradient=!1):(a.color2=t.color2,a.graadient=void 0!==t.gradient&&t.gradient));const o=setupBackgroundSection(e,a,(e=>r.checked?e():""));return r.addEventListener("change",o.updateFunction),o}function setInputStep(e,t,n=!1){switch(t){case"px":n&&(e.value*=16),e.step=1;break;case"em":n&&(e.value/=16),e.step=.1}}function setupLengthUnitChange(e,t){t.addEventListener("change",(()=>{setInputStep(e,t.value,!0)}))}function setupBorderSection(e,t,n=null){const r=document.querySelector(e),a=r.querySelector("#borderWidth"),o=r.querySelector("#borderWidthUnit"),d=createColorPicker(e+" #borderColor",function(e){const n=t[e];return void 0!==n?n:(console.error("Failed to get value '"+e+"' for border"),"#ff0000")}("color")),s=r.querySelector("#rawBorder");setupLengthUnitChange(a,o);try{const e=Length.parse(t.width);a.value=e.length,o.value=e.unit,setInputStep(a,e.unit),s.value=evluateWithHook((()=>generateBorder(e,t.color)),n)}catch(e){console.error("Failed to parse values: "+e)}const l=setupValidation(e,"border",s),u=getEvaluatorWithHook((()=>generateBorder(new Length(a.value,o.value),toRGBa(d))),n);function i(){const e=u();s.value!=e&&(s.value=e,dispatchValueChangedEvent(s),l())}for(let e of[a,o])addEventListeners(["change","input"],e,i);return d.on("change",i),new RawInput(s,i)}function setupOverriddenBorderColorSection(e,t,n){const r=void 0!==t&&void 0!==t.color,a=r?t.color:function(e){const t=n[e];return void 0!==t?t:(console.error("Failed to get value '"+e+"' for border"),"#ff0000")}("color"),o=getVisibilityCheckbox(e);o.checked=r;const d=createColorPicker(e+" #borderColor",a),s=document.querySelector(e+" #rawBorderColor");s.value=r?a:"";const l=setupValidation(e,"border-color",s);function u(){const e=o.checked?toRGBa(d):"";s.value!=e&&(s.value=e,dispatchValueChangedEvent(s),l())}return d.on("change",u),o.addEventListener("change",u),new RawInput(s,u)}function setupLengthFieldSection(e,t,n,r,a=null){const o=document.querySelector(e),d=o.querySelector(r.amount),s=o.querySelector(r.unit),l=o.querySelector(r.raw);setupLengthUnitChange(d,s);const u=null===a?null:a.value;try{const e=Length.parse(n);d.value=e.length,s.value=e.unit,setInputStep(d,e.unit),l.value=evluateWithHook((()=>e.value),u)}catch(e){console.error("Failed to parse value: "+e)}const i=setupValidation(e,t,l,!0,null===a?null:a.validation),c=getEvaluatorWithHook((()=>Length.makeValue(d.value,s.value)),u);function p(){const e=c();l.value!=e&&(l.value=e,dispatchValueChangedEvent(l),i())}for(let e of[d,s])addEventListeners(["change","input"],e,p);return new RawInput(l,p)}function setupWidthSection(e,t){return setupLengthFieldSection(e,"width",t,{amount:"#width",unit:"#widthUnit",raw:"#rawWidth"})}function setupHeightSection(e,t,n){return setupLengthFieldSection(e,"height",t,{amount:"#height",unit:"#heightUnit",raw:"#rawHeight"},n)}function setupBorderRadiusSection(e,t){return setupLengthFieldSection(e,"border-radius",t,{amount:"#borderRadius",unit:"#borderRadiusUnit",raw:"#rawBorderRadius"})}function setupShadowSection(e,t){const n=createColorPicker(e+" #shadowColor",function(e){const n=t[e];return void 0!==n?n:(console.error("Failed to get value '"+e+"' for shadow"),"#0000ff")}("color")),r=document.querySelector(e),a=r.querySelector("#shadowX"),o=r.querySelector("#shadowXUnit"),d=r.querySelector("#shadowY"),s=r.querySelector("#shadowYUnit"),l=r.querySelector("#shadowBlur"),u=r.querySelector("#shadowBlurUnit"),i=r.querySelector("#shadowSpread"),c=r.querySelector("#shadowSpreadUnit"),p=r.querySelector("#rawShadow");setupLengthUnitChange(a,o),setupLengthUnitChange(d,s),setupLengthUnitChange(l,u),setupLengthUnitChange(i,c);try{const e=Length.parse(t.x),n=Length.parse(t.y),r=Length.parse(t.blur),h=Length.parse(t.spread);a.value=e.length,o.value=e.unit,setInputStep(a,e.unit),d.value=n.length,s.value=n.unit,setInputStep(d,n.unit),l.value=r.length,u.value=r.unit,setInputStep(l,r.unit),i.value=h.length,c.value=h.unit,setInputStep(i,h.unit),p.value=generateShadow(t.color,e,n,r,h)}catch(e){console.error("Failed to parse values: "+e)}const h=setupValidation(e,"box-shadow",p);function g(){const e=generateShadow(toRGBa(n),new Length(a.value,o.value),new Length(d.value,s.value),new Length(l.value,u.value),new Length(i.value,c.value));p.value!=e&&(p.value=e,dispatchValueChangedEvent(p),h())}n.on("change",g);for(let e of[a,o,d,s,l,u,i,c])addEventListeners(["change","input"],e,g);return new RawInput(p,g)}const rawInputs=[];function addToInputsAndGet(e){return rawInputs.push(e),e.input}function setupCheckbox(e,t){const n=document.querySelector(e);return n.checked=t,n}const inputs={element:{height:addToInputsAndGet(setupHeightSection("#element #height",defaultSetup.element.height,{value:e=>{const t=e();return"0"==t?"":t},validation:(e,t)=>0==e.length||"0"==e||t()})),disableOutline:setupCheckbox("#outline #disableOutline",defaultSetup.element.disableOutline)},handle:{isPresent:setupCheckbox("#handle #isPresent",defaultSetup.handle.isPresent),background:addToInputsAndGet(setupBackgroundSection("#handle #background #normal",defaultSetup.handle.background)),width:addToInputsAndGet(setupWidthSection("#handle #width",defaultSetup.handle.width)),height:addToInputsAndGet(setupHeightSection("#handle #height",defaultSetup.handle.height)),borderRadius:addToInputsAndGet(setupBorderRadiusSection("#handle #borderRadius",defaultSetup.handle.borderRadius)),border:addToInputsAndGet(setupBorderSection("#handle #border #normal",defaultSetup.handle.border)),shadow:addToInputsAndGet(setupShadowSection("#handle #shadow",defaultSetup.handle.shadow)),hover:{background:addToInputsAndGet(setupOverriddenBackgroundSection("#handle #background #hover",defaultSetup.handle.background.hover,defaultSetup.handle.background)),borderColor:addToInputsAndGet(setupOverriddenBorderColorSection("#handle #border #hover",defaultSetup.handle.border.hover,defaultSetup.handle.border))},active:{background:addToInputsAndGet(setupOverriddenBackgroundSection("#handle #background #active",defaultSetup.handle.background.active,defaultSetup.handle.background)),borderColor:addToInputsAndGet(setupOverriddenBorderColorSection("#handle #border #active",defaultSetup.handle.border.active,defaultSetup.handle.border))}},track:{isPresent:setupCheckbox("#track #isPresent",defaultSetup.track.isPresent),background:addToInputsAndGet(setupBackgroundSection("#track #background #normal",defaultSetup.track.background)),height:addToInputsAndGet(setupHeightSection("#track #height",defaultSetup.track.height)),borderRadius:addToInputsAndGet(setupBorderRadiusSection("#track #borderRadius",defaultSetup.track.borderRadius)),border:addToInputsAndGet(setupBorderSection("#track #border #normal",defaultSetup.track.border)),shadow:addToInputsAndGet(setupShadowSection("#track #shadow",defaultSetup.track.shadow)),hover:{background:addToInputsAndGet(setupOverriddenBackgroundSection("#track #background #hover",defaultSetup.track.background.hover,defaultSetup.track.background)),borderColor:addToInputsAndGet(setupOverriddenBorderColorSection("#track #border #hover",defaultSetup.track.border.hover,defaultSetup.track.border))},active:{background:addToInputsAndGet(setupOverriddenBackgroundSection("#track #background #active",defaultSetup.track.background.active,defaultSetup.track.background)),borderColor:addToInputsAndGet(setupOverriddenBorderColorSection("#track #border #active",defaultSetup.track.border.active,defaultSetup.track.border))}},progress:{isPresent:setupCheckbox("#progress #isPresent",defaultSetup.progress.isPresent),background:addToInputsAndGet(setupBackgroundSection("#progress #background #normal",defaultSetup.progress.background)),hover:{background:addToInputsAndGet(setupOverriddenBackgroundSection("#progress #background #hover",defaultSetup.progress.background.hover,defaultSetup.progress.background))},active:{background:addToInputsAndGet(setupOverriddenBackgroundSection("#progress #background #active",defaultSetup.progress.background.active,defaultSetup.progress.background))}}},progressSubContainers=document.querySelectorAll(".progressSubContainer");function setProgressSubContainersVisible(e){const t=e?"":"none";for(let e of progressSubContainers)e.style.display=t}setProgressSubContainersVisible(defaultSetup.track.isPresent&&defaultSetup.progress.isPresent);const cssBlock=document.getElementById("generatedCssBlock");document.getElementById("stickCssBlockCheckbox").addEventListener("change",(function(){this.checked?cssBlock.classList.add("stickyCssBlock"):cssBlock.classList.remove("stickyCssBlock")}));const examples=document.getElementById("examples"),output=document.getElementById("styleDisplay"),styleElement=document.getElementById("styleElement"),decomposeStyle=function(){const e=document.createElement("SPAN").style;return function(t,n){if(e.cssText=t,!Array.isArray(n))return e.getPropertyValue(n);const r={};for(let t of n)r[t]=e.getPropertyValue(t);return r}}(),defaultStyledSliderClassName="styled-slider";let styledSliderClassName="styled-slider";function generateStyles(){const e=inputs.handle.width.value,t=inputs.handle.height.value,n=inputs.track.height.value,r="none"==inputs.handle.border.value?null:decomposeStyle(`border: ${inputs.handle.border.value};`,["border-top-width","border-bottom-width","border-left-width","border-right-width"]),a="none"==inputs.track.border.value?null:decomposeStyle(`border: ${inputs.track.border.value};`,["border-top-width","border-bottom-width"]);let o=!1,d="";"0"!=n&&(d=null!=a?`max((${n} - ${a["border-top-width"]} - ${a["border-bottom-width"]}) * 0.5,0px)`:`${n} * 0.5`,o=!0);let s="";if("0"!=t&&(s=`${t} * 0.5`,o=!0),null!=r){const e=r["border-top-width"];s=0==s.length?e:`max(${s},${e})`}0!=s.length&&(0==d.length?d="-1 * "+s:d+=" - "+s),0==d.length?d="0":o&&(d="calc("+d+")");let l=`/*generated with Input range slider CSS style generator (version ${version})\nhttps://toughengineer.github.io/demo/slider-styler*/\ninput[type=range].${styledSliderClassName} {\n`;function u(e,...t){let n="";for(let e of t)0!=e[1].length&&(n+=`  ${e[0]}: ${e[1]};\n`);0!=n.length&&(l+="\n"+e+" {\n"+n+"}\n")}0!=inputs.element.height.value.length&&(l+=`  height: ${inputs.element.height.value};\n`),l+="  -webkit-appearance: none;\n}\n",inputs.track.isPresent.checked&&inputs.progress.isPresent.checked&&(l+=`\n/*progress support*/\ninput[type=range].${styledSliderClassName}.slider-progress {\n  --range: calc(var(--max) - var(--min));\n  --ratio: calc((var(--value) - var(--min)) / var(--range));\n  --sx: calc(${inputs.handle.isPresent.checked?`0.5 * ${e} + var(--ratio) * (100% - ${e})`:"var(--ratio) * 100%"});\n}\n`),inputs.element.disableOutline.checked&&(l+=`\ninput[type=range].${styledSliderClassName}:focus {\n  outline: none;\n}\n`),l+=`\n/*webkit*/\ninput[type=range].${styledSliderClassName}::-webkit-slider-thumb {\n  -webkit-appearance: none;\n`,inputs.handle.isPresent.checked?l+=`  width: ${e};\n  height: ${t};\n  border-radius: ${inputs.handle.borderRadius.value};\n  background: ${inputs.handle.background.value};\n  border: ${inputs.handle.border.value};\n  box-shadow: ${inputs.handle.shadow.value};\n  margin-top: ${d};\n`:l+=`  width: 0;\n  height: ${n};\n  visibility: hidden;\n`,l+="}\n",l+=`\ninput[type=range].${styledSliderClassName}::-webkit-slider-runnable-track {\n  height: ${n};\n  border: ${inputs.track.border.value};\n`,inputs.track.isPresent.checked?l+=`  border-radius: ${inputs.track.borderRadius.value};\n  background: ${inputs.track.background.value};\n  box-shadow: ${inputs.track.shadow.value};\n`:null!=a&&(l+="  border-color: transparent;\n"),l+="}\n";const i="none"==inputs.handle.border.value?"":inputs.handle.hover.borderColor.value;inputs.handle.isPresent.checked&&u(`input[type=range].${styledSliderClassName}::-webkit-slider-thumb:hover`,["background",inputs.handle.hover.background.value],["border-color",i]);const c="none"==inputs.track.border.value?"":inputs.track.hover.borderColor.value;inputs.track.isPresent.checked&&u(`input[type=range].${styledSliderClassName}:hover::-webkit-slider-runnable-track`,["background",inputs.track.hover.background.value],["border-color",c]);const p="none"==inputs.handle.border.value?"":inputs.handle.active.borderColor.value;inputs.handle.isPresent.checked&&u(`input[type=range].${styledSliderClassName}::-webkit-slider-thumb:active`,["background",inputs.handle.active.background.value],["border-color",p]);const h="none"==inputs.track.border.value?"":inputs.track.active.borderColor.value;function g(e){return CSS.supports("background-color",e)?`linear-gradient(${e},${e})`:e}function b(e,t){return 0==e.length?t:e}inputs.track.isPresent.checked&&u(`input[type=range].${styledSliderClassName}:active::-webkit-slider-runnable-track`,["background",inputs.track.active.background.value],["border-color",h]);const v=g(inputs.progress.background.value),k=b(inputs.track.hover.background.value,inputs.track.background.value);let S=inputs.progress.hover.background.value;0==S.length&&0==inputs.track.hover.background.value.length||(S=g(b(S,inputs.progress.background.value)));const m=b(inputs.track.active.background.value,k);let y=inputs.progress.active.background.value;function f(e,t,...n){return"0"==e||null===t?e:`max(calc(${e} - ${t[n[0]]} - ${t[n[1]]}),0px)`}0==y.length&&0==inputs.track.active.background.value.length||(y=g(b(y,S))),inputs.track.isPresent.checked&&inputs.progress.isPresent.checked&&(l+=`\ninput[type=range].${styledSliderClassName}.slider-progress::-webkit-slider-runnable-track {\n  background: ${v} 0/var(--sx) 100% no-repeat, ${inputs.track.background.value};\n}\n`,0!=S.length&&(l+=`\ninput[type=range].${styledSliderClassName}.slider-progress:hover::-webkit-slider-runnable-track {\n  background: ${S} 0/var(--sx) 100% no-repeat, ${k};\n}\n`),0!=y.length&&(l+=`\ninput[type=range].${styledSliderClassName}.slider-progress:active::-webkit-slider-runnable-track {\n  background: ${y} 0/var(--sx) 100% no-repeat, ${m};\n}\n`));const C=f(e,r,"border-left-width","border-right-width"),w=f(t,r,"border-top-width","border-bottom-width"),$=f(n,a,"border-top-width","border-bottom-width");l+=`\n/*mozilla*/\ninput[type=range].${styledSliderClassName}::-moz-range-thumb {\n`,inputs.handle.isPresent.checked?l+=`  width: ${C};\n  height: ${w};\n  border-radius: ${inputs.handle.borderRadius.value};\n  background: ${inputs.handle.background.value};\n  border: ${inputs.handle.border.value};\n  box-shadow: ${inputs.handle.shadow.value};\n`:l+=`  width: 0;\n  height: ${n};\n  visibility: hidden;\n`,l+="}\n",l+=`\ninput[type=range].${styledSliderClassName}::-moz-range-track {\n  height: ${$};\n  border: ${inputs.track.border.value};\n`,inputs.track.isPresent.checked?l+=`  border-radius: ${inputs.track.borderRadius.value};\n  background: ${inputs.track.background.value};\n  box-shadow: ${inputs.track.shadow.value};\n`:null!=a&&(l+="  visibility: hidden;\n"),l+="}\n",inputs.handle.isPresent.checked&&u(`input[type=range].${styledSliderClassName}::-moz-range-thumb:hover`,["background",inputs.handle.hover.background.value],["border-color",i]),inputs.track.isPresent.checked&&u(`input[type=range].${styledSliderClassName}:hover::-moz-range-track`,["background",inputs.track.hover.background.value],["border-color",c]),inputs.handle.isPresent.checked&&u(`input[type=range].${styledSliderClassName}::-moz-range-thumb:active`,["background",inputs.handle.active.background.value],["border-color",p]),inputs.track.isPresent.checked&&u(`input[type=range].${styledSliderClassName}:active::-moz-range-track`,["background",inputs.track.active.background.value],["border-color",h]),inputs.track.isPresent.checked&&inputs.progress.isPresent.checked&&(l+=`\ninput[type=range].${styledSliderClassName}.slider-progress::-moz-range-track {\n  background: ${v} 0/var(--sx) 100% no-repeat, ${inputs.track.background.value};\n}\n`,0!=S.length&&(l+=`\ninput[type=range].${styledSliderClassName}.slider-progress:hover::-moz-range-track {\n  background: ${S} 0/var(--sx) 100% no-repeat, ${k};\n}\n`),0!=y.length&&(l+=`\ninput[type=range].${styledSliderClassName}.slider-progress:active::-moz-range-track {\n  background: ${y} 0/var(--sx) 100% no-repeat, ${m};\n}\n`)),l+=`\n/*ms*/\ninput[type=range].${styledSliderClassName}::-ms-fill-upper {\n  background: transparent;\n  border-color: transparent;\n}\n\ninput[type=range].${styledSliderClassName}::-ms-fill-lower {\n  background: transparent;\n  border-color: transparent;\n}\n\ninput[type=range].${styledSliderClassName}::-ms-thumb {\n  width: ${e};\n  height: ${t};\n  border-radius: ${inputs.handle.borderRadius.value};\n  background: ${inputs.handle.background.value};\n  border: ${inputs.handle.border.value};\n  box-shadow: ${inputs.handle.shadow.value};\n  margin-top: 0;\n  box-sizing: border-box;\n}\n\ninput[type=range].${styledSliderClassName}::-ms-track {\n  height: ${n};\n  border-radius: ${inputs.track.borderRadius.value};\n  background: ${inputs.track.background.value};\n  border: ${inputs.track.border.value};\n  box-shadow: ${inputs.track.shadow.value};\n  box-sizing: border-box;\n}\n`,u(`input[type=range].${styledSliderClassName}::-ms-thumb:hover`,["background",inputs.handle.hover.background.value],["border-color",i]),u(`input[type=range].${styledSliderClassName}:hover::-ms-track`,["background",inputs.track.hover.background.value],["border-color",c]),u(`input[type=range].${styledSliderClassName}::-ms-thumb:active`,["background",inputs.handle.active.background.value],["border-color",p]),u(`input[type=range].${styledSliderClassName}:active::-ms-track`,["background",inputs.track.active.background.value],["border-color",h]);const B=decomposeStyle(`border-radius: ${inputs.track.borderRadius.value};`,["border-top-left-radius","border-bottom-left-radius"]),I="none"==inputs.track.border.value?"0":function(){const e=decomposeStyle(`border: ${inputs.track.border.value};`,["border-top-width","border-bottom-width","border-left-width"]);return`-${e["border-top-width"]} 0 -${e["border-bottom-width"]} -${e["border-left-width"]}`}();inputs.progress.isPresent.checked&&(l+=`\ninput[type=range].${styledSliderClassName}.slider-progress::-ms-fill-lower {\n  height: ${$};\n  border-radius: ${B["border-top-left-radius"]} 0 0 ${B["border-bottom-left-radius"]};\n  margin: ${I};\n  background: ${inputs.progress.background.value};\n  border: ${inputs.track.border.value};\n  border-right-width: 0;\n}\n`,0!=inputs.progress.hover.background.value.length&&u(`input[type=range].${styledSliderClassName}.slider-progress:hover::-ms-fill-lower`,["background",inputs.progress.hover.background.value],["border-color",c]),0!=inputs.progress.active.background.value&&u(`input[type=range].${styledSliderClassName}.slider-progress:active::-ms-fill-lower`,["background",inputs.progress.active.background.value],["border-color",h])),output.textContent=l,styleElement.innerHTML=l}generateStyles();const throttlePeriod=100;let nextUpdateTime=performance.now(),updateScheduled=!1;function generateStylesThrottled(){const e=performance.now(),t=nextUpdateTime-e;t<=0?(generateStyles(),nextUpdateTime=e+throttlePeriod):updateScheduled||(setTimeout((()=>{generateStyles(),updateScheduled=!1}),t),updateScheduled=!0)}for(let e of rawInputs)addEventListeners(["change","input","valueChanged"],e.input,generateStylesThrottled);function toggleTrackVisibility(){setProgressSubContainersVisible(inputs.track.isPresent.checked&&inputs.progress.isPresent.checked),generateStylesThrottled()}inputs.element.disableOutline.addEventListener("change",generateStylesThrottled),inputs.handle.isPresent.addEventListener("change",generateStylesThrottled),inputs.track.isPresent.addEventListener("change",toggleTrackVisibility),inputs.progress.isPresent.addEventListener("change",toggleTrackVisibility);const isStyledSliderClassNameValid=(()=>{const e=/^[a-zA-Z]+[_a-zA-Z0-9-]*$/;return t=>e.test(t)&&"slider-progress"!=t})(),classNameInput=document.getElementById("className"),classNameValidationDisplay=document.getElementById("classNameValidationDisplay");classNameInput.addEventListener("input",(()=>{isStyledSliderClassNameValid(classNameInput.value)?classNameValidationDisplay.classList.remove("invalid"):classNameValidationDisplay.classList.add("invalid")}));const styledSliders=document.querySelectorAll("."+styledSliderClassName),styledSliderClass=document.getElementById("styledSliderClass"),styledSliderProgressClass=document.getElementById("styledSliderProgressClass");function setStyledSliderClassName(e){for(let t of styledSliders)t.classList.replace(styledSliderClassName,e);styledSliderClass.textContent=`class="${e}"`,styledSliderProgressClass.textContent=`class="${e} slider-progress"`,styledSliderClassName=e,generateStylesThrottled()}function setupCopyButton(e,t){const n=document.getElementById(e),r=e=>{n.classList.add("not-copied"),n.offsetWidth,n.classList.remove("not-copied"),console.log("Failed to copy to clipboard: ",e)};n.addEventListener("click",(e=>{try{navigator.clipboard.writeText(t.textContent).then((()=>{n.classList.add("copied"),n.offsetWidth,n.classList.remove("copied")}),r)}catch(e){r(e.message)}}))}classNameInput.addEventListener("change",(()=>{classNameInput.value!=styledSliderClassName&&isStyledSliderClassNameValid(classNameInput.value)&&setStyledSliderClassName(classNameInput.value)})),document.getElementById("resetClassNameButton").addEventListener("click",(()=>{classNameInput.value="styled-slider",setStyledSliderClassName("styled-slider"),classNameValidationDisplay.classList.remove("invalid")})),setupCopyButton("copyStyledSliderButtonClass",styledSliderClass),setupCopyButton("copyStyledSliderProgressButtonClass",styledSliderProgressClass),setupCopyButton("copyCssButton",output),document.getElementById("downloadCssLink").onclick=()=>{const e=document.createElement("a");e.setAttribute("href","data:text/plain;charset=utf-8,"+encodeURIComponent(styleElement.textContent)),e.setAttribute("download","range-input.css"),e.style.display="none",document.body.appendChild(e),e.click(),document.body.removeChild(e)},setupCopyButton("copyJSButton",document.getElementById("scriptDisplay"));