Horizontal Slider

A horizontal continuous-value control. Drag the thumb to set a value; your sketch gets it live during the drag, or once on release — your choice.

[image] Horizontal Slider on canvas at 50%, green active track, value displayed below

What it does

Horizontal Slider reports a number in a range you define (default 0–100). It can be continuous or stepped. Your sketch reacts on every change during the drag (WHEN_CHANGING(v)) or only when the user releases (WHEN_CHANGED(v)).

When to use it

• LED dimmer — Range 0–100, label Brightness. Use WHEN_CHANGING(v) to update a PWM pin live.
• Motor speed setpoint — Use WHEN_CHANGED(v) only — applies the new setpoint when the user lets go, no jitter.

Properties

The Inspector opens as a bottom sheet with a Widget ID field at the top, then these sections in order.

Widget ID

1. Essential

2. Header

3. Value

4. Format

5. Appearance

6. Colors · Default

7. Colors · Dragging

States and behavior

[image] Slider at rest (thumb 50%) and during drag (thumb highlighted, dragging colors)

Two visual states: Idle and Dragging. The Dragging color set is independent so you can visually emphasize the live interaction (e.g. brighten the track while held).

When Steps is 0, the value updates continuously. With Steps set to N, the thumb snaps to N+1 evenly-spaced stops between Min and Max.

In code

The slider mirrors the user’s drag on the dashboard. To react to it in your sketch:

IHorizontalSlider("brightness") {
  WHEN_CHANGING(v) {
    analogWrite(LED_PIN, map(v, 0, 100, 0, 255));
  }
};

That’s the minimum — one event block, the value v arrives live during the drag. Use WHEN_CHANGED(v) if you want only the final value on release. See InstantIoT Library / Receive Command from App for details.

Working Arduino code example

A complete sketch you can flash. The Widget ID brightness matches the one you set on your Horizontal Slider in the app.

[gif] Horizontal Slider on the dashboard dimming a LED on the ESP32 — drag updates the brightness in real time

Direct Mode

Your phone connects directly to the ESP32’s SoftAP — no router, no server. Best for prototyping and standalone setups.

#include <InstantIoTWiFiAP.hpp>

const char* AP_SSID = "InstantIoT-Greenhouse";
const char* AP_PASS = "12345678";

#define LED_PIN 2

InstantIoTWiFiAP instant(AP_SSID, AP_PASS);

IHorizontalSlider("brightness") {
  WHEN_CHANGING(v) {
    analogWrite(LED_PIN, map(v, 0, 100, 0, 255));
  }
};

void setup() {
  pinMode(LED_PIN, OUTPUT);
  instant.begin();
}

void loop() {
  instant.loop();
}

Server Mode

The ESP32 connects to your self-hosted InstantIoT Server over WiFi. Multiple devices, persistent state, history.

#include <InstantIoTWiFiServer.hpp>

const char*    WIFI_SSID     = "YOUR_WIFI_SSID";
const char*    WIFI_PASS     = "YOUR_WIFI_PASSWORD";
const char*    SERVER_IP     = "192.168.1.42";
const uint16_t SERVER_PORT   = 9001;
const char*    DEVICE_TOKEN  = "YOUR_DEVICE_TOKEN";

#define LED_PIN 2

InstantIoTWiFiServer instant(SERVER_IP, SERVER_PORT, DEVICE_TOKEN);

IHorizontalSlider("brightness") {
  WHEN_CHANGING(v) {
    analogWrite(LED_PIN, map(v, 0, 100, 0, 255));
  }
};

void setup() {
  pinMode(LED_PIN, OUTPUT);
  instant.begin(WIFI_SSID, WIFI_PASS);
}

void loop() {
  instant.loop();
}

The widget code is identical — only the include and constructor change.

Notes

• For high-frequency sketches (audio, fast PWM), prefer WHEN_CHANGED(v) — the live drag stream can saturate your link if you process every event.
• Value is always a float in the macro, even when displayed with 0 decimals.

Next

→ Vertical Slider — Same control, oriented vertically.

→ Joystick — When you need two axes at once.

→ Segmented Switch — When you only want a few discrete options.