@jacobberglund/bind-input-css

A web component that binds input elements to CSS custom properties for real-time styling control.

Installation

npm install @jacobberglund/bind-input-css

Usage

import "@jacobberglund/bind-input-css";

<!-- Bind to a global element -->
<bind-input-css variable="--scale" unit="px" target=":root" strategy="global">
  <input type="range" min="0" max="100" />
  <input type="number" />
</bind-input-css>

<!-- Bind to the closest ancestor -->
<div class="card">
  <bind-input-css variable="--card-padding" unit="rem" target=".card">
    <input type="number" min="0" max="5" />
  </bind-input-css>
</div>

<!-- Bind to the component itself -->
<bind-input-css variable="--opacity" strategy="self">
  <input type="range" min="0" max="1" step="0.1" />
</bind-input-css>

Attributes

| Attribute | Description | Default | | ---------- | -------------------------------------------------------- | ----------- | | variable | Required. CSS custom property name (must start with --) | — | | unit | Unit to append to the value (px, %, rem, etc.) | "" | | target | CSS selector for the element to bind to | — | | strategy | How to resolve the target: closest, global, or self | "closest" |

Features

• 🔗 Two-way binding - Syncs CSS variables with input values
• 🎚️ Input sync - Multiple inputs (range + number) stay in sync
• 🎯 Flexible targeting - Bind to ancestors, global elements, or self
• 📐 Unit support - Append any CSS unit automatically