Playing with CodePen slideVars | CSS tricks

Super cool new CodePen feature alert! You’ve probably seen some “interactive” demos that let you change values ​​directly from a UI panel embedded directly into the demo. Jhey’s demos immediately comes to mind, like this:

That’s a tool called TweakPane do the work. Someone else is called Buttons by Yair Even Or that Adam Argyle often used:

I’ve often mimicked it with the Checkbox Hack or a pinch of JavaScript when demonstrating a very specific concept:

Okay, enough examples, because CodePen has its own tool called slideVars. All you have to do is import it and call it in the JavaScript panel:

import { slideVars } from "@codepen/slidevars";

slideVars.init();

You can import it into a project outside of CodePen if you feel like it.

That two-liner does a lot of lifting work. It automatically detects CSS variables in your CSS and builds the panel for you, absolutely in the top right corner:

It looks like you need to declare your variables on the :root element with standard usage. I tried it by pointing them directly at the element and it was a no-go. However, it is possible with manual configuration.

Pretty cool, right? You can manually configure the input type, a value range, a default value, the unit type, and yes, a range that targets the element in which the variables are defined. As for units, it supports all kinds of CSS numeric units. This also applies to unitless values, although the documentation does not explicitly state this. Just let the unit property as an empty string ("").

I guess all I’d like to do is tell slideVars exactly what steps to use when manually configuring things. For example, values ​​without units are simply incremented to integers, even if you define the default value as decimal:

However, it works in standard mode:

There is a way to place the slideVars wherever you want by placing a custom element at the desired location in the HTML. It is automatically placed at the bottom of the HTML by default.

  Custom Label!

Or CSS it by selecting the custom element:

So much fun!