Slider (lv_slider)
Overview
The Slider Widget looks like a Bar (lv_bar) supplemented with a knob. The knob can be dragged to set the Slider's value. Like Bar, a Slider can be vertical or horizontal.
Parts and Styles
LV_PART_MAIN
The background of the Slider. Uses the typical background style properties.padding
makes the indicator smaller in the respective direction.LV_PART_INDICATOR
The indicator that shows the current state of the Slider; also uses the typical background style properties.LV_PART_KNOB
A rectangle (or circle) drawn at the current value; also uses the typical background style properties to describe the knob(s). By default, the knob is round (radius-style can modify this) with side length equal to the smaller dimension of the Slider. The knob can be made larger with thepadding
values. Padding values can be asymmetric as well.
Usage
Value, range and orientation
Once a Slider is created, it has:
value == 0
default range of [0..100],
horizontal orientation, with
default width of approximately 2 inches (according to configured value of
LV_DPI_DEF
),default hight of approximately 1/10 inch (according to configured value of
LV_DPI_DEF
).
To set a different value use:
lv_slider_set_value(slider, new_value, LV_ANIM_ON / OFF) (animation time is set by the styles'
anim_time
property);lv_slider_set_range(slider, min, max); and
for orientation, width and height, simply set width and height properties;
lv_slider_set_orientation(slider, orientation) to override orientation caused by
width
andheight
. Valid values fororientation
are:
The default drawing direction is from left to right in horizontal orientation and bottom to top in vertical orientation. If the minimum value is set to be greater than the maximum value (e.g. [100..0]), the drawing direction is reversed.
Modes
The Slider can be in one of the following modes:
LV_SLIDER_MODE_NORMAL
A normal Slider as described above (default)LV_SLIDER_SYMMETRICAL
Draw the indicator from the zero value to current value. Requires negative minimum range and positive maximum range.LV_SLIDER_RANGE
Allows setting the start value as well by lv_bar_set_start_value(slider, new_value, LV_ANIM_ON / OFF). The start value must always be smaller than the end value.
The mode can be changed with lv_slider_set_mode(slider, LV_SLIDER_MODE_...)
Knob-only mode
Normally, the Slider can be adjusted either by dragging the knob, or by
clicking on the Slider bar. In the latter case the knob moves to the
point clicked and the Slider value changes accordingly. In some cases it is
desirable to set the Slider to react on dragging the knob only. This
feature is enabled by adding the LV_OBJ_FLAG_ADV_HITTEST
flag:
lv_obj_add_flag(slider, LV_OBJ_FLAG_ADV_HITTEST).
Any extended click area (set by lv_obj_set_ext_click_area(slider, value)) increases the knob's click area.
Events
LV_EVENT_VALUE_CHANGED
Sent while the Slider is being dragged or changed with keys. The event is sent continuously while the Slider is being dragged.LV_EVENT_RELEASED
Sent once when Slider is released.
Further Reading
Learn more about Base-Widget Events emitted by all Widgets.
Learn more about Events.
Keys
LV_KEY_UP/RIGHT
Increment Slider's value by 1.LV_KEY_DOWN/LEFT
Decrement Slider's value by 1.
Further Reading
Learn more about Keys.
Example
Simple Slider
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SLIDER && LV_BUILD_EXAMPLES
static void slider_event_cb(lv_event_t * e);
static lv_obj_t * slider_label;
/**
* A default slider with a label displaying the current value
*/
void lv_example_slider_1(void)
{
/*Create a slider in the center of the display*/
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_center(slider);
lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
lv_obj_set_style_anim_duration(slider, 2000, 0);
/*Create a label below the slider*/
slider_label = lv_label_create(lv_screen_active());
lv_label_set_text(slider_label, "0%");
lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}
static void slider_event_cb(lv_event_t * e)
{
lv_obj_t * slider = lv_event_get_target(e);
char buf[8];
lv_snprintf(buf, sizeof(buf), "%d%%", (int)lv_slider_get_value(slider));
lv_label_set_text(slider_label, buf);
lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}
#endif
Slider with custom style
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SLIDER && LV_BUILD_EXAMPLES
/**
* Show how to style a slider.
*/
void lv_example_slider_2(void)
{
/*Create a transition*/
static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, 0};
static lv_style_transition_dsc_t transition_dsc;
lv_style_transition_dsc_init(&transition_dsc, props, lv_anim_path_linear, 300, 0, NULL);
static lv_style_t style_main;
static lv_style_t style_indicator;
static lv_style_t style_knob;
static lv_style_t style_pressed_color;
lv_style_init(&style_main);
lv_style_set_bg_opa(&style_main, LV_OPA_COVER);
lv_style_set_bg_color(&style_main, lv_color_hex3(0xbbb));
lv_style_set_radius(&style_main, LV_RADIUS_CIRCLE);
lv_style_set_pad_ver(&style_main, -2); /*Makes the indicator larger*/
lv_style_init(&style_indicator);
lv_style_set_bg_opa(&style_indicator, LV_OPA_COVER);
lv_style_set_bg_color(&style_indicator, lv_palette_main(LV_PALETTE_CYAN));
lv_style_set_radius(&style_indicator, LV_RADIUS_CIRCLE);
lv_style_set_transition(&style_indicator, &transition_dsc);
lv_style_init(&style_knob);
lv_style_set_bg_opa(&style_knob, LV_OPA_COVER);
lv_style_set_bg_color(&style_knob, lv_palette_main(LV_PALETTE_CYAN));
lv_style_set_border_color(&style_knob, lv_palette_darken(LV_PALETTE_CYAN, 3));
lv_style_set_border_width(&style_knob, 2);
lv_style_set_radius(&style_knob, LV_RADIUS_CIRCLE);
lv_style_set_pad_all(&style_knob, 6); /*Makes the knob larger*/
lv_style_set_transition(&style_knob, &transition_dsc);
lv_style_init(&style_pressed_color);
lv_style_set_bg_color(&style_pressed_color, lv_palette_darken(LV_PALETTE_CYAN, 2));
/*Create a slider and add the style*/
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_remove_style_all(slider); /*Remove the styles coming from the theme*/
lv_obj_add_style(slider, &style_main, LV_PART_MAIN);
lv_obj_add_style(slider, &style_indicator, LV_PART_INDICATOR);
lv_obj_add_style(slider, &style_pressed_color, LV_PART_INDICATOR | LV_STATE_PRESSED);
lv_obj_add_style(slider, &style_knob, LV_PART_KNOB);
lv_obj_add_style(slider, &style_pressed_color, LV_PART_KNOB | LV_STATE_PRESSED);
lv_obj_center(slider);
}
#endif
Slider with extended drawer
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SLIDER && LV_BUILD_EXAMPLES
#define MAX_VALUE 100
#define MIN_VALUE 0
static void slider_event_cb(lv_event_t * e);
/**
* Show the current value when the slider is pressed by extending the drawer
*
*/
void lv_example_slider_3(void)
{
/*Create a slider in the center of the display*/
lv_obj_t * slider;
slider = lv_slider_create(lv_screen_active());
lv_obj_center(slider);
lv_slider_set_mode(slider, LV_SLIDER_MODE_RANGE);
lv_slider_set_range(slider, MIN_VALUE, MAX_VALUE);
lv_slider_set_value(slider, 70, LV_ANIM_OFF);
lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);
lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_ALL, NULL);
lv_obj_refresh_ext_draw_size(slider);
}
static void slider_event_cb(lv_event_t * e)
{
lv_event_code_t code = lv_event_get_code(e);
lv_obj_t * obj = lv_event_get_target(e);
/*Provide some extra space for the value*/
if(code == LV_EVENT_REFR_EXT_DRAW_SIZE) {
lv_event_set_ext_draw_size(e, 50);
}
else if(code == LV_EVENT_DRAW_MAIN_END) {
if(!lv_obj_has_state(obj, LV_STATE_PRESSED)) return;
lv_area_t slider_area;
lv_obj_get_coords(obj, &slider_area);
lv_area_t indic_area = slider_area;
lv_area_set_width(&indic_area, lv_area_get_width(&slider_area) * lv_slider_get_value(obj) / MAX_VALUE);
indic_area.x1 += lv_area_get_width(&slider_area) * lv_slider_get_left_value(obj) / MAX_VALUE;
char buf[16];
lv_snprintf(buf, sizeof(buf), "%d - %d", (int)lv_slider_get_left_value(obj), (int)lv_slider_get_value(obj));
lv_point_t label_size;
lv_text_get_size(&label_size, buf, LV_FONT_DEFAULT, 0, 0, LV_COORD_MAX, 0);
lv_area_t label_area;
label_area.x1 = 0;
label_area.x2 = label_size.x - 1;
label_area.y1 = 0;
label_area.y2 = label_size.y - 1;
lv_area_align(&indic_area, &label_area, LV_ALIGN_OUT_TOP_MID, 0, -10);
lv_draw_label_dsc_t label_draw_dsc;
lv_draw_label_dsc_init(&label_draw_dsc);
label_draw_dsc.color = lv_color_hex3(0x888);
label_draw_dsc.text = buf;
label_draw_dsc.text_local = true;
lv_layer_t * layer = lv_event_get_layer(e);
lv_draw_label(layer, &label_draw_dsc, &label_area);
}
}
#endif
Slider with opposite direction
C code
View on GitHub#include "../../lv_examples.h"
#if LV_USE_SLIDER && LV_BUILD_EXAMPLES
static void slider_event_cb(lv_event_t * e);
static lv_obj_t * slider_label;
/**
* Slider with opposite direction
*/
void lv_example_slider_4(void)
{
/*Create a slider in the center of the display*/
lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_center(slider);
lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
/*Reverse the direction of the slider*/
lv_slider_set_range(slider, 100, 0);
/*Create a label below the slider*/
slider_label = lv_label_create(lv_screen_active());
lv_label_set_text(slider_label, "0%");
lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}
static void slider_event_cb(lv_event_t * e)
{
lv_obj_t * slider = lv_event_get_target(e);
char buf[8];
lv_snprintf(buf, sizeof(buf), "%d%%", (int)lv_slider_get_value(slider));
lv_label_set_text(slider_label, buf);
lv_obj_align_to(slider_label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 10);
}
#endif