How do i set the opacity of a panel with a slider?

What do you want to achieve?

I have a toggle switch for an LED but also a slider to set the brightness. I have 2 panels - one for “Off” and one for “On”. As the slider moves up I want the “On” Panel to become more visable and when moved down, less so.

What have you tried so far?

I tried creating an event with “Set Opacity” and I could select my “On” Indicator Panel as the target, but can only set it to a fixed value, not the current value of the slider.

Screenshot or video


  • SquareLine Studio version:
  • Operating system:
  • Target hardware:

Create event call function and here call set opa + lvgl need for this opa widgets set define to 1 in conf.h

void changeopaPA(lv_event_t * e)
	// Your code here
lv_obj_set_style_bg_opa(ui_Panelyour, lv_slider_get_value(e->target), LV_PART_MAIN| LV_STATE_DEFAULT);

1 Like

Thanks Marian. I understand now!

This worked:

void ui_event_Slider2( lv_event_t * e) {
lv_event_code_t event_code = lv_event_get_code(e);lv_obj_t * target = lv_event_get_target(e);
if ( event_code == LV_EVENT_VALUE_CHANGED) {
setLed1Brightness( e );
lv_obj_set_style_bg_opa(ui_LedIndicatorOn, lv_slider_get_value(e->target), LV_PART_MAIN| LV_STATE_DEFAULT);

Hello @Marian_M

is there a way to control opacity in SLS ? I want to change opacity of logo image in background of my UI

Why not?
In conf enable #define LV_COLOR_SCREEN_TRANSP 1

i know it’s possible in code by LVGL, but i’m talking in Squareline Studio if it’s possible

1 Like

it would be great to be able to set the opacity based on the value of a slider or similar so instead of “100” above be able to choose a “source” of the value like Slider2. That would be a great feature!

Thank you Marian