Slider
A slider is a commonly used user interface element for selecting a value within a given range. Users can adjust the value by sliding the slider. If you want to learn more about sliders, you can refer to this link:
For more detailed information, you can refer to this link: https://docs.lvgl.io/8.3/widgets/core/slider.html
Properties
A slider has several properties to define its behavior and appearance.
- Slider range: Defines the maximum and minimum values of the slider.
- Left value: In range slider mode, the left value represents the starting value of the slider range.
- Slider value: Represents the currently selected value of the slider.
- Mode: Normal slider mode represents a single slider; symmetrical slider mode represents a range selector consisting of two sliders.
| Slider Properties | ||
|---|---|---|
| Slider range | Max, Min | lv_slider_set_range |
| Left value (applicable in range slider mode) | Left | lv_slider_set_left_value |
| Slider value | value | lv_slider_set_value |
| Mode | Normal slider | LV_SLIDER_MODE_NORMAL |
| Mode | Symmetrical slider | LV_SLIDER_MODE_SYMMETRICAL |
Styles
The appearance of the slider can be defined using styles. Here are some common slider styles:
- MAIN: The main part, including the bottom track of the slider.
- INDICATOR: The upper track indicating the current value of the slider.
- KNOB: The draggable button that users can drag to adjust the slider value.
Example

8MS