Slider's lever failed to change an image display

How-to
1

Slider has failed to change an image to display as follows:

lv_obj_set_style_local_pattern_opa(s, LV_SLIDER_PART_KNOB, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_obj_set_style_local_pattern_image(s, LV_SLIDER_PART_KNOB, LV_STATE_DEFAULT, &volume_value_background_box);
lv_obj_set_style_local_value_ofs_y(s, LV_SLIDER_PART_KNOB, LV_STATE_DEFAULT,- LV_DPX(30));
lv_obj_set_style_local_value_opa(s, LV_SLIDER_PART_KNOB, LV_STATE_DEFAULT, LV_OPA_COVER);
lv_obj_set_event_cb(s, slider_event_cb);
lv_event_send(s, LV_EVENT_VALUE_CHANGED, NULL);
2

The following approach also fails。
lv_style_t knob_style;
lv_style_init(&knob_style);
lv_style_set_pattern_image(&knob_style, LV_STATE_DEFAULT, &volume_value_background_box);
lv_obj_add_style(s, LV_SLIDER_PART_KNOB, &knob_style);

3

It works well for me.
Please attach the image you are using.

4

That’s the picture
阈值背景框

5

The problem with your image is the it’s “indexed” but it should be normal RGB. I converted it with GIMP and now it works well.

Here is the new image:
阈值背景框

Not that the pattern is cropped to the size of the knob so the knob should be large enough to hold the pattern. You can do this by adding some extra padding to it:

    lv_obj_set_style_local_pad_all(slider, LV_SLIDER_PART_KNOB, LV_STATE_DEFAULT, 20);
    lv_obj_set_style_local_bg_opa(slider, LV_SLIDER_PART_KNOB, LV_STATE_DEFAULT, LV_OPA_TRANSP);

And the result:
image