Slider widget example

This code places seven Elementary slider widgets on a window, each of them exemplifying a part of the widget's API.

The first of them is the default slider:

sl = elm_slider_add(win);
elm_slider_add
Evas_Object * elm_slider_add(Evas_Object *parent)
Add a new slider widget to the given parent Elementary (container) object.
Definition elm_slider.c:1437
evas_object_size_hint_align_set(sl, EVAS_HINT_FILL, 0.5);
evas_object_size_hint_weight_set(sl, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_box_pack_end(bx, sl);
evas_object_show(sl);
EVAS_HINT_EXPAND
#define EVAS_HINT_EXPAND
Use with evas_object_size_hint_weight_set(), evas_object_size_hint_weight_get(), evas_object_size_hin...
Definition Evas_Common.h:297
EVAS_HINT_FILL
#define EVAS_HINT_FILL
Use with evas_object_size_hint_align_set(), evas_object_size_hint_align_get(), evas_object_size_hint_...
Definition Evas_Common.h:298
elm_box_pack_end
void elm_box_pack_end(Elm_Box *obj, Efl_Canvas_Object *subobj)
Add an object at the end of the pack list.
Definition elm_box_eo.legacy.c:57
evas_object_show
EVAS_API void evas_object_show(Evas_Object *eo_obj)
Makes the given Evas object visible.
Definition evas_object_main.c:1814
evas_object_size_hint_weight_set
EVAS_API void evas_object_size_hint_weight_set(Evas_Object *obj, double x, double y)
Sets the hints for an object's weight.
Definition evas_object_main.c:2638
evas_object_size_hint_align_set
EVAS_API void evas_object_size_hint_align_set(Evas_Object *obj, double x, double y)
Sets the hints for an object's alignment.
Definition evas_object_main.c:2650

As you see, the defaults for a slider are:

- horizontal
- no label
- no values (on indicator or unit labels)

Actually it's pretty useless this way. So let's learn how to improve it.

If some decoration is required, a label can be set, and icon before and after the bar as well. On the second slider will add a `home` icon and a `folder` icon at `end`.

elm_object_text_set(sl, "Counter");
ic = elm_icon_add(win);
elm_icon_standard_set(ic, "home");
elm_image_resizable_set(ic, EINA_FALSE, EINA_FALSE);
elm_object_part_content_set(sl, "icon", ic);
ic = elm_icon_add(win);
elm_icon_standard_set(ic, "folder");
elm_image_resizable_set(ic, EINA_FALSE, EINA_FALSE);
elm_object_part_content_set(sl, "end", ic);
EINA_FALSE
#define EINA_FALSE
boolean value FALSE (numerical value 0)
Definition eina_types.h:533
elm_object_part_content_set
void elm_object_part_content_set(Evas_Object *obj, const char *part, Evas_Object *content)
Set the content on part of a given container widget.
Definition elm_main.c:1562
elm_icon_standard_set
Eina_Bool elm_icon_standard_set(Evas_Object *obj, const char *name)
Set the icon by icon standards names.
Definition elm_icon.c:876
elm_icon_add
Evas_Object * elm_icon_add(Evas_Object *parent)
Add a new icon object to the parent.
Definition elm_icon.c:604
elm_image_resizable_set
void elm_image_resizable_set(Evas_Object *obj, Eina_Bool up, Eina_Bool down)
Control if the object is (up/down) resizable.
Definition efl_ui_image.c:2637

If the bar size need to be changed, it can be done with span set function, that doesn't accounts other widget's parts size. Also the bar can starts with a not default value (0.0), as we done on third slider:

elm_slider_value_set(sl, 1);
elm_slider_value_set
void elm_slider_value_set(Evas_Object *obj, double val)
Set the value the slider displays.
Definition elm_slider.c:1517
elm_slider_span_size_set(sl, 200);
elm_slider_span_size_set
void elm_slider_span_size_set(Evas_Object *obj, Evas_Coord size)
Set the (exact) length of the bar region of a given slider widget.
Definition elm_slider.c:1444

So far, users won't be able to see the slider value. If it's required, it can be displayed in two different areas, units label or above the indicator.

Let's place a units label on our widget, and also let's set minimum and maximum value (uses 0.0 and 1.0 by default):

elm_slider_unit_format_set(sl, "%1.0f units");
elm_slider_unit_format_set
void elm_slider_unit_format_set(Evas_Object *obj, const char *units)
Set the format string for the unit label.
Definition elm_slider.c:1458
elm_slider_min_max_set(sl, 0, 100);
elm_slider_min_max_set
void elm_slider_min_max_set(Evas_Object *obj, double min, double max)
Set the minimum and maximum values for the slider.
Definition elm_slider.c:1707

If above the indicator is the place to display the value, just set it. Also, is possible to invert a bar, as you can see:

elm_slider_indicator_format_set(sl, "%1.2f");
elm_slider_indicator_format_set
void elm_slider_indicator_format_set(Evas_Object *obj, const char *indicator)
Set the format string for the indicator label.
Definition elm_slider.c:1740
elm_slider_inverted_set(sl, EINA_TRUE);
EINA_TRUE
#define EINA_TRUE
boolean value TRUE (numerical value 1)
Definition eina_types.h:539
elm_slider_inverted_set
void elm_slider_inverted_set(Evas_Object *obj, Eina_Bool inverted)
Invert a given slider widget's displaying values order.
Definition elm_slider.c:1538

But if you require to use a function a bit more customized to show the value, is possible to registry a callback function that will be called to display unit or indicator label. Only the value will be passed to this function, that should return a string. In this case, a function to free this string will be required.

Let's exemplify with indicator label on our sixth slider:

static void
_indicator_free(char *str)
{
free(str);
}
EAPI_MAIN int
elm_main(int argc EINA_UNUSED, char **argv EINA_UNUSED)
{
Evas_Object *win, *bx, *sl, *ic;
elm_policy_set(ELM_POLICY_QUIT, ELM_POLICY_QUIT_LAST_WINDOW_CLOSED);
win = elm_win_util_standard_add("slider", "Slider Example");
elm_win_autodel_set(win, EINA_TRUE);
bx = elm_box_add(win);
evas_object_size_hint_weight_set(bx, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_win_resize_object_add(win, bx);
evas_object_show(bx);
/* default */
sl = elm_slider_add(win);
evas_object_size_hint_align_set(sl, EVAS_HINT_FILL, 0.5);
evas_object_size_hint_weight_set(sl, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_box_pack_end(bx, sl);
evas_object_show(sl);
/* with icon, end and label */
sl = elm_slider_add(win);
elm_object_text_set(sl, "Counter");
ic = elm_icon_add(win);
elm_icon_standard_set(ic, "home");
elm_image_resizable_set(ic, EINA_FALSE, EINA_FALSE);
elm_object_part_content_set(sl, "icon", ic);
ic = elm_icon_add(win);
elm_icon_standard_set(ic, "folder");
elm_image_resizable_set(ic, EINA_FALSE, EINA_FALSE);
elm_object_part_content_set(sl, "end", ic);
evas_object_size_hint_align_set(sl, EVAS_HINT_FILL, 0.5);
evas_object_size_hint_weight_set(sl, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_box_pack_end(bx, sl);
evas_object_show(sl);
/* value set and span size */
sl = elm_slider_add(win);
elm_slider_value_set(sl, 1);
elm_slider_span_size_set(sl, 200);
evas_object_size_hint_align_set(sl, EVAS_HINT_FILL, 0.5);
evas_object_size_hint_weight_set(sl, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_box_pack_end(bx, sl);
evas_object_show(sl);
/* with unit label and min - max */
sl = elm_slider_add(win);
elm_slider_unit_format_set(sl, "%1.0f units");
elm_slider_min_max_set(sl, 0, 100);
evas_object_size_hint_align_set(sl, EVAS_HINT_FILL, 0.5);
evas_object_size_hint_weight_set(sl, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_box_pack_end(bx, sl);
evas_object_show(sl);
/* with indicator label and inverted */
sl = elm_slider_add(win);
elm_slider_indicator_format_set(sl, "%1.2f");
elm_slider_inverted_set(sl, EINA_TRUE);
evas_object_size_hint_align_set(sl, EVAS_HINT_FILL, 0.5);
evas_object_size_hint_weight_set(sl, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_box_pack_end(bx, sl);
evas_object_show(sl);
/* vertical with indicator format func */
sl = elm_slider_add(win);
elm_slider_horizontal_set(sl, EINA_FALSE);
elm_slider_indicator_format_function_set(sl, _indicator_format,
_indicator_free);
evas_object_size_hint_align_set(sl, 0.5, EVAS_HINT_FILL);
evas_object_size_hint_weight_set(sl, 0, EVAS_HINT_EXPAND);
elm_box_pack_end(bx, sl);
evas_object_show(sl);
/* callbacks */
sl = elm_slider_add(win);
elm_slider_unit_format_set(sl, "%1.3f units");
evas_object_size_hint_align_set(sl, EVAS_HINT_FILL, 0.5);
evas_object_size_hint_weight_set(sl, EVAS_HINT_EXPAND, EVAS_HINT_EXPAND);
elm_box_pack_end(bx, sl);
evas_object_show(sl);
evas_object_smart_callback_add(sl, "changed", _changed_cb, NULL);
evas_object_smart_callback_add(sl, "delay,changed", _delay_changed_cb, NULL);
evas_object_show(win);
elm_run();
return 0;
}
EINA_UNUSED
#define EINA_UNUSED
Used to indicate that a function parameter is purposely unused.
Definition eina_types.h:339
elm_box_add
Evas_Object * elm_box_add(Evas_Object *parent)
Add a new box to the parent.
Definition elm_box.c:363
elm_policy_set
Eina_Bool elm_policy_set(unsigned int policy, int value)
Set a new policy's value (for a given policy group/identifier).
Definition elm_main.c:1380
elm_run
void elm_run(void)
Run Elementary's main loop.
Definition elm_main.c:1357
ELM_POLICY_QUIT_LAST_WINDOW_CLOSED
@ ELM_POLICY_QUIT_LAST_WINDOW_CLOSED
quit when the application's last window is closed
Definition elm_general.h:248
ELM_POLICY_QUIT
@ ELM_POLICY_QUIT
under which circumstances the application should quit automatically.
Definition elm_general.h:227
elm_slider_horizontal_set
void elm_slider_horizontal_set(Evas_Object *obj, Eina_Bool horizontal)
Set the orientation of a given slider widget.
Definition elm_slider.c:1472
elm_slider_indicator_format_function_set
void elm_slider_indicator_format_function_set(Evas_Object *obj, slider_func_type func, slider_freefunc_type free_func)
Set the format function pointer for the indicator label.
Definition elm_slider.c:1754
elm_win_util_standard_add
Evas_Object * elm_win_util_standard_add(const char *name, const char *title)
Adds a window object with standard setup.
Definition efl_ui_win.c:9587
elm_win_resize_object_add
void elm_win_resize_object_add(Eo *obj, Evas_Object *subobj)
Add subobj as a resize object of window obj.
Definition efl_ui_win.c:9002
elm_win_autodel_set
void elm_win_autodel_set(Eo *obj, Eina_Bool autodel)
Set the window's autodel state.
Definition efl_ui_win.c:6199
Evas_Object
Efl_Canvas_Object Evas_Object
An Evas Object handle.
Definition Evas_Common.h:185
evas_object_smart_callback_add
EVAS_API void evas_object_smart_callback_add(Evas_Object *eo_obj, const char *event, Evas_Smart_Cb func, const void *data)
Add (register) a callback function to the smart event specified by event on the smart object obj.
Definition evas_object_smart.c:1040

Setting callback functions:

Also, a slider can be displayed vertically:

elm_slider_horizontal_set(sl, EINA_FALSE);

Finally the last widget will exemplify how to listen to widget's signals, changed and delay,changed . First we need to implement callback functions that will simply print slider's value:

static void
_delay_changed_cb(void *data EINA_UNUSED, Evas_Object *obj, void *event_info EINA_UNUSED)
{
double val = elm_slider_value_get(obj);
printf("Delay changed to %1.2f\n", val);
}
elm_slider_value_get
double elm_slider_value_get(const Evas_Object *obj)
Get the value displayed by the slider.
Definition elm_slider.c:1531
static char*
_indicator_format(double val)
{
char *indicator = malloc(sizeof(char) * 32);
snprintf(indicator, 32, "%1.2f u", val);
return indicator;
}

The first callback function should be called everytime value changes, the second one only after user stops to increment or decrement. Try to keep arrows pressed and check the difference.

evas_object_smart_callback_add(sl, "changed", _changed_cb, NULL);
evas_object_smart_callback_add(sl, "delay,changed", _delay_changed_cb, NULL);

See the full example, whose window should look like this picture:

See the full source code for this example.