Vertical Slider

The vertical version of Horizontal Slider. Same behavior, different orientation — better for mixers, faders, throttle controls.

[image] Vertical Slider on canvas at 50%, green active track filling the bottom half

What it does

Identical event model and feature set to Horizontal Slider — a continuous (or stepped) number in a range you define, reported live during the drag or once on release. The thumb travels from bottom (Minimum) to top (Maximum). The Inspector replaces Track height with Track width to match the orientation.

When to use it

• Audio fader — Range 0–100, label Volume. Channel-strip layout looks right with vertical sliders.
• Throttle — Snaps to 0 if you set initial value to 0, increments upward as the user drags.

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] Vertical Slider at rest and during drag

Two visual states — Idle and Dragging — same as Horizontal Slider. The active track fills from the bottom to the thumb’s position.

In code

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

IVerticalSlider("throttle") {
  WHEN_CHANGED(v) {
    setMotorSpeed(v);
  }
};

That’s the minimum — one event block, WHEN_CHANGED(v) fires once when the user releases. Use WHEN_CHANGING(v) if you want live updates during the drag. See InstantIoT Library / Receive Command from App for details.

Working Arduino code example

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

[gif] Vertical Slider on the dashboard controlling a motor speed setpoint on the ESP32

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 MOTOR_PIN 4

InstantIoTWiFiAP instant(AP_SSID, AP_PASS);

void setMotorSpeed(float v) {
  analogWrite(MOTOR_PIN, map((int)v, 0, 100, 0, 255));
}

IVerticalSlider("throttle") {
  WHEN_CHANGED(v) {
    setMotorSpeed(v);
  }
};

void setup() {
  pinMode(MOTOR_PIN, OUTPUT);
  analogWrite(MOTOR_PIN, 0);
  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 MOTOR_PIN 4

InstantIoTWiFiServer instant(SERVER_IP, SERVER_PORT, DEVICE_TOKEN);

void setMotorSpeed(float v) {
  analogWrite(MOTOR_PIN, map((int)v, 0, 100, 0, 255));
}

IVerticalSlider("throttle") {
  WHEN_CHANGED(v) {
    setMotorSpeed(v);
  }
};

void setup() {
  pinMode(MOTOR_PIN, OUTPUT);
  analogWrite(MOTOR_PIN, 0);
  instant.begin(WIFI_SSID, WIFI_PASS);
}

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

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

Notes

• Use WHEN_CHANGED(v) for a « set and forget » pattern — apply the value when the user releases, not on every intermediate position.

Next

→ Horizontal Slider — Same control, oriented horizontally.

→ Joystick — Two axes in a single widget.

→ Bar Chart — To display N values your device pushes back.