Slider

Slider drives another widget's state

Bind a button's disabled state to a subject driven by a slider's value.

The slider edits subject_value (0..100). The "Submit" button uses bind_state_if_gt to apply disabled whenever subject_value > 80 — modelling a guard like "block submit when the value is out of range". Slide past 80 to watch the button grey out.

Slider bind value

Two-way bind a slider to a shared int subject; a label mirrors the live value.

subject_value lives in examples/xml_project/globals.xml (range 0..100, default 50). The slider's bind_value reads and writes the subject: dragging it pushes the new value out so anything else bound to subject_value (here, the label) updates immediately. bind_text-fmt lets a label render a numeric subject through a printf-style format.

Slider value-changed and released events

Show drag updates and the final value via a sibling label.

LV_EVENT_VALUE_CHANGED fires continuously while the knob is being dragged or stepped with keys. LV_EVENT_RELEASED fires once on release — useful for committing a final value without spamming intermediate positions. The shared handler reads lv_event_get_code to branch and writes the value into a sibling label.

Slider image indicator

Use bitmaps as the slider track and indicator — the slider clips each image to its part.

bg_image_src on selector="main" textures the background track and on selector="indicator" textures the filled portion. As the knob moves right the indicator image is revealed left-to-right, showing cyan segments that transition to yellow then red at the high end. Both images are 280×30, matching the slider width.

Slider modes

Compare normal, symmetrical, and range modes.

Normal fills from min_value to value. Symmetrical needs a range that crosses zero and fills outward from the middle, so positive and negative values pull the indicator in opposite directions. Range mode draws a band between left_value and value, useful for picking an interval rather than a single number.

Slider reversed direction

Flip the fill direction by swapping min and max.

The two sliders are identical except that the second one declares min_value greater than max_value. Swapping the two reverses the fill direction and the sign of motion without touching orientation, styling, or layout.

Slider styling

Style MAIN, INDICATOR, and KNOB — including a pressed-state knob highlight.

Slider has three parts: MAIN (track), INDICATOR (filled portion), and KNOB. The example targets each with a named style. The knob also gets a second style with selector="pressed|knob" so it picks up an outline halo and a brighter fill only while being dragged, demonstrating combined part+state selectors.

Slider value, range, and orientation

Set a custom numeric range and choose horizontal or vertical layout.

The horizontal slider uses min_value=-20 and max_value=80 to show that ranges need not start at zero. The vertical slider sets orientation="vertical" explicitly and uses a tall, narrow size so the knob travels upward instead of left-to-right.