Slider
Picker group: Basic Elements · Project type: slider · Reference version: 27.0.29
Use Slider (slider) for volume, brightness, or another continuous numeric value. Add Slider, name it, and choose Simple, Range, or Fat. A Range slider has two handles; the other variants control one value.
Set minValue, maxValue, and step to match the receiving system. Configure horizontal/vertical orientation, reverse direction, track and thumb appearance, and optional labels/tooltips. Direct values set the initial handle positions when you are testing without feedback.
Configure the action to use the changed value when appropriate, and bind incoming feedback. A Range slider needs both values and their corresponding targets. Test minimum, maximum, intermediate positions, and updates arriving from the device.
Configure in the VS Code sidebar
Select the Slider on the visual canvas, then open Element Properties. The screenshot shows the selected control in the development environment; click it to open the full-resolution image. Expand the groups below; scroll the sidebar to reach settings below the visible area.
| Sidebar control | What it does |
|---|---|
| Variant | Choose Simple, Range, or Fat. Range has two handles; Simple and Fat use one. |
| Variant → Vertical / Reverse Direction | Change the axis or reverse its value direction. |
| Variant → Track Size / Thumb Width / Thumb Height | Adjust track thickness and the draggable handle dimensions. |
| Content → Min Value / Max Value / Step | Set the numeric limits and increment to match the receiving system. |
| Content → Direct Value 1 | Set a local starting value. The Range variant also requires the second value. |
| Content → Labels / Tooltips | Configure surrounding labels and value hints; these are separate from the element name. |
| Appearance / Actions | Style the track and handle, then configure outgoing values and incoming feedback. |
The shared Element name, datasource, sizing, CSS, and mode controls are explained in the sidebar reference. Settings depend on the selected type and variant.
Settings explained
Select the control and open Element Properties. Expand the relevant sections for its variant, appearance, content, and actions. The property keys below identify the saved project settings; the visible groups vary by control and variant.
| Setting | Project property | What to configure |
|---|---|---|
| Variant | variant | Simple and Fat use one value. Range exposes two handles and two values. |
| Limits and increment | minValue, maxValue, step | Match the device range and meaningful increment. |
| Local positions | directValue1, directValue2 | Initial direct values; the second is used for Range. |
| Orientation | isVertical, reverse | Vertical presentation and reversed value direction. |
| Track | trackSize, trackBackground, trackBorder | Track thickness, background, and border. |
| Progress | progressStartColor, progressEndColor | Colors for the filled part of the track. |
| Thumb | thumbWidth, thumbHeight, thumbBackground, thumbBorder | Handle dimensions and appearance. |
| Labels | labelTopText, labelRightText, labelBottomText, labelLeftText | Labels around the slider. |
| Tooltips | valueTooltipVisibility, text and placement fields | Show always, only while active, or hide. Range has separate fields for its second handle. |
Worked setup
- Insert Slider and name it
RoomVolume. - Choose Simple, set minimum 0, maximum 100, and step 1. Use a direct first value of 35 for the local example.
- Set a wide horizontal touch area. Check thumb size and track contrast on the target panel.
- Add a value-change action and select the receiving signal, variable, or connector. Configure it to use the changed value when appropriate.
- Bind incoming level feedback and confirm external changes move the handle.
For a Range slider, use direct values 35 and 75 for the example and configure both outgoing targets. The second range target uses the corresponding second-signal/variable/topic field in the action. A two-handle appearance alone does not create the second binding.
Incoming values and context in 27.0.29
Bind directValue1 / directValue2 to the incoming numeric thumb positions; the range variant uses the second value using literals or dynamic tokens. Interaction updates the control immediately, then re-syncs to the stable bound value about three seconds after interaction settles. Configure the outgoing action and incoming acknowledgement separately; an unbound local change can return to its stable fallback.
In Web/MQTT/WebSocket JSON bodies, insert @context:value@ from Context to send the current change value; Slider range bodies may also use @context:value2@. Numeric/boolean markers can stand as bare JSON values. See JSON bodies and context tokens.
Verify the result
Test minimum, maximum, increments, reverse direction, and incoming feedback. For Range, test both handles independently and verify both receiving values.
Save the project, run Run Project Health Check, and test in Open Live Preview (Browser). Hardware-backed behavior also needs verification in the target runtime with the actual integration available.