Example how you can use css custom variable in html
css .container { display: -webkit-box; display: flex; }
.box { —switch1: clamp(0, max(var(—value) - 59.9987 , 1/(var(—value) - 59.9987)), 1); —switch2: clamp(0, max(90.0011 - var(—value), 1/(90.0011 - var(—value))), 1); —range-switch: clamp(0, var(—switch1) * var(—switch2), 1); height: 50px; padding:0 8px; box-sizing: border-box; border: 1px solid; transform: translateY(calc(15px - var(—range-switch) * 15px)); background-color: hsl(calc(100 * var(—range-switch)), 100%, 50%); display: flex; align-items: center; justify-content: center; } .box::before { content:attr(style); font-family:monospace; text-indent:-9ch; overflow:hidden; font-size:18px }
html