slideVars

Live Demo

Click the button in the top right to open the controls. Move the sliders (and pick colors) to see the changes reflected in the demo below.

Auto-Detection Example

Just define CSS variables in your stylesheet. SlideVars figures out the rest:

Auto!

/* Your CSS */ 
:root { 
  --size: ; 
  --bg: ;
  --border-radius: ; 
  --rotation: ; 
  --shadow-size: ;
}

/* Your JavaScript */ import { slideVars } from "@codepen/slidevars"; slideVars.init(); // Auto-detects all variables!

Advanced: Manual Placement

You can manually place the <slide-vars> element wherever you want HTML (rather than it being auto-injected into the bottom of the <body>). Children will be slotted into the top of the control panel.

          
          <slide-vars>
  <p>Welcome to the fun zone.</p>
</slide-vars>
        

Supported Values

Length Units

Auto-detected sliders support all CSS numeric data types with intelligent default ranges:

Absolute: px, cm, mm, in, pt, pc, Q
Font-relative: em, rem, ex, ch, cap, lh, and root variants (rex, rch, etc.)
Viewport: vw, vh, vmin, vmax, and variants (svw, lvh, dvw, etc.)
Container: cqw, cqh, cqi, cqb, cqmin, cqmax
Angle: deg, grad, rad, turn
Time: s, ms
Frequency: Hz, kHz
Resolution: dpi, dpcm, dppx
Percentage: %
Grid: fr

💡 Smart Adaptation: Ranges automatically expand if the current value is outside the defaults.

Color Values

Auto-detected color variables support:

Hex: #rgb, #rrggbb, #rrggbbaa
Functional: rgb(), rgba(), hsl(), hsla()
Named: standard CSS named colors (including transparent and currentColor)

Note: newer color syntaxes (like oklch() / color()) aren’t currently auto-detected.

API Reference

`slideVars.init(config?, options?)`

Initialize the component with optional configuration.

Options:

defaultOpen: boolean - Whether controls are open on load (default: false)
auto: boolean - Enable auto-detection (default: true if config is empty)
scope: string - CSS selector to read variables from (default: ":root")

Programmatic Control

          
          slideVars.open(); // Open the controls panel
slideVars.close(); // Close the controls panel 
slideVars.toggle(); // Toggle open/closed
slideVars.destroy(); // Remove component from DOM
        