Super cool new CodePen feature alert! You’ve probably seen a bunch of “interactive” demos that let you changed values on the fly from a UI panel embedded directly in the demo. Jhey’s demos come immediately to mind, like this one:
That’s a tool called TweakPane doing the work. There’s another one called Knobs by Yair Even Or that Adam Argyle often uses:
I’ve often faked it with either the Checkbox Hack or a sprinkle of JavaScript when I’m demoing a very specific concept:
OK, enough examples because CodePen has a homegrown tool of its own 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 off CodePen if you’re so inclined.
That two-liner does a lot of lifting. It auto-detects CSS variables in your CSS and builds the panel for you, absolutely-positioned in the top-right corner:
It looks like you have to declare your variables on the :root element with default usage. I tried scoping them directly to the element and it was a no-go. It’s possible with a manual configuration, though.
Pretty cool, right? You can manually configure the input type, a value range, a default value, unit type, and yes, a scope that targets the element where the variables are defined. As far as units go, it supports all kinds of CSS numeric units. That includes unit-less values, though the documentation doesn’t explicitly say it. Just leave the unit property as an empty string ("").
I guess the only thing I’d like is to tell slideVars exactly what increments to use when manually configuring things. For example, unit-less values simply increment in integers, even if you define the default value as a decimal:
It works in default mode, however:
There’s a way to place the slideVars wherever you want by slapping a custom element where you want it in the HTML. It’s auto-placed at the bottom of the HTML <body> by default.
<slide-vars>
<p>Custom Label!</p>
</slide-vars>Or CSS it by selecting the custom element:
So much fun!
I’ve chatted with Chris about this years ago…I’ve created Knobs and told him he should integrate it into Codepen.. I’m shocked this UI was chosen over my beautiful (and lightweight) knobs which also has more features BTW.. There was really no need to create it since Knobs was already available for some years now..
Like
<input type="range">, you can addstepto the CSS Var configuration to tell it how much to change with each adjustment of the slider.Oh heck yeah, thanks a million Shaw!
GEOFF! Thanks for checking it out my man.
The 2nd configuration option has a scope value you can use for that example. Lemme know if you can/can’t get that working
Big time kudos to you and the team! I know that you know how useful this is for us around here.