Light control
Controls one light: a Material switch, a brightness slider and a colour picker, any of which can be hidden. Reads the light’s level, state and colour from its attributes and writes changes back to those same attributes, or sends them as one-way RPC commands. Dragging the slider sends one command, not one per step. Range, units, colour format, presets and the accent colour are settings. Point one card at each light.
Light control
Controls one light from one card: a switch, a brightness slider and a colour picker. It reads the light’s current state, level and colour from that device’s attributes and writes changes back to the same attributes, or sends them as one-way RPC commands.
Features
- Switch, slider and colour, each of which can be hidden — a card can be a plain dimmer, a plain switch, or all three
- Writes either one-way RPC commands or device attributes
- Three payload shapes for RPC: a named object, the bare value, or whatever your own function returns
- One command per gesture: dragging the slider across thirty levels sends one command, not thirty
- Optional queueing for an offline device, with retries
- Reads the light back when the card loads, with optional polling
- Slider locked while the light is off, so a level cannot be set on a dark lamp
- Accent colour follows the ThingsBoard theme unless you override it
Target device
This is a control widget: it takes no data keys. Choose a Target device in the widget configuration. Everything the widget reads and writes goes to that one device, so add one card per light.
Attributes
The widget reads these on load and writes to the very same keys — one attribute per thing, in one scope, in both directions. Names and scope are configurable; the table shows the defaults.
| Attribute | Type | Written when | Read as |
|---|---|---|---|
brightness | number | the slider settles | a number between the lowest and highest level |
state | boolean | the switch is used | true / false, 1 / 0, or the strings "true", "on", "1" |
color | string or object | a colour is picked | #RRGGBB, #RGB, "r,g,b", "rgb(r,g,b)" or {"r":255,"g":87,"b":34} |
Attribute scope offers Shared — the scope a device subscribes to — and Server, which keeps the value on the platform for a rule chain to act on. Client scope is deliberately not offered: only the device itself can write there, so a widget that wrote to it would always fail.
color is written in whichever shape How the colour is sent selects: "#FF5722",
{"r":255,"g":87,"b":34} or "255,87,34". All four read formats are accepted regardless.
RPC methods
Used when What a change does is set to Send a one-way RPC command, which is the default. Method names are configurable; the table shows the defaults.
| Method | Type | Parameters | Sent when |
|---|---|---|---|
setBrightness | one-way | the level | the slider settles |
setState | one-way | true / false | the switch is used |
setColor | one-way | the colour | a colour is picked |
What the device receives shapes the parameters of all three:
| Option | Sent |
|---|---|
| An object | {"value": 60} — the parameter name is configurable |
| The number alone | 60, for firmware that expects a scalar |
| A function of yours | whatever it returns |
The function receives one argument, value — the level as a number, the switch as a boolean, the
colour as a string or object. Its type tells you which command is being built:
if (typeof value === 'boolean') { return { on: value }; }if (typeof value === 'string') { return { rgb: value }; }return { level: value, fade: 500 };If the function returns nothing or throws, the change counts as failed: nothing is sent, and the device name turns red until a later change succeeds. A function that will not compile is caught when the card loads rather than on first use.
A one-way command that nobody answers is not an error, so a device with no matching RPC handler will appear to accept changes and do nothing. If your lights work through shared attributes, switch What a change does over.
Reading the light back
Once, when the card loads. Set Re-read the device every to a few seconds if a scene, a rule chain
or a wall switch can move the same light; it is 0 by default, because polling a lamp that nothing
else touches wastes both ends. Polling pauses while the slider is being dragged so it cannot fight the
person using it.
Configuration
Every explanation sits behind the question mark beside its field. Fields that cannot apply are hidden: choose Write an attribute and the RPC method names, payload shape, timeout, queueing and retries all disappear; choose RPC and the attribute scope goes instead.
Command
| Setting | Default | What it does |
|---|---|---|
| What a change does | Send a one-way RPC command | RPC command, or attribute write |
| RPC method that sets the level | setBrightness | Handler the device implements |
| RPC method that switches the light | setState | Receives true or false |
| RPC method that sets the colour | setColor | Receives the colour in the chosen shape |
| What the device receives | An object | Payload shape for all three commands |
| Parameter name | value | Field the value is sent under |
| Payload function(value) | return { value: value }; | Used only for the custom payload shape |
| Request timeout (ms) | 5000 | 100 ms to two minutes |
| Queue the command for an offline device | off | The platform holds the command until the device connects |
| Retries | 0 | Up to ten; only sent for a queued command |
| Wait before sending (ms) | 350 | Delay after the last movement. 0 sends every step |
| Read only | off | Shows the light’s state but refuses all input |
Attributes
| Setting | Default | What it does |
|---|---|---|
| Attribute for the level | brightness | Read and written |
| Attribute for the on / off state | state | Read and written as a boolean |
| Attribute for the colour | color | Read and written |
| Attribute scope | Shared | Shared or Server, for both directions |
| Re-read the device every (s) | 0 | 0 reads once on load |
Values
| Setting | Default | What it does |
|---|---|---|
| Show the on / off switch | on | Hide it for a dimmer with no power control |
| Show the level slider | on | Hide it for a switch-and-colour card |
| Lowest level | 0 | Start of the slider |
| Highest level | 100 | End of the slider |
| Step between levels | 1 | Also how far one arrow key moves |
| Show the value in a bubble while dragging | off | Material floats the level above the handle; it needs room beside the slider, and on a small card it is drawn outside the widget |
| Lock the slider while the light is off | on | Ignored when the switch is hidden, since nothing on the card could turn the light back on |
Colour
| Setting | Default | What it does |
|---|---|---|
| Show the colour row | on | Hide it for a light that has no colour |
| Where the colour control sits | In the top row | Beside the switch, or on its own line under the slider |
| Allow any colour | on | Shows the ThingsBoard colour picker. Off offers only the presets |
| Preset colours | eight hues | Comma-separated; hex, #RGB, "r,g,b" and rgb(r,g,b) all accepted |
| How the colour is sent | Hex string | Hex, an {r,g,b} object, or "r,g,b" |
| Colour before the device reports one | #FF5722 | Shown until the first read answers |
Appearance
| Setting | Default | What it does |
|---|---|---|
| Name shown on the card | empty | Empty uses the device’s label, then its name |
| Accent — switch and slider | empty | Empty follows the ThingsBoard theme’s primary colour |
| Device name | #212121 | Colour of the name |
| Device name font | 15px Roboto 400 | Size, family, weight, style and line height |
| Device name after a failed change | #C62828 | Stays until a change succeeds |
The card draws no title of its own — only the device name. The widget’s own Appearance tab still controls the title, background, padding and drop shadow; the title and the shadow ship off.
What the card shows while a change is in flight
The switch, slider and swatch move to the value you chose as soon as the gesture settles, not once the device confirms — so the card can be ahead of the light for as long as the request takes. A failed change is reported and turns the device name red rather than being dropped silently.
If the device has never reported its on/off state, the switch starts on and the slider stays usable. Treating an unknown state as off would lock a card that may be perfectly healthy, which reads as a broken widget.
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.