🎚️ Slider
The Slider widget allows users to select a value from a continuous range by moving a knob along a track. It is the standard input for adjusting volume, brightness, or any numerical parameter that requires a fluid, tactile feel.
⚙️ Properties (Props)
The Slider configuration is defined by the SliderWidget interface. It translates physical touch coordinates into a mapped numerical value.
| Property | Type | Description |
|---|---|---|
| Value | number | The current numerical position of the knob. |
| Range | number | The Min and Max limits (e.g., 0 to 100). |
| Knob Size | number | The diameter of the interactive handle. |
| Mode | Dropdown | Normal: Standard sliding. Symmetrical: Origin starts from the center (useful for +/- offsets). |
🛠 Interaction Mechanics
The Slider is optimized for high-precision touch input:
- Direct Manipulation: Users can grab the knob and drag it to a specific value.
- Jump-to-Point: Clicking anywhere on the track will instantly move the knob to that relative position.
- Visual Feedback: As the knob moves, the "indicator" portion of the track (the area behind the knob) changes color to show progress.
🎨 Styling the Components
In the Inspector Panel, you can style the three core parts of the slider independently:
- Main (Track): The background line that defines the full range.
- Indicator: The highlighted portion of the track representing the current value.
- Knob: The circular or rectangular handle that the user interacts with. You can add shadows or borders here to make it stand out.
⚡ Runtime API (Lua)
Sliders are ideal for real-time hardware control via the Logic and Events system.
-- Get the current slider value
local volume = slider_audio:get_value()
-- Update a label to show the slider value in real-time
function on_slider_move(val)
lbl_vol_percent:set_text(val .. "%")
end
-- Programmatically set the slider position
slider_brightness:set_value(75)
-- Adjust the range dynamically
slider_temp:set_range(18, 30)
If you are designing for a small screen or an industrial environment where users might wear gloves, increase the Knob Size to at least 30px to ensure it is easy to grab without precise finger placement.
🚀 Next Steps
- Arc — Use for circular sliders (rotary knobs).
- Bar — A non-interactive version of the slider used for progress display.
- Logic and Events — Learn how to send slider data over MQTT or Serial.