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 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 of Slider in Littlev Graphics Library

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

lv_obj_t *

lv_slider_create

(lv_obj_t * par, lv_obj_t * copy);

Create a slider objects

par pointer to an object, it will be the parent of the new slider

copy pointer to a slider object, if not NULL then the new object will be copied from it

return pointer to the created slider

void

lv_slider_set_value

(lv_obj_t * slider, int16_t value);

Set a new value on the slider

slider pointer to a slider object

value new value

void

lv_slider_set_value_anim

(lv_obj_t * slider, int16_t value, uint16_t anim_time);

Set a new value with animation on a slider

slider pointer to a slider object

value new value

anim_time animation time in milliseconds

void

lv_slider_set_range

(lv_obj_t *slider, int16_t min, int16_t max);

Set minimum and the maximum values of a bar

slider pointer to the slider object

min minimum value

max maximum value

void

lv_slider_set_action

(lv_obj_t * slider, lv_action_t action);

Set a function which will be called when a new value is set on the slider

slider pointer to slider object

action a callback function

void

lv_slider_set_knob_in

(lv_obj_t * slider, bool in);

Set the 'knob in' attribute of a slider

slider pointer to slider object

in true: the knob is drawn always in the slider;
false: the knob can be out on the edges

void

lv_slider_set_style

(lv_obj_t *slider, lv_slider_style_t type, lv_style_t *style);

Set a style of a slider

slider pointer to a slider object

type which style should be set

style pointer to a style

int16_t

lv_slider_get_value

(lv_obj_t * slider);

Get the value of a slider

slider pointer to a slider object

return the value of the slider

int16_t

lv_slider_get_min_value

(lv_obj_t * slider);

Get the minimum value of a slider

slider pointer to a slider object

return the minimum value of the slider

int16_t

lv_slider_get_max_value

(lv_obj_t * slider);

Get the maximum value of a slider

slider pointer to a slider object

return the maximum value of the slider

lv_action_t

lv_slider_get_action

(lv_obj_t * slider);

Get the slider action function

slider pointer to slider object

return the callback function

bool

lv_slider_is_dragged

(lv_obj_t * slider);

Give the slider is being dragged or not

slider pointer to a slider object

return true: drag in progress false: not dragged

bool

lv_slider_get_knob_in

(lv_obj_t * slider);

Get the 'knob in' attribute of a slider

slider pointer to slider object

return true: the knob is drawn always in the slider;
false: the knob can be out on the edges

lv_style_t *

lv_slider_get_style

(lv_obj_t *slider, lv_slider_style_t type);

Get a style of a slider

slider pointer to a slider object

type which style should be get

return style pointer to a style

LittlevGL - Open-source Embedded GUI Library

LittlevGL is a free and open-source graphics library providing everything you need to create embedded GUI with easy-to-use graphical elements, beautiful visual effects and low memory footprint.

If you like LittlevGL, please
support its deveopment!


The founder of Littlev Graphics Library (LittlevGL) and related software modules is:
Gábor Kiss-Vámosi
All Rights Reserved ©  2018 Hungary