node-red-contrib-interactive-inject 1.0.3

A Node-RED node with an interactive slider or preset buttons rendered directly on the canvas for one-click value injection — no dashboard required

npm install node-red-contrib-interactive-inject

node-red-contrib-interactive-inject

A Node-RED node that renders an interactive widget directly on the editor canvas — no dashboard required. Choose between a numeric slider or a set of preset buttons; either way, clicking or dragging injects a value straight into your flow.

Features

• Two modes selectable per node: Slider and Preset buttons
• Slider mode — inline <input type="range"> embedded in the node body; drag the thumb or click the number and type directly; press Enter to commit or Escape to cancel
• Preset buttons mode — configurable buttons rendered on the canvas; each button has a label and an arbitrary typed value (string, number, boolean, JSON, …)
• Inject on release (slider mode) — automatically sends msg.payload when the thumb is released (can be disabled)
• Left-side inject button for manual triggering, like the built-in Inject node
• Last value/selection persisted to flows.json — survives deploy and restart
• Configurable label and topic for both modes
• Works with Node-RED 3.x and above; no dependency on node-red-dashboard

Installation

Install from your Node-RED user directory (typically ~/.node-red):

npm install node-red-contrib-interactive-inject

Or via the Node-RED palette manager: search for interactive-inject.

Usage

1. Drag the interactive inject node from the common category onto the canvas.
2. Open the edit panel and choose a Mode: Slider or Preset buttons.

Slider mode

• Drag the slider thumb to your desired value, or click the number display and type a value directly.
• The value is injected automatically when you release the thumb or press Enter (if Inject on release is enabled, which is the default).
• Click the button on the left side of the node to inject the current value manually at any time.

Preset buttons mode

• Add one or more presets in the edit panel — give each a label and a value (any supported type).
• The buttons appear directly on the canvas; click one to inject its value immediately.
• The last clicked preset is highlighted and re-injected when the left-side button is pressed.

Output

Configuration

Common

Slider mode

Preset buttons mode

Using the label in a JSONata preset value

When the value type is set to J: expression (JSONata), the button's label is available as the variable label. This lets you encode a parameter directly in the button name and reference it in the expression without duplication.

Example — button label 2000, value type JSONata:

{ "offset": $number(label) }

Produces msg.payload = { "offset": 2000 } and msg.label = "2000".

A more complete example — label now +2m: 5k, value type JSONata:

{
  "lowerLimit": -5000,
  "upperLimit": 5000,
  "duration": 900000,
  "executionTime": $millis() + 2 * 60 * 1000
}

Here the execution time is computed at the moment the button is pressed, so it always reflects the actual current time plus the offset.

Wrapping the value in a JSON object

To output { "/Temperature": 25 } instead of a plain number, add a Change node after this one:

• Action: Set
• Target: msg.payload
• Type: J: expression
• Value: {"/Temperature": payload}

The JSONata expression reads the incoming numeric msg.payload and builds the object. A ready-made example of this pattern is included — see Import → Examples → node-red-contrib-interactive-inject → basic-usage in the Node-RED editor.

Additional examples are available under the same import path:

Development

# Install dependencies
npm install

# Compile TypeScript and copy HTML to dist/
npm run build

# Watch mode
npm run watch

# Run tests
npm test

The runtime node is in src/interactive-inject.ts; the editor template and canvas rendering are in src/interactive-inject.html.

License

MIT © Dirk-Jan Faber