Slider - rockcastle/lvgl GitHub Wiki

Written for v5.1

Overview

The Slider object looks like a Bar supplemented with a Knob. The Knob can be dragged to set a value. The Slider also can be vertical or horizontal.

To set an initial value use lv_slider_set_value(slider, new_value) function or lv_slider_set_value_anim(slider, new_value, anim_time) to set the value with an animation.

To specify the range (min, max values) the lv_slider_set_range(slider, min , max) can be used.

A callback function can be assigned to call when a new value is set by the user: lv_slider_set_action(slider, my_action).

The knob can be placed two ways:

• inside the background on min/max values
• on the edges on min/max values

Use the lv_slider_set_knob_in(slider, true/false) to choose between the modes. (knob_in == false is the default)

Style usage

You can modify the slider's styles with lv_slider_set_style(slider, LV_SLIDER_STYLE_..., &style).

• LV_SLIDER_STYLE_BG Style of the background. All style.body properties are used. The padding values make the slider smaller then the knob. (negative value makes is larger)
• LV_SLIDER_STYLE_INDIC Style of the indicator. All style.body properties are used. The padding values make the indicator smaller then the background.
• LV_SLIDER_STYLE_KNOB Style of the knob. The style.body properties are used except padding

Notes

• The Knob is not a real object it is only drawn above the Bar

Example

/*Called when a new value id set on the slider*/
static lv_res_t slider_action(lv_obj_t * slider)
{
    printf("New slider value: %d\n", lv_slider_get_value(slider));

    return LV_RES_OK;
}

.
.
.

/*Create a default slider*/
lv_obj_t * slider1 = lv_slider_create(lv_scr_act(), NULL);
lv_obj_set_size(slider1, 160, 30);
lv_obj_align(slider1, NULL, LV_ALIGN_IN_TOP_RIGHT, -30, 30);
lv_slider_set_action(slider1, slider_action);
lv_bar_set_value(slider1, 70);


/*Create a label right to the slider*/
lv_obj_t * slider1_label = lv_label_create(lv_scr_act(), NULL);
lv_label_set_text(slider1_label, "Default");
lv_obj_align(slider1_label, slider1, LV_ALIGN_OUT_LEFT_MID, -20, 0);

/*Create a bar, an indicator and a knob style*/
static lv_style_t style_bg;
static lv_style_t style_indic;
static lv_style_t style_knob;

lv_style_copy(&style_bg, &lv_style_pretty);
style_bg.body.main_color =  LV_COLOR_BLACK;
style_bg.body.grad_color =  LV_COLOR_GRAY;
style_bg.body.radius = LV_RADIUS_CIRCLE;
style_bg.body.border.color = LV_COLOR_WHITE;

lv_style_copy(&style_indic, &lv_style_pretty);
style_indic.body.grad_color =  LV_COLOR_GREEN;
style_indic.body.main_color =  LV_COLOR_LIME;
style_indic.body.radius = LV_RADIUS_CIRCLE;
style_indic.body.shadow.width = 10;
style_indic.body.shadow.color = LV_COLOR_LIME;
style_indic.body.padding.hor = 3;
style_indic.body.padding.ver = 3;

lv_style_copy(&style_knob, &lv_style_pretty);
style_knob.body.radius = LV_RADIUS_CIRCLE;
style_knob.body.opa = LV_OPA_70;
style_knob.body.padding.ver = 10 ;

/*Create a second slider*/
lv_obj_t * slider2 = lv_slider_create(lv_scr_act(), slider1);
lv_slider_set_style(slider2, LV_SLIDER_STYLE_BG, &style_bg);
lv_slider_set_style(slider2, LV_SLIDER_STYLE_INDIC,&style_indic);
lv_slider_set_style(slider2, LV_SLIDER_STYLE_KNOB, &style_knob);
lv_obj_align(slider2, slider1, LV_ALIGN_OUT_BOTTOM_MID, 0, 30); /*Align below 'bar1'*/

/*Create a second label*/
lv_obj_t * slider2_label = lv_label_create(lv_scr_act(), slider1_label);
lv_label_set_text(slider2_label, "Modified");
lv_obj_align(slider2_label, slider2, LV_ALIGN_OUT_LEFT_MID, -30, 0);