Slider Widget¶
Overview¶
The Slider widget lets the user drag a knob along a track to select a numeric value within a defined range. It supports horizontal and vertical orientations, customizable track/knob/fill colors, and a change event.
Enable¶
Creation¶
#ifdef MGUI_WIDGET_ENABLE_SLIDER
mgui_widget_t* slider = mgui_allocate_widget(
parent,
MGUI_WIDGET_SLIDER,
(mgui_area_t){x, y, width, height},
MGUI_COLOR_ELEM_DARK_SLATE // widget background
);
#endif
For a horizontal slider use
width >> height. For a vertical slider useheight >> width.
API Reference¶
Value & Range¶
mgui_widget_slider_set_range(slider, 0, 100);
mgui_widget_slider_set_value(slider, 50);
int16_t v = mgui_widget_slider_get_value(slider);
Orientation¶
mgui_widget_slider_set_orientation(slider, MGUI_SLIDER_HORIZONTAL);
mgui_widget_slider_set_orientation(slider, MGUI_SLIDER_VERTICAL);
Appearance¶
// track color, knob color, fill color
mgui_widget_slider_set_colors(slider,
MGUI_COLOR_ELEM_DARK_SLATE,
MGUI_COLOR_WHITE,
MGUI_COLOR_PURPLE);
mgui_widget_slider_set_knob_size(slider, 14);
mgui_widget_slider_set_track_thickness(slider, 4);
Events¶
static void on_slider(mgui_widget_t* obj, mgui_event_t event) {
if (event & MGUI_EVENT_CHANGE) {
int16_t v = mgui_widget_slider_get_value(obj);
// use v
}
}
mgui_widget_click_handler(slider, on_slider);
Common Combinations¶
| Use Case | Pairing |
|---|---|
| Volume control | Horizontal slider + label showing current value |
| Brightness | Vertical slider on side panel |
| Parameter tuning | Multiple sliders in a settings panel |
| Color picker | 3 sliders (R, G, B) feeding a color preview box |
Examples¶
Horizontal Slider with Live Readout¶
A centered purple-fill slider with a value label that updates on every drag — covers slider_colors, range, value, knob_size, track_thickness, and MGUI_EVENT_CHANGE.
{
"elements": [
{
"type": "box",
"name": "Screen",
"x": 0, "y": 0, "w": 320, "h": 240,
"color": "0xC6C6C6",
"children": [
{
"type": "label",
"name": "ValLabel",
"x": 0, "y": 80, "w": 320, "h": 28,
"color": "0xC6C6C6",
"align": "MGUI_ALIGN_CENTER",
"text": "Volume: 50"
},
{
"type": "slider",
"name": "VolSlider",
"x": 0, "y": 120, "w": 260, "h": 28,
"color": "0x3A2939",
"align": "MGUI_ALIGN_CENTER",
"value": 50,
"knob_size": 14,
"track_thickness": 4,
"slider_colors": {
"track": "0x3A2939",
"knob": "0xFFFFFF",
"fill": "0x5900CC"
},
"range": { "min": 0, "max": 100 }
}
]
}
]
}
mgui_widget_t* screen = mgui_allocate_widget(
NULL, MGUI_WIDGET_BOX,
(mgui_area_t){0, 0, 320, 240},
MGUI_COLOR_LIGHT_GRAY);
mgui_widget_t* val_lbl = mgui_allocate_widget(
screen, MGUI_WIDGET_LABEL,
(mgui_area_t){0, 80, 320, 28},
MGUI_COLOR_LIGHT_GRAY);
mgui_widget_align(val_lbl, MGUI_ALIGN_CENTER);
mgui_widget_label_set_text(val_lbl, "Volume: 50");
mgui_widget_color_change(val_lbl, MGUI_COLOR_PURPLE);
#ifdef MGUI_WIDGET_ENABLE_SLIDER
mgui_widget_t* vol_slider = mgui_allocate_widget(
screen, MGUI_WIDGET_SLIDER,
(mgui_area_t){0, 120, 260, 28},
MGUI_COLOR_ELEM_DARK_SLATE);
mgui_widget_align(vol_slider, MGUI_ALIGN_CENTER);
mgui_widget_slider_set_range(vol_slider, 0, 100);
mgui_widget_slider_set_value(vol_slider, 50);
mgui_widget_slider_set_knob_size(vol_slider, 14);
mgui_widget_slider_set_track_thickness(vol_slider, 4);
mgui_widget_slider_set_colors(vol_slider,
MGUI_COLOR_ELEM_DARK_SLATE,
MGUI_COLOR_WHITE,
MGUI_COLOR_PURPLE);
static void on_volume(mgui_widget_t* obj, mgui_event_t event) {
if (event & MGUI_EVENT_CHANGE) {
char buf[20];
snprintf(buf, sizeof(buf), "Volume: %d",
mgui_widget_slider_get_value(obj));
mgui_widget_label_set_text(val_lbl, buf);
}
}
mgui_widget_click_handler(vol_slider, on_volume);
#endif /* MGUI_WIDGET_ENABLE_SLIDER */
Vertical + Horizontal Sliders¶
A vertical brightness slider beside a horizontal temperature slider — covers both MGUI_SLIDER_VERTICAL and MGUI_SLIDER_HORIZONTAL with different fill colors.
{
"elements": [
{
"type": "box",
"name": "Screen",
"x": 0, "y": 0, "w": 320, "h": 240,
"color": "0xC6C6C6",
"children": [
{
"type": "slider",
"name": "BrightSlider",
"x": 20, "y": 40, "w": 28, "h": 160,
"color": "0x3A2939",
"orientation": "vertical",
"value": 80,
"slider_colors": {
"track": "0x3A2939",
"knob": "0xFFFFFF",
"fill": "0x2DA852"
},
"range": { "min": 0, "max": 100 }
},
{
"type": "slider",
"name": "TempSlider",
"x": 70, "y": 0, "w": 220, "h": 28,
"color": "0x3A2939",
"align": "MGUI_ALIGN_CENTER_V",
"orientation": "horizontal",
"value": 22,
"knob_size": 16,
"track_thickness": 6,
"slider_colors": {
"track": "0x3A2939",
"knob": "0xFFFFFF",
"fill": "0xEF3F2E"
},
"range": { "min": 0, "max": 100 }
}
]
}
]
}
```c
ifdef MGUI_WIDGET_ENABLE_SLIDER¶
mgui_widget_t* bright_slider = mgui_allocate_widget( screen, MGUI_WIDGET_SLIDER, (mgui_area_t){20, 40, 28, 160}, MGUI_COLOR_ELEM_DARK_SLATE); mgui_widget_slider_set_orientation(bright_slider, MGUI_SLIDER_VERTICAL); mgui_widget_slider_set_range(bright_slider, 0, 100); mgui_widget_slider_set_value(bright_slider, 80); mgui_widget_slider_set_colors(bright_slider, MGUI_COLOR_ELEM_DARK_SLATE, MGUI_COLOR_WHITE, MGUI_COLOR_EMERALD);
mgui_widget_t* temp_slider = mgui_allocate_widget( screen, MGUI_WIDGET_SLIDER, (mgui_area_t){70, 0, 220, 28}, MGUI_COLOR_ELEM_DARK_SLATE); mgui_widget_align(temp_slider, MGUI_ALIGN_CENTER_V); mgui_widget_slider_set_orientation(temp_slider, MGUI_SLIDER_HORIZONTAL); mgui_widget_slider_set_range(temp_slider, 0, 100); mgui_widget_slider_set_value(temp_slider, 22); mgui_widget_slider_set_knob_size(temp_slider, 16); mgui_widget_slider_set_track_thickness(temp_slider, 6); mgui_widget_slider_set_colors(temp_slider, MGUI_COLOR_ELEM_DARK_SLATE, MGUI_COLOR_WHITE, MGUI_COLOR_CRIMSON);