Join the Webstudio community

Updated 2 months ago

Data Variables in CSS

At a glance

The community member is asking if there is a way to use Data Variables in CSS, and if not, what is the best workaround. They provide an example of creating a slider input and binding it to a "sliderValue" Data Variable, then changing CSS attributes based on the "sliderValue".

Another community member responds that you can't use Data Variables in CSS directly, but suggests a workaround of setting a CSS variable and using an HTML embed to modify the CSS variable based on the Data Variable.

kkvi

Is there a way to use Data Variables in CSS, if not what is the best workaround?
Example:

Create slider input and bind it to Data Variable "sliderValue"
Change the css attribute (text size or opacity) based on "sliderValue" (i.e. bind "sliderValue" to css variable)

2 comments

JJohn Siciliano

You can't but one way is to set a CSS variable, then use an HTML embed to modify the CSS variable based on a Data Variable

kkvi

Thanks!

Add a reply