Smart Home Temperature & Light Slider

This Smart Home Temperature & Light Slider is a modern control component designed for IoT dashboards. It combines a thermostat and a dimmer switch into a single, compact interface. Users can toggle between “Temperature” (Celsius) and “Brightness” (Lumens) modes, triggering a smooth color transition from cool blue to warm amber, providing immediate visual context.

Core Technique: Dynamic Styling via Vue & CSS Variables

The component relies on Vue’s reactivity to manage state and directly manipulate CSS Custom Properties for theming.

1. The Reactive Array Bars

The background “track” of the slider isn’t a simple border. It’s constructed from an array of <span> elements (barsArray) generated via v-for.

• Top Half: Scales from 0 to full size, colored white.
• Bottom Half: Scales back down, colored dynamically based on the active mode (Blue or Orange).

topBars() {
    // Split bars into top and bottom halves
    let half = this.barsArray.length / 2;
    // ... logic to calculate scale and apply colors ...
    bar.style.transform = `scale(${j * 0.2})`; // Creates the tapered look
    bar.style.backgroundColor = this.currentColor; // Applies dynamic theme color
}

2. CSS Variable Injection

Instead of managing colors purely in CSS classes, the Vue component injects the active color into the root element using style.setProperty. This allows all child elements (icons, text, borders) to inherit the theme color instantly without complex class toggling.

showTemp() {
    this.root.style.setProperty("--current-color", this.tempColor); // Sets global blue
    this.currentColor = this.tempColor;
    this.topBars(); // Re-renders the bar visuals
}

Browser Support

The component uses standard CSS Grid and Custom Properties, which are widely supported.

Key Technologies:

• Vue.js 3: For reactive state management.
• CSS Variables: For dynamic theming.
• CSS Grid: For layout alignment.