Slider

A numeric range input. Stores a .number value.

Type

"slider"

Relevant Fields

Inherits all Control Definition. Key fields:

Field Type Default Description
min number 0 Minimum value
max number 100 Maximum value
step number 1 Step increment
label string — Header label
tint string "#667eea" Track fill color
style string "default" "default", "scrubber", or "radial"
formatValue string "decimal" Value display format
minIcon string — SF Symbol at minimum end
maxIcon string — SF Symbol at maximum end
hideLabel bool false Hide the header with label and value
hideBackground bool false Remove glass background
arcAngle number 270 Arc sweep in degrees (radial style only)
arcRotation number 0 Arc start rotation (radial style only)
arcThickness number 6 Track stroke width (radial style only)

Styles

"default"

System Slider with optional min/max icons.

"scrubber"

Custom thin progress bar with draggable dot. Used for seek bars, compact volume controls.

"radial"

Circular arc slider. The user drags around an arc to set the value. Configure the arc geometry with arcAngle, arcRotation, and arcThickness.

Format Values

Value Output Example
"decimal" "72" or "3.5" Respects step for decimal places
"time" "3:45" Minutes:seconds from total seconds
"percent" "80%" Integer percentage
"none" (hidden) No value display

Examples

Basic brightness slider

{
  "type": "slider",
  "id": "lr-brightness",
  "position": [1, 0],
  "span": [1, 3],
  "min": 0,
  "max": 100,
  "step": 1,
  "defaultValue": 80,
  "label": "Brightness",
  "action": { "method": "meshsocket", "mode": "broadcast", "event": "route_msg", "payload": { "target_id": "hue-bridge", "type": "brightness", "payload": { "room": "living", "level": "{{value}}" } } }
}

Volume slider with icons

{
  "type": "slider",
  "id": "volume",
  "position": [0, 0],
  "span": [1, 4],
  "min": 0,
  "max": 1,
  "step": 0.01,
  "defaultValue": 0.5,
  "hideLabel": true,
  "minIcon": "speaker.fill",
  "maxIcon": "speaker.wave.3.fill",
  "formatValue": "percent",
  "tint": "#667eea"
}

Seek scrubber with sync

{
  "type": "slider",
  "id": "seek-slider",
  "position": [0, 0],
  "span": [1, 4],
  "min": 0,
  "max": 300,
  "step": 1,
  "defaultValue": 0,
  "label": "Position",
  "style": "scrubber",
  "tint": "#FF2D55",
  "formatValue": "time",
  "hideBackground": true,
  "action": { "method": "meshsocket", "mode": "send", "event": "route_msg_noreply", "payload": { "target_name": "player", "type": "command", "payload": { "command": "seek", "position": "{{value}}" } } },
  "sync": [{ "method": "meshsocket", "type": "listen", "event": "broadcast", "filter": { "msg_type": "player_state" }, "valuePath": "elapsed" }]
}

Behavior

  • Action fires on drag end (default style) or continuously while dragging (scrubber style)
  • Network-synced value updates animate smoothly unless the user is actively dragging
  • No default haptic (system provides its own slider feedback)