Slider's lever failed to change an image display

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);

The following approach also fails。
lv_style_t 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);

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

That’s the picture

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: