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:

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_object_part_content_set(sl, "icon", ic);
ic = elm_icon_add(win);
elm_icon_standard_set(ic, "folder");

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:

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

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:

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;
win = elm_win_util_standard_add("slider", "Slider Example");
bx = elm_box_add(win);
/* default */
sl = elm_slider_add(win);
elm_box_pack_end(bx, 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_object_part_content_set(sl, "icon", ic);
ic = elm_icon_add(win);
elm_icon_standard_set(ic, "folder");
elm_box_pack_end(bx, sl);
/* value set and span size */
sl = elm_slider_add(win);
elm_box_pack_end(bx, sl);
/* with unit label and min - max */
sl = elm_slider_add(win);
elm_slider_unit_format_set(sl, "%1.0f units");
elm_box_pack_end(bx, sl);
/* with indicator label and inverted */
sl = elm_slider_add(win);
elm_box_pack_end(bx, sl);
/* vertical with indicator format func */
sl = elm_slider_add(win);
_indicator_free);
elm_box_pack_end(bx, sl);
/* callbacks */
sl = elm_slider_add(win);
elm_slider_unit_format_set(sl, "%1.3f units");
elm_box_pack_end(bx, sl);
evas_object_smart_callback_add(sl, "changed", _changed_cb, NULL);
evas_object_smart_callback_add(sl, "delay,changed", _delay_changed_cb, NULL);
return 0;
}

Setting callback functions:

Also, a slider can be displayed vertically:

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

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_box_add
EAPI Evas_Object * elm_box_add(Evas_Object *parent)
Add a new box to the parent.
Definition: elm_box.c:363
EINA_UNUSED
#define EINA_UNUSED
Definition: eina_types.h:339
EINA_FALSE
#define EINA_FALSE
Definition: eina_types.h:533
elm_image_resizable_set
EAPI 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:2655
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:292
evas_object_smart_callback_add
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
Evas_Object
Efl_Canvas_Object Evas_Object
Definition: Evas_Common.h:180
elm_icon_add
Evas_Object * elm_icon_add(Evas_Object *parent)
Add a new icon object to the parent.
Definition: elm_icon.c:606
evas_object_size_hint_weight_set
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
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:1567
elm_run
void elm_run(void)
Run Elementary's main loop.
Definition: elm_main.c:1362
evas_object_size_hint_align_set
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
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:9576
evas_object_show
void evas_object_show(Evas_Object *eo_obj)
Makes the given Evas object visible.
Definition: evas_object_main.c:1814
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:293
EINA_TRUE
#define EINA_TRUE
Definition: eina_types.h:539
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:1385
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
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:1692
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_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:1706
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:8992
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_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:1659
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_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
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
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:6188
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:878
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
ELM_POLICY_QUIT
@ ELM_POLICY_QUIT
under which circumstances the application should quit automatically.
Definition: elm_general.h:227