2 JavaScript Thermostats

by Vladimir 1 min read

Design visually stunning and intuitive thermostat interfaces with these examples. At the core is the creation of a tactile circular UI with SVG, where a colored indicator smoothly “fills up” in response to drag gestures. To enhance the user experience, large, easy-to-read numbers that animate as the temperature changes are used. The examples also include customizing native sliders to create a branded and modern look while ensuring full accessibility.

Examples

A sleek, neumorphic UI thermostat showing temperature controls with a glowing gradient ring that changes from cool blue to warm orange as the dial is turned.

Neumorphic Drag Dial Thermostat

This is a Neumorphic Drag Dial Thermostat. It provides a tactile, skeuomorphic interface for setting numerical values (like temperature) through rotational dragging or keyboard input. The dial dynamically reveals cool-to-warm gradient colors based on the current value, enhancing the physical “feel” of a smart home control panel. (Requires: GSAP, Draggable)

Technologies:
HTML CSS JavaScript
Difficulty: Intermediate
Browser Support (as of Mar 2026):
Chrome Chrome 60+ Safari Safari 11+ Firefox Firefox 55+ Edge Edge 79+
Features:
Neumorphism Draggable Dial Dynamic Gradients Keyboard Accessible
Code by: Jon Kantner Jon Kantner
License: MIT
Interactive circular thermostat dial that changes color as the temperature is adjusted.

Minimalist Thermostat

An interactive skeuomorphic thermostat dial powered by GSAP Draggable. Rotating the dial dynamically updates the temperature value and ambient color hue, with full support for scale switching (C/F) and dark mode.

See the Pen Minimalist Thermostat.