Roller + Slider in the same control


I am working on a menu system for a digital audio device. The LCD is very tiny (160x80) The stakeholders want to have a roller control that optionally opens a slider control. The menu system uses tiles for the “top level” navigation. Augmented controls (e.g., roller, slider, etc.) have been written to support the special requirements of this interface.

The product uses a rotary encoder and select button for all menu navigation / selection.

I anticipate writing another controller that consists of a roller / slider to meet the requirements outlined in this topic.

My question is this: What is the best way to tackle this problem?

What MCU/Processor/Board and compiler are you using?

ESP32-S3-MINI module from Espressif. The board is a custom board.
The compiler is the ESP-IDF v5.0.4.

What LVGL version are you using?


What do you want to achieve?

The control would work like this:

  1. When the control is entered, the top level it would say “Gain”. This may be a picture instead of a text string.
  2. Press the select button and the control becomes enabled. At this point it is a roller with three options:
    “auto far”, “auto near”, “manual”. If auto far or near is selected, then the control goes back to the top level gain text/pic.
  3. If the “manual” roller-entry is selected, then the control switches to a slider. This slider is used to manually adjust the gain. Gain adjustment is made with the rotary encoder. When the select button is pressed, the control goes back to the top level.

What have you tried so far?

I don’t know LVGL very well. I slightly grasp the gestalt of library (parent / child objects, callbacks for actions).

Code to reproduce

I currently have code for two separate controllers (auto gain roller and manual gain slider). I’m trying to work out the best way to join these together into a single control.

Screenshot and/or video

None right now.