LVGL 入门第五课：滑条为什么分主体、指示器和旋钮？一文搞懂 `lv_slider`

LVGL 入门第五课：滑条为什么分主体、指示器和旋钮？一文搞懂 lv_slider

前言：滑条不是开关，它表示的是一个连续数值

上一篇讲了 lv_switch。

开关只有两个状态：

• 开
• 关

但是有些场景并不是简单的开和关，而是一个连续变化的数值。

比如：

• 屏幕亮度：0 到 100
• 音量大小：0 到 100
• 风扇转速：0 到 100
• 报警阈值：10 到 80
• 目标温度：16 到 30

这种场景更适合使用滑条。

在 LVGL 中，滑条控件是：

lv_slider

如果说 lv_switch 解决的是：

是否打开？

那么 lv_slider 解决的就是：

当前是多少？

所以学习滑条时，重点抓住两个核心就够了：

1. 滑条有一个当前值。
2. 滑条由三个主要部分组成：主体、指示器、旋钮。

这一篇就围绕这两个点展开。

---

一、lv_slider 是什么？

lv_slider 是 LVGL 中的滑条控件。

它可以让用户通过拖动来选择一个数值。

常见场景如下：

场景	说明
亮度调节	0% 到 100%
音量调节	0% 到 100%
阈值设置	最小值到最大值
速度调节	低速到高速
进度控制	某个范围内的进度

和前面几个控件一样，lv_slider 本质上也是对象。

所以它也可以使用很多 lv_obj 的通用函数。

比如设置大小：

lv_obj_set_size(slider, 200, 8);

设置位置：

lv_obj_center(slider);

绑定事件：

lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

但是滑条比普通对象多了一个很重要的概念：

值。

和滑条数值相关的三个函数，最先要掌握：

lv_slider_set_range(slider, 0, 100);
lv_slider_set_value(slider, 70, LV_ANIM_OFF);
lv_slider_get_value(slider);

其中LV_ANIM_OFF表示的是，关闭动画
#define LV_ANIM_OFF false

分别对应：

• 设置范围
• 设置当前值
• 读取当前值

后面大部分滑条操作，基本都围绕这三个函数展开。

---

二、创建第一个滑条

创建滑条使用这个函数：

lv_obj_t * lv_slider_create(lv_obj_t * parent);

参数说明：

参数	说明
parent	父对象，表示滑条要创建到哪个对象里面

返回值说明：

返回值	说明
lv_obj_t *	新创建的滑条对象

最简单的例子如下：

void init_page(void)
{
    lv_obj_t * slider = lv_slider_create(lv_screen_active());
    lv_obj_set_width(slider, 220);
    lv_obj_center(slider);
}

这样就能在屏幕中心创建一个默认滑条。

如果想让滑条轨道更细一点，可以再设置高度：

lv_obj_set_height(slider, 8);

完整写法如下：

void init_page(void)
{
    lv_obj_t * slider = lv_slider_create(lv_screen_active());
    lv_obj_set_width(slider, 220);
    lv_obj_set_height(slider, 8);
    lv_obj_center(slider);
}

这里仍然能看到 lv_obj 的影子。

虽然创建函数是：

lv_slider_create()

但是设置宽度、高度、位置时，用的还是：

lv_obj_set_width()
lv_obj_set_height()
lv_obj_center()

这说明：

lv_slider 本质上仍然是对象。

---

三、设置滑条范围

滑条默认会有自己的范围。

但在实际开发中，建议显式设置范围。

设置范围使用：

lv_slider_set_range(slider, min, max);

比如设置为 0 到 100：

lv_slider_set_range(slider, 0, 100);

完整例子：

void init_page(void)
{
    lv_obj_t * slider = lv_slider_create(lv_screen_active());
    lv_obj_set_width(slider, 220);
    lv_obj_center(slider);

    lv_slider_set_range(slider, 0, 100);
}

如果是温度设置，也可以设置为 16 到 30：

lv_slider_set_range(slider, 16, 30);

这时滑条的值就不再是百分比，而是目标温度。

所以滑条显示什么含义，取决于我们给它设置的数值范围。

可以简单理解成：

滑条本身只负责保存一个值。
这个值代表亮度、音量还是温度，由业务场景决定。

---

四、设置滑条当前值

设置滑条当前值使用：

lv_slider_set_value(slider, value, anim);

参数说明：

参数	说明
slider	滑条对象
value	要设置的值
anim	是否使用动画

例如，把滑条设置为 70：

lv_slider_set_value(slider, 70, LV_ANIM_OFF);

第三个参数常用两个值：

参数	说明
LV_ANIM_OFF	不使用动画
LV_ANIM_ON	使用动画

新手阶段建议先使用：

LV_ANIM_OFF

这样更容易观察滑条真实值的变化。

完整例子：

void init_page(void)
{
    lv_obj_t * slider = lv_slider_create(lv_screen_active());
    lv_obj_set_width(slider, 220);
    lv_obj_center(slider);

    lv_slider_set_range(slider, 0, 100);
    lv_slider_set_value(slider, 70, LV_ANIM_OFF);
}

运行后，滑条默认会停在 70% 左右的位置。

---

五、读取滑条当前值

读取滑条当前值使用：

lv_slider_get_value(slider)

返回值是 int32_t。

例如：

int32_t value = lv_slider_get_value(slider);
printf("value: %" LV_PRId32 "\n", value);

如果滑条范围是 0 到 100，那么这个值可以直接当成百分比。

如果滑条范围是 16 到 30，那么这个值就是目标温度。

所以读取滑条值时，一定要记得它的范围。

不要只看当前值是多少，还要看这个值在什么范围里。

---

六、滑条变化事件

滑条的值发生变化时，会触发：

LV_EVENT_VALUE_CHANGED

绑定事件：

lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

事件回调可以这样写：

static void slider_event_cb(lv_event_t * e)
{
    lv_obj_t * slider = lv_event_get_target(e);
    int32_t value = lv_slider_get_value(slider);

    printf("slider: %" LV_PRId32 "\n", value);
}

完整例子：

#include <stdio.h>
#include <lvgl.h>

static void slider_event_cb(lv_event_t * e)
{
    lv_obj_t * slider = lv_event_get_target(e);
    int32_t value = lv_slider_get_value(slider);

    printf("slider: %" LV_PRId32 "\n", value);
}

void init_page(void)
{
    lv_obj_t * slider = lv_slider_create(lv_screen_active());
    lv_obj_set_width(slider, 220);
    lv_obj_center(slider);

    lv_slider_set_range(slider, 0, 100);
    lv_slider_set_value(slider, 50, LV_ANIM_OFF);

    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);
}

拖动滑条时，就会不断打印当前值。

这里要注意一点：

LV_EVENT_VALUE_CHANGED 在拖动过程中可能会连续触发。

如果只是更新界面显示，一般没有问题。

但如果回调里要执行比较重的操作，比如写 Flash、发网络请求、下发硬件命令，就不建议每次变化都直接执行。

这种情况可以等用户松手后再处理。

后面会单独讲。

---

七、显示滑条百分比

滑条通常会配合一个 label 显示当前值。

比如：

亮度  70%

我们先写一个简单版本。

事件回调：

static void slider_event_cb(lv_event_t * e)
{
    lv_obj_t * slider = lv_event_get_target(e);
    lv_obj_t * label = lv_event_get_user_data(e);

    lv_label_set_text_fmt(label,
                          "%" LV_PRId32 "%%",
                          lv_slider_get_value(slider));
}

创建滑条和 label：

void init_page(void)
{
    lv_obj_t * slider = lv_slider_create(lv_screen_active());
    lv_obj_set_width(slider, 220);
    lv_obj_center(slider);

    lv_slider_set_range(slider, 0, 100);
    lv_slider_set_value(slider, 70, LV_ANIM_OFF);

    lv_obj_t * label = lv_label_create(lv_screen_active());
    lv_obj_set_style_text_color(label,lv_color_hex(COLOR_TEXT),LV_PART_MAIN);
    lv_label_set_text(label, "70%");
    lv_obj_align_to(label, slider, LV_ALIGN_OUT_BOTTOM_MID, 0, 12);

    lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, label);
}

这里的关键点是：

lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, label);

最后一个参数把 label 传进了事件回调。

回调里再通过：

lv_event_get_user_data(e)

拿到这个 label，并更新它的文字。

这个用法和前面几篇是一样的：

• 按钮点击计数时，把 label 传进事件回调。
• 开关同步 ON/OFF 时，把 label 传进事件回调。
• 滑条更新百分比时，也把 label 传进事件回调。

这是一种很常见的 LVGL 写法。

---

八、为什么百分号要写两个？

在格式化字符串里，如果想显示一个 %，需要写：

%%

所以这句代码：

lv_label_set_text_fmt(label, "%" LV_PRId32 "%%", value);

显示出来才是：

70%

如果写成：

lv_label_set_text_fmt(label, "%" LV_PRId32 "%", value);

后面的 % 会被当作格式控制符的一部分，可能导致显示异常。

所以显示百分号时，记住：

"%%"

这在滑条、进度、CPU 使用率、音量百分比里都会经常用到。

---

九、滑条的三个 part

滑条的样式和开关很像，也有三个重要的 part：

part	说明
LV_PART_MAIN	滑条底部轨道
LV_PART_INDICATOR	已经滑过的进度部分
LV_PART_KNOB	可以拖动的旋钮

可以这样理解：

LV_PART_MAIN       整条轨道
LV_PART_INDICATOR  当前值对应的进度条
LV_PART_KNOB       拖动的小圆点

比如一个 70% 的滑条：

• LV_PART_MAIN 是完整的灰色轨道。
• LV_PART_INDICATOR 是左侧 70% 的蓝色进度。
• LV_PART_KNOB 是当前位置的小圆点。

如果只设置 LV_PART_MAIN，你可能只能改到底部轨道颜色。

如果想改已经滑过的部分，就要设置：

LV_PART_INDICATOR

如果想改拖动圆点，就要设置：

LV_PART_KNOB

这也是滑条学习里最容易混淆的地方。

不是所有样式都设置到 LV_PART_MAIN。

要先想清楚：

我要改的是轨道、进度，还是旋钮？

---

十、设置滑条样式

下面写一个常见的蓝色滑条。

目标是：

• 底部轨道：深灰色。
• 指示器：蓝色。
• 旋钮：白色。
• 轨道和指示器都使用圆角。

代码如下：

lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_set_width(slider, 220);
lv_obj_set_height(slider, 8);
lv_obj_center(slider);

lv_slider_set_range(slider, 0, 100);
lv_slider_set_value(slider, 70, LV_ANIM_OFF);

lv_obj_set_style_bg_color(slider, lv_color_hex(0x3A4B61), LV_PART_MAIN);
lv_obj_set_style_bg_opa(slider, LV_OPA_COVER, LV_PART_MAIN);
lv_obj_set_style_radius(slider, LV_RADIUS_CIRCLE, LV_PART_MAIN);

lv_obj_set_style_bg_color(slider, lv_color_hex(0x2F91FF), LV_PART_INDICATOR);
lv_obj_set_style_bg_opa(slider, LV_OPA_COVER, LV_PART_INDICATOR);
lv_obj_set_style_radius(slider, LV_RADIUS_CIRCLE, LV_PART_INDICATOR);

lv_obj_set_style_bg_color(slider, lv_color_hex(0xFFFFFF), LV_PART_KNOB);
lv_obj_set_style_bg_opa(slider, LV_OPA_COVER, LV_PART_KNOB);
lv_obj_set_style_width(slider, 24, LV_PART_KNOB);
lv_obj_set_style_height(slider, 24, LV_PART_KNOB);

这里最需要注意的是这两句：

lv_obj_set_style_width(slider, 24, LV_PART_KNOB);
lv_obj_set_style_height(slider, 24, LV_PART_KNOB);

它设置的是旋钮大小。

不是滑条本身大小。

滑条本身大小是：

lv_obj_set_width(slider, 220);
lv_obj_set_height(slider, 8);

这两个不要混淆。

可以简单记成：

lv_obj_set_width / height：设置滑条整体尺寸。
LV_PART_KNOB 的 width / height：设置旋钮尺寸。

---

十一、滑条为什么看起来很粗？

有时新手会发现，明明设置了：

lv_obj_set_height(slider, 8);

但滑条看起来还是很高。

原因通常是：

旋钮比轨道高。

比如轨道高度是 8，但旋钮高度是 24。

视觉上看，整个控件占用的高度就会接近 24。

这是正常的。

可以这样理解：

• lv_obj_set_height(slider, 8)：设置轨道区域高度。
• LV_PART_KNOB 的 height：设置拖动旋钮高度。

如果想让滑条整体更细，可以把旋钮也设置小一点：

lv_obj_set_style_width(slider, 16, LV_PART_KNOB);
lv_obj_set_style_height(slider, 16, LV_PART_KNOB);

如果想让用户更容易拖动，可以让旋钮稍微大一点。

UI 开发里经常需要在“好看”和“好用”之间做平衡。

---

十二、做一行亮度调节

实际界面里，滑条经常和文字放在一行。

例如：

亮度    [ =======o--- ]    70%

这个结构可以用 Flex 布局实现。

事件回调：

static void brightness_event_cb(lv_event_t * e)
{
    lv_obj_t * slider = lv_event_get_target(e);
    lv_obj_t * value_label = lv_event_get_user_data(e);

    lv_label_set_text_fmt(value_label,
                          "%" LV_PRId32 "%%",
                          lv_slider_get_value(slider));
}

创建界面：

void init_page(void)
{
    lv_obj_t * row = lv_obj_create(lv_screen_active());
    lv_obj_set_size(row, 340, 72);
    lv_obj_center(row);

    lv_obj_remove_flag(row, LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_style_bg_color(row, lv_color_hex(0x10243A), LV_PART_MAIN);
    lv_obj_set_style_bg_opa(row, LV_OPA_COVER, LV_PART_MAIN);
    lv_obj_set_style_border_width(row, 0, LV_PART_MAIN);
    lv_obj_set_style_radius(row, 8, LV_PART_MAIN);
    lv_obj_set_style_pad_left(row, 16, LV_PART_MAIN);
    lv_obj_set_style_pad_right(row, 16, LV_PART_MAIN);

    lv_obj_set_layout(row, LV_LAYOUT_FLEX);
    lv_obj_set_flex_flow(row, LV_FLEX_FLOW_ROW);
    lv_obj_set_flex_align(row,
                          LV_FLEX_ALIGN_START,
                          LV_FLEX_ALIGN_CENTER,
                          LV_FLEX_ALIGN_CENTER);
    lv_obj_set_style_pad_column(row, 14, LV_PART_MAIN);

    lv_obj_t * title = lv_label_create(row);
    lv_label_set_text(title, "Brightness");
    lv_obj_set_width(title, 90);

    lv_obj_t * slider = lv_slider_create(row);
    lv_obj_set_width(slider, 150);
    lv_obj_set_height(slider, 8);
    lv_slider_set_range(slider, 0, 100);
    lv_slider_set_value(slider, 70, LV_ANIM_OFF);

    lv_obj_t * value = lv_label_create(row);
    lv_label_set_text(value, "70%");
    lv_obj_set_width(value, 50);

    lv_obj_add_event_cb(slider, brightness_event_cb, LV_EVENT_VALUE_CHANGED, value);
}

这段代码已经很接近实际设置页面里的亮度调节行。

它包含三部分：

• 左边 label：说明调节什么。
• 中间 slider：用于调节数值。
• 右边 label：显示当前值。

这也是设备控制面板里很常见的结构。

---

十三、释放时再处理数值

前面说过，滑条拖动时：

LV_EVENT_VALUE_CHANGED

可能会连续触发。

如果只是更新 label，没有问题。

但如果每次数值变化都要执行比较重的操作，就要小心。

比如：

• 写入配置文件
• 保存到 Flash
• 发送网络请求
• 下发硬件控制命令

这类操作不适合在拖动过程中频繁执行。

这时可以监听：

LV_EVENT_RELEASED

例子：

static void slider_released_cb(lv_event_t * e)
{
    lv_obj_t * slider = lv_event_get_target(e);
    int32_t value = lv_slider_get_value(slider);

    printf("final value: %" LV_PRId32 "\n", value);
}

void init_page(void)
{
    lv_obj_t * slider = lv_slider_create(lv_screen_active());
    lv_obj_set_width(slider, 220);
    lv_obj_center(slider);

    lv_obj_add_event_cb(slider, slider_released_cb, LV_EVENT_RELEASED, NULL);
}

这样只有用户松手时，才处理最终值。

我一般会这样分工：

事件	适合做什么
LV_EVENT_VALUE_CHANGED	更新界面显示
LV_EVENT_RELEASED	保存最终值或下发控制命令

也就是说：

拖动过程中，只更新 UI。
松手之后，再处理业务。

这样界面响应会更轻，也更不容易频繁触发硬件或存储操作。

---

十四、反向滑条

正常滑条一般是从左到右越来越大。

但有些场景可能希望反过来。

比如：

从左到右越来越小。

可以通过设置范围来实现：

lv_slider_set_range(slider, 100, 0);

这样左侧是 100，右侧是 0。

简单例子：

lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_set_width(slider, 220);
lv_obj_center(slider);

lv_slider_set_range(slider, 100, 0);
lv_slider_set_value(slider, 50, LV_ANIM_OFF);

这种用法不算高频。

但知道有这个能力就行。

当你遇到反向控制、反向映射这类需求时，就可以从滑条范围入手。

---

十五、范围滑条是什么？

除了普通滑条，LVGL 还支持范围滑条。

普通滑条只有一个值：

0 -------- 70 -------- 100

范围滑条有两个值：

0 --- 20 ===== 70 --- 100

它可以用来表示一个区间。

比如：

• 温度范围
• 音量上下限
• 筛选价格区间
• 报警阈值范围

设置范围模式：

lv_slider_set_mode(slider, LV_SLIDER_MODE_RANGE);

设置右侧值：

lv_slider_set_value(slider, 70, LV_ANIM_OFF);

设置左侧值：

lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);

读取右侧值：

lv_slider_get_value(slider);

读取左侧值：

lv_slider_get_left_value(slider);

简单例子：

lv_obj_t * slider = lv_slider_create(lv_screen_active());
lv_obj_set_width(slider, 220);
lv_obj_center(slider);

lv_slider_set_range(slider, 0, 100);
lv_slider_set_mode(slider, LV_SLIDER_MODE_RANGE);
lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);
lv_slider_set_value(slider, 70, LV_ANIM_OFF);

新手阶段先掌握普通滑条就够了。

范围滑条知道有这个模式，后面遇到区间选择时再深入即可。

---

十六、完整示例：做一个亮度调节卡片

最后写一个完整示例。

目标是：

• 创建一个卡片。
• 显示标题 Brightness。
• 显示一个滑条。
• 显示当前百分比。
• 拖动时实时更新百分比。
• 松手时打印最终值。
• 设置滑条的主体、指示器和旋钮样式。

代码如下：

#include <stdio.h>
#include <lvgl.h>

static void slider_value_cb(lv_event_t * e)
{
    lv_obj_t * slider = lv_event_get_target(e);
    lv_obj_t * value_label = lv_event_get_user_data(e);

    lv_label_set_text_fmt(value_label,
                          "%" LV_PRId32 "%%",
                          lv_slider_get_value(slider));
}

static void slider_released_cb(lv_event_t * e)
{
    lv_obj_t * slider = lv_event_get_target(e);
    int32_t value = lv_slider_get_value(slider);

    printf("final value: %" LV_PRId32 "\n", value);
}

void init_page(void)
{
    lv_obj_t * card = lv_obj_create(lv_screen_active());
    lv_obj_set_size(card, 340, 130);
    lv_obj_center(card);

    lv_obj_remove_flag(card, LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_style_bg_color(card, lv_color_hex(0x10243A), LV_PART_MAIN);
    lv_obj_set_style_bg_opa(card, LV_OPA_COVER, LV_PART_MAIN);
    lv_obj_set_style_border_width(card, 0, LV_PART_MAIN);
    lv_obj_set_style_radius(card, 8, LV_PART_MAIN);
    lv_obj_set_style_pad_all(card, 16, LV_PART_MAIN);

    lv_obj_set_layout(card, LV_LAYOUT_FLEX);
    lv_obj_set_flex_flow(card, LV_FLEX_FLOW_COLUMN);
    lv_obj_set_style_pad_row(card, 16, LV_PART_MAIN);

    lv_obj_t * top = lv_obj_create(card);
    lv_obj_set_width(top, LV_PCT(100));
    lv_obj_set_height(top, LV_SIZE_CONTENT);
    lv_obj_remove_flag(top, LV_OBJ_FLAG_SCROLLABLE);
    lv_obj_set_style_bg_opa(top, LV_OPA_TRANSP, LV_PART_MAIN);
    lv_obj_set_style_border_width(top, 0, LV_PART_MAIN);
    lv_obj_set_style_pad_all(top, 0, LV_PART_MAIN);

    lv_obj_set_layout(top, LV_LAYOUT_FLEX);
    lv_obj_set_flex_flow(top, LV_FLEX_FLOW_ROW);
    lv_obj_set_flex_align(top,
                          LV_FLEX_ALIGN_SPACE_BETWEEN,
                          LV_FLEX_ALIGN_CENTER,
                          LV_FLEX_ALIGN_CENTER);

    lv_obj_t * title = lv_label_create(top);
    lv_label_set_text(title, "Brightness");
    lv_obj_set_style_text_color(title, lv_color_hex(0xF4F7FB), LV_PART_MAIN);

    lv_obj_t * value = lv_label_create(top);
    lv_label_set_text(value, "70%");
    lv_obj_set_style_text_color(value, lv_color_hex(0xF4F7FB), LV_PART_MAIN);

    lv_obj_t * slider = lv_slider_create(card);
    lv_obj_set_width(slider, LV_PCT(100));
    lv_obj_set_height(slider, 8);

    lv_slider_set_range(slider, 0, 100);
    lv_slider_set_value(slider, 70, LV_ANIM_OFF);

    lv_obj_set_style_bg_color(slider, lv_color_hex(0x3A4B61), LV_PART_MAIN);
    lv_obj_set_style_bg_opa(slider, LV_OPA_COVER, LV_PART_MAIN);
    lv_obj_set_style_radius(slider, LV_RADIUS_CIRCLE, LV_PART_MAIN);

    lv_obj_set_style_bg_color(slider, lv_color_hex(0x2F91FF), LV_PART_INDICATOR);
    lv_obj_set_style_bg_opa(slider, LV_OPA_COVER, LV_PART_INDICATOR);
    lv_obj_set_style_radius(slider, LV_RADIUS_CIRCLE, LV_PART_INDICATOR);

    lv_obj_set_style_bg_color(slider, lv_color_hex(0xFFFFFF), LV_PART_KNOB);
    lv_obj_set_style_bg_opa(slider, LV_OPA_COVER, LV_PART_KNOB);
    lv_obj_set_style_width(slider, 24, LV_PART_KNOB);
    lv_obj_set_style_height(slider, 24, LV_PART_KNOB);

    lv_obj_add_event_cb(slider, slider_value_cb, LV_EVENT_VALUE_CHANGED, value);
    lv_obj_add_event_cb(slider, slider_released_cb, LV_EVENT_RELEASED, NULL);
}

这个例子把滑条最常用的内容放在一起了：

• 创建滑条。
• 设置范围。
• 设置初始值。
• 读取当前值。
• 显示百分比。
• 监听值变化。
• 监听释放事件。
• 设置主体、指示器、旋钮样式。
• 用 Flex 布局组合标题、数值和滑条。

这已经很接近真实设备控制界面里的亮度调节卡片。

---

十七、这一篇先记住什么？

这一篇把 lv_slider 的基础用法讲完了。

先记住下面这些点：

1. lv_slider 用来表示连续数值，不是简单开关。
2. 创建滑条用 lv_slider_create()。
3. 设置范围用 lv_slider_set_range()。
4. 设置当前值用 lv_slider_set_value()。
5. 读取当前值用 lv_slider_get_value()。
6. 滑条值变化事件用 LV_EVENT_VALUE_CHANGED。
7. 用户松手事件用 LV_EVENT_RELEASED。
8. 滑条样式主要有三个 part：LV_PART_MAIN、LV_PART_INDICATOR、LV_PART_KNOB。
9. 轨道大小和旋钮大小不是一回事。
10. 百分比显示通常用 label 配合 lv_label_set_text_fmt()。

学完滑条之后，我们已经接触了三类典型交互：

• 按钮：一次性动作。
• 开关：开 / 关状态。
• 滑条：连续数值。

下一篇可以继续讲 lv_arc。

它和滑条有点像，也是在表达一个数值。

只不过，滑条是直线，lv_arc 是圆弧。