Thermostat widget
Interactive temperature scroller with a draggable ruler. Displays the current temperature from your datasource and lets users set a new target by scrolling left/right (mouse, touch, or wheel). The selected value is automatically saved as an attribute on the device, with debounced writes to avoid spamming the server. Fully themeable — colors, fonts, range, tick density, and an optional auto-scale mode that adapts the font to any widget size.
Who it’s for
Building managers, smart home owners, and energy managers ask “how do I let occupants or operators adjust the temperature setpoint directly from a dashboard without accessing the physical thermostat?” A ruler-style control widget combines the live reading with a drag-to-set interface in a single compact widget.
What it does
A device reporting temperature = 21°C with a temperature_setpoint = 22°C attribute displays the current temperature alongside a draggable ruler. When a user drags the ruler to a new position (for example, 23°C) and confirms, the widget writes the new value back to the device as an attribute. The current temperature display updates automatically as new telemetry arrives.
- Live current temperature shows the actual measured value from the device’s telemetry
- Draggable ruler setpoint lets operators or occupants set the target temperature directly from the dashboard
- Writes back to the device as an attribute, so the HVAC controller receives the updated setpoint without any manual configuration
How to set up
Data keys
| Key | Role | Type | Description |
|---|---|---|---|
temperature | Current value | Timeseries | Measured indoor temperature in °C; change the key name to match your device’s telemetry key |
temperature_setpoint | Setpoint | Attribute (shared) | Target temperature in °C written back to the device; change the key name to match your device’s attribute key |
How to customize
- To change the setpoint key name — open the widget settings and update the attribute key to match the name your HVAC controller or thermostat device uses.
- To change the temperature range — adjust the ruler minimum and maximum values in the widget settings to match your HVAC operating range.
- To switch units to °F — change the Units field and adjust the ruler range in the widget settings.
Tips
- Place this widget next to a temperature chart card so occupants can see the recent trend before deciding whether to adjust the setpoint — this reduces unnecessary setpoint changes that cause temperature overshoots.
- For multi-zone buildings, tile one thermostat widget per zone and set consistent ruler ranges so the relative setpoints across zones are immediately comparable.
- In energy management scenarios, set the ruler range to a constrained band (for example, 19–23°C) to prevent occupants from setting extreme setpoints that conflict with the building’s energy policy.
Share Your Widget with the Community
Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.