Bar/Slider not display as expected

Description

I want to hv a bar/slide with a customized gradient indicator (img.png)
I set the bg image for indicator to the img.png expecting the image replace the original bar/slide
Play mode in squareline studio works fine but the bar seem weird and not move as I expected when downloaded to my board
Is there any setting I hv missed?

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

Renesas RA8 series R7FA8D1AHECBD

What LVGL version are you using?

v9.1.0
Squareline studio v1.5.1

What do you want to achieve?

A gradient bar (custom image) as the body of the bar/slider

What have you tried so far?

Add the image as indicator in squareline studio

Code to reproduce

ui_BarSetPoint = lv_bar_create(ui_ScnSetPointAndMode);
    lv_bar_set_value(ui_BarSetPoint, 50, LV_ANIM_OFF);
    lv_bar_set_start_value(ui_BarSetPoint, 0, LV_ANIM_OFF);
    lv_obj_set_width(ui_BarSetPoint, 300);
    lv_obj_set_height(ui_BarSetPoint, 4);
    lv_obj_set_x(ui_BarSetPoint, 0);
    lv_obj_set_y(ui_BarSetPoint, 123);
    lv_obj_set_align(ui_BarSetPoint, LV_ALIGN_TOP_MID);
    lv_obj_add_flag(ui_BarSetPoint, LV_OBJ_FLAG_CLICKABLE);     /// Flags
    lv_obj_set_style_radius(ui_BarSetPoint, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(ui_BarSetPoint, lv_color_hex(0x737373), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_BarSetPoint, 255, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_image_opa(ui_BarSetPoint, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_set_style_radius(ui_BarSetPoint, 0, LV_PART_INDICATOR | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(ui_BarSetPoint, lv_color_hex(0x7A3DE9), LV_PART_INDICATOR | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_BarSetPoint, 255, LV_PART_INDICATOR | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_image_src(ui_BarSetPoint, &ui_img_prg_bar_png, LV_PART_INDICATOR | LV_STATE_DEFAULT);

    //Compensating for LVGL9.1 draw crash with bar/slider max value when top-padding is nonzero and right-padding is 0
    if(lv_obj_get_style_pad_top(ui_BarSetPoint, LV_PART_MAIN) > 0) lv_obj_set_style_pad_right(ui_BarSetPoint,
                                                                                                  lv_obj_get_style_pad_right(ui_BarSetPoint, LV_PART_MAIN) + 1, LV_PART_MAIN);
    ui_Slider1 = lv_slider_create(ui_ScnSetPointAndMode);
    lv_slider_set_value(ui_Slider1, 50, LV_ANIM_OFF);
    if(lv_slider_get_mode(ui_Slider1) == LV_SLIDER_MODE_RANGE) lv_slider_set_left_value(ui_Slider1, 0, LV_ANIM_OFF);
    lv_obj_set_width(ui_Slider1, 300);
    lv_obj_set_height(ui_Slider1, 4);
    lv_obj_set_x(ui_Slider1, 0);
    lv_obj_set_y(ui_Slider1, 116);
    lv_obj_set_align(ui_Slider1, LV_ALIGN_TOP_MID);
    lv_obj_set_style_radius(ui_Slider1, 0, LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_color(ui_Slider1, lv_color_hex(0x737373), LV_PART_MAIN | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_opa(ui_Slider1, 255, LV_PART_MAIN | LV_STATE_DEFAULT);

    lv_obj_set_style_radius(ui_Slider1, 0, LV_PART_INDICATOR | LV_STATE_DEFAULT);
    lv_obj_set_style_bg_image_src(ui_Slider1, &ui_img_prg_bar_png, LV_PART_INDICATOR | LV_STATE_DEFAULT);

    //Compensating for LVGL9.1 draw crash with bar/slider max value when top-padding is nonzero and right-padding is 0
    if(lv_obj_get_style_pad_top(ui_Slider1, LV_PART_MAIN) > 0) lv_obj_set_style_pad_right(ui_Slider1,
                                                                                              lv_obj_get_style_pad_right(ui_Slider1, LV_PART_MAIN) + 1, LV_PART_MAIN);

Screenshot and/or video

Hello,

Why are you creating a bar and a slider? One of the two should suffice! I think the slider is what you are looking for.

Thanks for the reply

Actually both of them aren’t work as my expectation.
I want the gradient part (my img.png) fixed and act as a indicator, which will chance upon pressing the arrow on both side.

Now u see, the gradient background are moving with the change which I dont expect.
Also the slider node is asyn with the gradient bar end point, instead the end point only move on [0, 50-100] but not expected [0-100]

If u hv any idea for this please let me know. Thanks alot!