Documentation / Widgets / Controller / Slider

Slider

A horizontal or vertical slider - make it taller than wide and LVGL turns it vertical. Fires Value changed as it moves. Bindable both ways.

Group: Controller · Default size: 180 × 12 · Style parts: Main, Indicator, Knob

A dropped Slider: a blue bar filled to half with a round knob in the middle.
A Slider as it is dropped.
The Slider settings section: Min 0, Max 100, Mode Normal, Value 50.
Its settings.
SettingDefaultWhat it does
Min / Max0 / 100The range.
ModeNormalNormal fills from the start to the value. Symmetrical fills from zero, in whichever direction the value lies - give it a range such as -50 to 50. Range has two knobs and fills between them. The canvas and the preview draw all three, and in preview a range slider moves whichever knob you press nearer to.
Value50The initial value - the right-hand (or upper) knob in Range mode.
Value left0The lower knob in Range mode. It cannot pass the value; LVGL clamps it and so does the designer.

Example: a volume control with its value above it

  1. On the Data tab, in Variables, press +. Name it volume, set Type to Integer, Initial value to 50, Min to 0 and Max to 100.
  2. Drag a Slider onto the screen and set its Name to Volume, with X 40, Y 130, Width 240 and Height 14. Open Data bindings, press Add binding, and set Variable to volume, Drives to Value and Direction to Both ways.
  3. Drag a Label above it (X 40, Y 88, Width 240, its text centred). Give it a binding too: Variable volume, Drives Text, Prefix Volume: and Postfix %.
  4. Press Preview and drag the knob: the label follows it.
Preview: the slider dragged to about three quarters, and above it the words Volume: 78%.
Dragged in Preview: the label follows.
The slider's Data bindings section: From a variable, Variable volume, Drives Value, Direction Both ways.
Both ways: the slider sets the variable and follows it.
The Data tab's Variables section with the variable volume: Type Integer, Source (set by events only), Initial value 50, Min 0, Max 100.
The variable on the Data tab.