Passing slider value to css variable

I have been tasked with developing a scalable ui for an existing application. In order to scale font-sizes and width values I will be using a css variable. For font-size, it would look like this:
font-size: calc(var(--fontSizeMedium) * var(--uiScaling));

I would like to be able to use a slider to set the value for ‘–uiScaling’ from 1 to 2 dynamically. Is it possible to pass the value retrieved from the slider to the variable at runtime?

(Of course it’s possible, alas I need help is what I am trying to say… :slight_smile: )

Like this? Just drag the slider to get the text resized.

1 Like

DynamicFontSize.zip (129.8 KB)

1 Like

Looks like just the ticket. Brilliant. I will try and integrate this into my prototype.

It is based on an older slider example from @fizfaz. I just added the variable update.

I noticed. Very good.

I had one query: You converted the variable “–fontSizeMedium” in the code but I actually wanted the variable “–uiScaling” to be converted, because I will be using this in a calc() parameter.
How would one change this?

function update(newWidth) {
	let percentage = Math.round((newWidth/sliderWidth) * 100);
	let uiScaling = 1 + percentage/100;
	// console.log(uiScaling);
	let root = document.documentElement;
	root.style.setProperty('--fontSizeMedium', fontSizeMedium * uiScaling + "px");

What I need is “–uiScaling” to assume the value in a range of 1 to 2 so I can use:

calc((var(--anyVariable) * var(--uiScaling));

Because this will not only be used with font sizes but also width, padding etc…

Got it working. For posterity:
DynamicFontSize-sm.atype.zip (147.7 KB)

1 Like