# Slider (/examples/widgets/slider)



Slider drives another widget's state [#slider-drives-another-widgets-state]

<LvglExampleBrief>
  Bind a button's 

  `disabled`

   state to a subject driven by a slider's value.
</LvglExampleBrief>

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.

<LvglExample name="lv_example_slider_bind_state" path="widgets/slider/lv_example_slider_bind_state" />

Slider bind value [#slider-bind-value]

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

`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.

<LvglExample name="lv_example_slider_bind_value" path="widgets/slider/lv_example_slider_bind_value" />

Slider value-changed and released events [#slider-value-changed-and-released-events]

<LvglExampleBrief>
  Show drag updates and the final value via a sibling label.
</LvglExampleBrief>

`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.

<LvglExample name="lv_example_slider_event" path="widgets/slider/lv_example_slider_event" />

Slider image indicator [#slider-image-indicator]

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

`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.

<LvglExample name="lv_example_slider_img_indicator" path="widgets/slider/lv_example_slider_img_indicator" />

Slider modes [#slider-modes]

<LvglExampleBrief>
  Compare normal, symmetrical, and range modes.
</LvglExampleBrief>

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.

<LvglExample name="lv_example_slider_modes" path="widgets/slider/lv_example_slider_modes" />

Slider reversed direction [#slider-reversed-direction]

<LvglExampleBrief>
  Flip the fill direction by swapping min and max.
</LvglExampleBrief>

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.

<LvglExample name="lv_example_slider_reversed_direction" path="widgets/slider/lv_example_slider_reversed_direction" />

Slider styling [#slider-styling]

<LvglExampleBrief>
  Style MAIN, INDICATOR, and KNOB — including a pressed-state knob highlight.
</LvglExampleBrief>

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.

<LvglExample name="lv_example_slider_styling" path="widgets/slider/lv_example_slider_styling" />

Slider value, range, and orientation [#slider-value-range-and-orientation]

<LvglExampleBrief>
  Set a custom numeric range and choose horizontal or vertical layout.
</LvglExampleBrief>

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.

<LvglExample name="lv_example_slider_value_range_orientation" path="widgets/slider/lv_example_slider_value_range_orientation" />