slider

Overview

The slider node adds interactive range sliders to your dashboard. Perfect for adjusting values like brightness, temperature setpoints, speed, or any numeric value within a defined range.

Properties

Slider Preview

Example: LED Brightness Control

Control PWM duty cycle for LED brightness.

// Slider node configuration:
{
  "label": "LED Brightness",
  "min": 0,
  "max": 100,
  "step": 5,
  "topic": "led/brightness"
}

// Function node: Convert to PWM (0-255)
msg.payload = Math.round(msg.payload * 2.55);
return msg;

// Connect to PWM node for hardware control

Example: Thermostat Setpoint

Set target temperature with 0.5°C precision.

// Slider node configuration:
{
  "label": "Target Temperature",
  "min": 15,
  "max": 30,
  "step": 0.5,
  "topic": "thermostat/setpoint"
}

// Output: 22.5 (when slider moved to 22.5°C)

// Use with change node to add units:
msg.payload = {
  value: msg.payload,
  unit: "°C"
};

Output Modes

{ "continuous": false }

// User drags 0 → 50 → 75
// Output: 75 (only final value)

{ "continuous": true }

// User drags 0 → 50 → 75
// Output: 0, 25, 50, 75 (multiple)

Dynamic Updates

// Update slider position from external source
msg.payload = 75;
// Slider moves to 75

// Dynamically change range
msg.ui_control = {
  "min": 10,
  "max": 50
};

// Disable slider
msg.ui_control = { "disabled": true };

// Change step
msg.ui_control = { "step": 10 };