A new feature has been introduced by CodePen called slideVars, which allows users to create interactive demos with adjustable values directly from a UI panel within the demo. Previously, tools like TweakPane and Knobs were used for such functionalities. However, CodePen’s slideVars can be easily integrated by importing it into the JavaScript panel with two lines of code:
“`javascript
import { slideVars } from “@codepen/slidevars”;
slideVars.init();
“`
This feature automatically detects CSS variables and builds a control panel in the top-right corner. Variables should be declared on the `:root` element by default, but manual configuration allows for more customization, such as specifying input types, value ranges, default values, unit types, and scoping to specific elements. It supports various CSS numeric units, including unit-less values. Users can also place the slideVars panel anywhere in the HTML by using a custom element, which is placed at the bottom of the HTML “ by default.
