Slider widget example

- Main Page
- Related Pages
- Modules
- Data Structures
- Files
- Examples

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:885
elm_icon_add
Evas_Object * elm_icon_add(Evas_Object *parent)
Add a new icon object to the parent.
Definition: elm_icon.c:613
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:2656

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:9582
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:8997
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:6194
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.