---

lv_slider 是 LVGL 中的滑塊控件，功能類似于你在音量調節、電量調節、亮度調節、滾動條等常見 UI 中見到的滑動條。它是 lv_bar 的子類，因此具有所有 lv_bar 的特性，并額外提供了可拖動的指針（滑塊）。

---

一、lv_slider 是什么？

• 是 lv_bar 的子類，擁有進度條的全部功能。
• 支持用戶通過觸控/鼠標拖動滑塊改變數值。
• 支持單向進度、**區間進度（雙滑塊）**模式。
• 可橫向或縱向使用。

---

二、創建一個滑塊

lv_obj_t *slider = lv_slider_create(lv_scr_act());  // 在當前屏幕創建滑塊
lv_obj_set_width(slider, 200);                      // 設置寬度
lv_obj_center(slider);                              // 居中顯示

設置滑塊的范圍和初始值

lv_slider_set_range(slider, 0, 100);                // 設置范圍
lv_slider_set_value(slider, 40, LV_ANIM_OFF);       // 設置初始值（無動畫）

---

三、響應滑塊事件

用戶拖動滑塊時，你通常會監聽 LV_EVENT_VALUE_CHANGED 事件獲取當前值。

void slider_event_cb(lv_event_t *e)
{if(lv_event_get_code(e) == LV_EVENT_VALUE_CHANGED) {lv_obj_t *slider = lv_event_get_target(e);int val = lv_slider_get_value(slider);printf("滑塊值: %d\n", val);}
}lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);

---

四、設置樣式

lv_slider 有三個主要部分可以設置樣式：

部位	對應區域
LV_PART_MAIN	背景槽（未填充的部分）
LV_PART_INDICATOR	已填充區域（進度）
LV_PART_KNOB	滑塊按鈕（可拖動的圓點）

示例：更改滑塊顏色和滑塊按鈕樣式

static lv_style_t style_knob;
lv_style_init(&style_knob);
lv_style_set_bg_color(&style_knob, lv_color_hex(0xff0000));
lv_style_set_radius(&style_knob, LV_RADIUS_CIRCLE);
lv_style_set_pad_all(&style_knob, 6); // 設置 knob 尺寸lv_obj_add_style(slider, &style_knob, LV_PART_KNOB);

---

五、縱向滑塊（垂直方向）

默認是橫向滑動。你可以通過設置尺寸為“瘦高”來做縱向滑動條：

lv_obj_set_size(slider, 20, 150); // 瘦長樣式

---

六、雙滑塊模式（范圍選擇）

LVGL 支持范圍滑塊（類似 A 點到 B 點的選區），需要啟用 LV_USE_SLIDER && LV_SLIDER_RANGE：

lv_slider_set_mode(slider, LV_SLIDER_MODE_RANGE);     // 啟用范圍模式
lv_slider_set_value(slider, 40, LV_ANIM_OFF);         // 設置右側滑塊值
lv_slider_set_left_value(slider, 20, LV_ANIM_OFF);    // 設置左側滑塊值

范圍滑塊適合做“區間選擇”，比如設置溫度上下限。

---

七、獲取滑塊的值

int val = lv_slider_get_value(slider);            // 當前滑塊值
int left = lv_slider_get_left_value(slider);      // 左側滑塊值（僅范圍模式下）

---

八、綜合示例

void create_slider(void)
{lv_obj_t *slider = lv_slider_create(lv_scr_act());lv_obj_set_width(slider, 200);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);
}

---

九、與標簽聯動顯示數值（進階示例）

static lv_obj_t *label;void slider_event_cb(lv_event_t *e)
{lv_obj_t *slider = lv_event_get_target(e);int val = lv_slider_get_value(slider);char buf[16];lv_snprintf(buf, sizeof(buf), "%d%%", val);lv_label_set_text(label, buf);
}void create_slider_with_label(void)
{lv_obj_t *slider = lv_slider_create(lv_scr_act());lv_obj_set_width(slider, 200);lv_obj_align(slider, LV_ALIGN_CENTER, 0, -20);lv_slider_set_range(slider, 0, 100);lv_slider_set_value(slider, 30, LV_ANIM_OFF);lv_obj_add_event_cb(slider, slider_event_cb, LV_EVENT_VALUE_CHANGED, NULL);label = lv_label_create(lv_scr_act());lv_label_set_text(label, "30%");lv_obj_align(label, LV_ALIGN_CENTER, 0, 30);
}

---

十、總結

功能	API 示例
創建滑塊	lv_slider_create()
設置范圍	lv_slider_set_range(slider, min, max)
設置值	lv_slider_set_value(slider, val, anim)
獲取當前值	lv_slider_get_value(slider)
啟用范圍選擇模式	lv_slider_set_mode(slider, LV_SLIDER_MODE_RANGE)
設置左滑塊值	lv_slider_set_left_value(slider, val, anim)
設置樣式	lv_obj_add_style(slider, &style, part)

---