Step 1 - Place and configure the mode
Add the Simple Slider element to your page. Set Mode to single for a standard one-value slider or range for a two-handle selector. Set Min, Max, and Step to define the value range and snap interval.

Step 2 - Set initial values

In single mode, set Initial value to control where the handle starts. In range mode, set Initial value start and Initial value end independently. These values are also what the Reset action restores to.

Step 3 - Style the slider

Use the STYLING fields to set track color, height, and border radius. Set fill color and handle color, shape, and size to match your design. If you want hover feedback on the handle, set Handle hover color to a different color - it will swap in automatically. For locked range mode, set Fill hover color to give the draggable fill its own hover state.

Step 4 - Read states in workflows

Use value in single mode or value_start / value_end in range mode to read the current selection anywhere on the page. Use is_focused to detect active dragging - for example, to delay a search query until the user releases. Use is_hovered to drive conditional styles on surrounding elements.

Step 5 - Trigger workflows on change

Use the value changed event to run logic continuously as the user drags - good for live previews. Use value dropped to run logic only after the user finishes dragging - good for database writes or expensive searches to avoid firing on every pixel of movement.

Step 6 - Add a Reset action (optional)

To reset the slider from a workflow, add the Reset element action to any button or workflow step. The slider returns to its configured initial values and republishes all states automatically.

Tips & Best Practices

· In locked range mode, individual handles are not draggable - only the filled region moves. Enable this when the gap between start and end should stay fixed, such as a fixed-duration time window selector.
· Set Disable track click if you want users to interact only by dragging the handles directly, not by clicking anywhere on the track.
· value dropped is the right event for writing to the database or running searches. Using value changed for writes will fire a request on every drag step.
· The labels above the track inherit the element's font, size, and color from the Bubble editor automatically - style them via the element's appearance settings, not as separate text elements.