refactor(ui/slider): improve track/thumb initialization and validation

Rename track/thumb accessors from set_track/set_thumb to get_track/get_thumb.
Add private init methods and a constant THUMB_WIDTH.
Add validation to set_width with log and assert.
Modify set_height to assume non-null m_thumb.

include/Cubed/dev_panel.hpp

@@ -53,7 +53,6 @@ private:
     int m_samples_idx = 1;
     int m_threads = 1;
     int m_chunk_style = 0;
-    void show_about_table_bar();
     void show_biome_table_bar();
     void show_time_table_bar();
     void show_cave_table_bar();

include/Cubed/scene/credits_scene.hpp

@@ -0,0 +1,20 @@
+#pragma once
+
+#include "Cubed/scene/scene.hpp"
+#include "Cubed/ui/credits_ui.hpp"
+namespace Cubed {
+class SceneManager;
+class CreditsScene : public Scene {
+public:
+    CreditsScene(SceneManager& scene_manager);
+    void update(float dt) override;
+    void render(Renderer& renderer) override;
+    bool handle_event(const Event& e) override;
+    void on_enter() override;
+    SceneManager& scene_manager();
+
+private:
+    SceneManager& m_scene_manager;
+    CreditsUI m_ui;
+};
+} // namespace Cubed

include/Cubed/scene/scene.hpp

@@ -3,7 +3,7 @@
 namespace Cubed {
 class Renderer;
 
-enum class SceneType { MAIN_MENU, WORLD };
+enum class SceneType { MAIN_MENU, WORLD, CREDITS };
 
 class Scene {
 public:

include/Cubed/scene/world_scene.hpp

@@ -46,8 +46,10 @@ private:
     std::shared_ptr<NetworkClient> m_client;
     ClientWorld m_client_world;
     bool m_paused = false;
+    bool m_show_hud = true;
+    bool m_show_dev_pannel = true;
     PauseMenuUIManager m_pasue_menu;
-    WorldUIManager m_ui_manager;
+    WorldUIManager m_hud_ui;
     const Argument& m_argument;
 };
 } // namespace Cubed

include/Cubed/ui/column_layout.hpp

@@ -15,7 +15,7 @@ public:
     float width() const override;
     float height() const override;
 
-    void set_spacing(int spacing);
+    ColumnLayout& set_spacing(int spacing);
     // No need for parent node pointer; do not modify children's anchors and
     // scale.
 

include/Cubed/ui/credits_ui.hpp

@@ -0,0 +1,17 @@
+#pragma once
+
+#include "Cubed/ui/ui_manager.hpp"
+namespace Cubed {
+
+class CreditsScene;
+
+class CreditsUI : public UIManager {
+public:
+    CreditsUI(CreditsScene& m_scene);
+    void init() override;
+
+private:
+    bool handle_key_event(const KeyEvent& e) override;
+    CreditsScene& m_scene;
+};
+} // namespace Cubed

include/Cubed/ui/image.hpp

@@ -21,8 +21,17 @@ public:
     Image& set_scale(float scale);
     float scale() const;
 
+    Image& set_height(float height);
+    Image& set_width(float width);
+
+    Image& set_fill(bool fill);
+
 private:
     void on_render(Renderer& renderer) override;
+    void on_update(float dt) override;
+    float m_width = 0.0f;
+    float m_height = 0.0f;
+    bool m_fill = false;
 
     const Texture* m_texture = nullptr;
     glm::vec2 m_pos{0.0f, 0.0f};

include/Cubed/ui/slider.hpp

@@ -0,0 +1,50 @@
+#pragma once
+
+#include "Cubed/ui/image.hpp"
+#include "Cubed/ui/widget.hpp"
+
+namespace Cubed {
+class Slider : public Widget {
+public:
+    Slider(Widget* parent);
+
+    Slider& set_slider(float* value, const float& min, const float& max);
+
+    Image& get_track();
+    Image& get_thumb();
+
+    float width() const override;
+    float height() const override;
+
+    Slider& set_scale(float scale);
+    Slider& set_width(float width);
+    Slider& set_height(float h);
+
+    bool handle_mouse_move_event(const MouseMoveEvent& e) override;
+    bool handle_mouse_button_event(const MouseButtonEvent& e) override;
+
+private:
+    static constexpr float THUMB_WIDTH = 5.0f;
+
+    void init_track();
+    void init_thumb();
+
+    void update_value(float mouse_x);
+
+    void on_update(float) override;
+
+    void on_render(Renderer& renderer) override;
+
+    std::unique_ptr<Image> m_track;
+    std::unique_ptr<Image> m_thumb;
+    float m_scale = 1.0f;
+    float m_width = 0.0f;
+    float m_height = 0.0f;
+    float m_xpos = 0.0f;
+    bool m_dragging = false;
+    bool m_inside = false;
+    float* m_value = nullptr;
+    float m_min = 0;
+    float m_max = 0;
+};
+} // namespace Cubed

src/CMakeLists.txt

@@ -71,4 +71,7 @@ target_sources(${PROJECT_NAME}
         ui/rect.cpp
         ui/ui_manager.cpp
         ui/pause_menu_ui_manager.cpp
+        scene/credits_scene.cpp
+        ui/credits_ui.cpp
+        ui/slider.cpp
 )

src/app.cpp

@@ -23,12 +23,10 @@ App::App()
 App::~App() {}
 void App::cursor_position_callback(GLFWwindow* window, double xpos,
                                    double ypos) {
-    ImGuiIO& io = ImGui::GetIO();
-
     App* app = static_cast<App*>(glfwGetWindowUserPointer(window));
 
     ASSERT_MSG(app, "nullptr");
-    if (io.WantCaptureMouse && app->m_window.is_enable_imgui()) {
+    if (app->m_window.is_enable_imgui()) {
         ImGui_ImplGlfw_CursorPosCallback(window, xpos, ypos);
         return;
     }

src/dev_panel.cpp

@@ -80,7 +80,6 @@ void DevPanel::render() {
         show_player_tab_item();
         show_items_tab_item();
         show_shader_tab_item();
-        show_about_table_bar();
 
         ImGui::EndTabBar();
     }
@@ -89,40 +88,6 @@ void DevPanel::render() {
     ImGui_ImplOpenGL3_RenderDrawData(ImGui::GetDrawData());
 }
 
-void DevPanel::show_about_table_bar() {
-    if (ImGui::BeginTabItem("about")) {
-        ImGui::Text(
-            "Cubed - A cube game like Minecraft, using C++ and OpenGL.");
-        ImGui::Text("Author: zhenyan121");
-        ImGui::Separator();
-        ImGui::Text("Libraries Used");
-        ImGui::Text("glad");
-        ImGui::Text("GLFW");
-        ImGui::Text("SOIL2");
-        ImGui::Text("GLM");
-        ImGui::Text("FreeType");
-        ImGui::Text("toml++");
-        ImGui::Text("Dear ImGui");
-        ImGui::Text("Tbb");
-        ImGui::Text("Asio");
-        ImGui::Text("protobuf");
-        ImGui::Text("zstd");
-        ImGui::Text("OpenAl Soft");
-        ImGui::Text("dr_libs");
-        ImGui::Separator();
-        ImGui::Text("Music");
-        ImGui::Text("'Find a Peaceful Place' by ROZKOL (Free Music Archive), "
-                    "CC BY 4.0.");
-        ImGui::Separator();
-        ImGui::Text("Special Thanks");
-        ImGui::Text("TANGERIME");
-        ImGui::Text("SkyOnPole");
-        ImGui::Text("free_w_cloud");
-        ImGui::Text("Last but not least, thanks to you");
-        ImGui::EndTabItem();
-    }
-}
-
 void DevPanel::show_biome_table_bar() {
 
     if (ImGui::BeginTabBar("Biome")) {

src/scene/credits_scene.cpp

@@ -0,0 +1,18 @@
+#include "Cubed/scene/credits_scene.hpp"
+
+namespace Cubed {
+CreditsScene::CreditsScene(SceneManager& scene_manager)
+    : m_scene_manager(scene_manager), m_ui(*this) {}
+
+void CreditsScene::update(float dt) { m_ui.update(dt); }
+void CreditsScene::render(Renderer& renderer) { m_ui.render(renderer); }
+bool CreditsScene::handle_event(const Event& e) {
+    if (m_ui.handle_event(e)) {
+        return true;
+    }
+    return false;
+}
+void CreditsScene::on_enter() { m_ui.init(); }
+SceneManager& CreditsScene::scene_manager() { return m_scene_manager; }
+
+} // namespace Cubed

src/scene/scene_manager.cpp

@@ -1,5 +1,6 @@
 #include "Cubed/scene/scene_manager.hpp"
 
+#include "Cubed/scene/credits_scene.hpp"
 #include "Cubed/scene/main_menu_scene.hpp"
 #include "Cubed/scene/world_scene.hpp"
 
@@ -88,6 +89,8 @@ std::unique_ptr<Scene> SceneManager::create_scene(SceneType type) {
         return std::make_unique<WorldScene>(*this);
     case SceneType::MAIN_MENU:
         return std::make_unique<MainMenuScene>(*this);
+    case SceneType::CREDITS:
+        return std::make_unique<CreditsScene>(*this);
     }
 
     std::string err = std::format("Unknown Scene");

src/scene/world_scene.cpp

@@ -8,7 +8,7 @@ WorldScene::WorldScene(SceneManager& scene_manager)
     : m_scene_manager(scene_manager), m_dev_panel(*this),
       m_client_world(scene_manager.app().audio(), scene_manager.app().config(),
                      *this),
-      m_pasue_menu(*this), m_ui_manager(*this),
+      m_pasue_menu(*this), m_hud_ui(*this),
       m_argument(scene_manager.app().argument()) {}
 
 WorldScene::~WorldScene() {
@@ -18,41 +18,45 @@ WorldScene::~WorldScene() {
 }
 
 void WorldScene::update(float dt) {
+
+    m_client_world.update(dt);
+    m_camera.update_move_camera();
+    m_client_world.get_audio().update_listener(m_camera.get_camera_pos(),
+                                               m_camera.get_camera_front(),
+                                               glm::vec3(0, 1, 0));
+
+    /*
+    const auto& player = m_client_world.get_player();
+    if (player_gait != player.get_gait()) {
+        player_gait = player.get_gait();
+        float fov = m_client_world.get("player.fov", 70.0f);
+        if (player_gait == Gait::WALK) {
+            m_renderer.update_fov(fov);
+        }
+        if (player_gait == Gait::RUN) {
+            m_renderer.update_fov(fov + 5.0f);
+        }
+    }*/
     if (m_paused) {
         m_pasue_menu.update(dt);
     } else {
-        m_client_world.update(dt);
-        m_camera.update_move_camera();
-        m_client_world.get_audio().update_listener(m_camera.get_camera_pos(),
-                                                   m_camera.get_camera_front(),
-                                                   glm::vec3(0, 1, 0));
 
-        /*
-        const auto& player = m_client_world.get_player();
-        if (player_gait != player.get_gait()) {
-            player_gait = player.get_gait();
-            float fov = m_client_world.get("player.fov", 70.0f);
-            if (player_gait == Gait::WALK) {
-                m_renderer.update_fov(fov);
-            }
-            if (player_gait == Gait::RUN) {
-                m_renderer.update_fov(fov + 5.0f);
-            }
-        }*/
-        m_ui_manager.update(dt);
+        m_hud_ui.update(dt);
     }
 }
 
 void WorldScene::render(Renderer& renderer) {
 
     renderer.render_world(m_client_world);
-
-    m_ui_manager.render(renderer);
-
+    if (m_show_hud) {
+        m_hud_ui.render(renderer);
+    }
     if (m_paused) {
         m_pasue_menu.render(renderer);
     } else {
-        renderer.render_dev_panel(m_dev_panel);
+        if (m_show_dev_pannel && m_show_hud) {
+            renderer.render_dev_panel(m_dev_panel);
+        }
     }
 }
 bool WorldScene::handle_event(const Event& e) {
@@ -110,7 +114,7 @@ void WorldScene::on_enter() {
     m_scene_manager.app().window().set_camera(&m_camera);
     m_dev_panel.init();
     m_pasue_menu.init();
-    m_ui_manager.init();
+    m_hud_ui.init();
 
     m_scene_manager.app().window().set_game_running(true);
 }
@@ -131,7 +135,7 @@ bool WorldScene::handle_mouse_move_event(const MouseMoveEvent& e) {
             return true;
         }
     } else {
-        if (m_ui_manager.handle_event(e)) {
+        if (m_hud_ui.handle_event(e)) {
             return true;
         }
         if (m_camera.handle_event(e)) {
@@ -151,7 +155,7 @@ bool WorldScene::handle_mouse_button_event(const MouseButtonEvent& e) {
             return true;
         }
     } else {
-        if (m_ui_manager.handle_event(e)) {
+        if (m_hud_ui.handle_event(e)) {
             return true;
         }
         if (m_camera.handle_event(e)) {
@@ -169,7 +173,7 @@ bool WorldScene::handle_window_resize_event(const WindowResizeEvent& e) {
     if (m_pasue_menu.handle_event(e)) {
         return true;
     }
-    if (m_ui_manager.handle_event(e)) {
+    if (m_hud_ui.handle_event(e)) {
         return true;
     }
     if (m_camera.handle_event(e)) {
@@ -188,7 +192,7 @@ bool WorldScene::handle_mouse_wheel_event(const MouseWheelEvent& e) {
             return true;
         }
     } else {
-        if (m_ui_manager.handle_event(e)) {
+        if (m_hud_ui.handle_event(e)) {
             return true;
         }
         if (m_camera.handle_event(e)) {
@@ -209,12 +213,20 @@ bool WorldScene::handle_key_event(const KeyEvent& e) {
         set_pause(pasued);
         return true;
     }
+    if (e.key == Key::F1 && e.action == KeyAction::PRESS) {
+        m_show_hud = !m_show_hud;
+        return true;
+    }
+    if (e.key == Key::F12 && e.action == KeyAction::PRESS) {
+        m_show_dev_pannel = !m_show_dev_pannel;
+        return true;
+    }
     if (m_paused) {
         if (m_pasue_menu.handle_event(e)) {
             return true;
         }
     } else {
-        if (m_ui_manager.handle_event(e)) {
+        if (m_hud_ui.handle_event(e)) {
             return true;
         }
         if (m_camera.handle_event(e)) {

src/ui/button.cpp

@@ -30,11 +30,7 @@ bool Button::handle_mouse_move_event(const MouseMoveEvent& e) {
     }
     m_hovered = false;
 
-    if (Widget::handle_mouse_move_event(e)) {
-        return true;
-    }
-
-    return false;
+    return Widget::handle_mouse_move_event(e);
 }
 bool Button::handle_mouse_button_event(const MouseButtonEvent& e) {
     if (e.action == KeyAction::PRESS && e.key == MouseKey::LEFT_BUTTON) {
@@ -45,11 +41,7 @@ bool Button::handle_mouse_button_event(const MouseButtonEvent& e) {
         }
     }
 
-    if (Widget::handle_mouse_button_event(e)) {
-        return true;
-    }
-
-    return false;
+    return Widget::handle_mouse_button_event(e);
 }
 
 Button& Button::set_scale(float scale) {

src/ui/column_layout.cpp

@@ -22,7 +22,10 @@ float ColumnLayout::height() const {
     return m_window_height;
 }
 
-void ColumnLayout::set_spacing(int spacing) { m_spacing = spacing; }
+ColumnLayout& ColumnLayout::set_spacing(int spacing) {
+    m_spacing = spacing;
+    return *this;
+}
 
 void ColumnLayout::layout() {
     auto& children = Widget::children();

src/ui/credits_ui.cpp

@@ -0,0 +1,85 @@
+#include "Cubed/ui/credits_ui.hpp"
+
+#include "Cubed/app.hpp"
+#include "Cubed/scene/credits_scene.hpp"
+#include "Cubed/scene/scene_manager.hpp"
+#include "Cubed/ui/button.hpp"
+#include "Cubed/ui/column_layout.hpp"
+#include "Cubed/ui/image.hpp"
+#include "Cubed/ui/rect.hpp"
+
+namespace Cubed {
+CreditsUI::CreditsUI(CreditsScene& scene) : m_scene(scene) {}
+
+void CreditsUI::init() {
+    auto& renderer = m_scene.scene_manager().app().renderer();
+
+    auto image = std::make_unique<Image>(nullptr);
+    image->set_fill(true)
+        .set_image("texture/ui/background.png",
+                   m_scene.scene_manager().app().texture_manager())
+        .set_anchor(Anchor::TOP_LEFT)
+        .set_window_size(renderer.window_width(), renderer.window_height());
+
+    auto& rect = image->add_child<Rect>();
+    rect.set_fill(true).set_color(Color::BLACK).set_alpha(0.7f);
+
+    {
+        auto& button = rect.add_child<Button>();
+        auto& back = button.set_background<Image>();
+        back.set_image("texture/ui/button001.png",
+                       m_scene.scene_manager().app().texture_manager());
+        auto& fore = button.set_foreground<Label>();
+        fore.set_scale(0.5f).set_text("Return");
+        button.set_scale(4.0f)
+            .set_anchor(Anchor::BOTTOM_CENTER)
+            .set_offset({0, -20});
+        button.set_clicked([this]() { m_scene.scene_manager().request_pop(); });
+    }
+    {
+        auto& layout = rect.add_child<ColumnLayout>();
+        layout.set_spacing(20)
+            .set_anchor(Anchor::TOP_CENTER)
+            .set_offset({0, 20});
+        layout.add_child<Label>().set_text("Cubed");
+        auto add_text = [&](std::string_view view, float scale = 0.5f) {
+            layout.add_child<Label>().set_text(view).set_scale(scale);
+        };
+        add_text("A cube game like Minecraft, using C++ and OpenGL.");
+        add_text("Author: zhenyan121");
+        add_text("Libraries Used", 0.8f);
+        add_text("glad");
+        add_text("GLFW");
+        add_text("SOIL2");
+        add_text("GLM");
+        add_text("FreeType");
+        add_text("toml++");
+        add_text("Dear ImGui");
+        add_text("Tbb");
+        add_text("Asio");
+        add_text("protobuf");
+        add_text("zstd");
+        add_text("OpenAl Soft");
+        add_text("dr_libs");
+        add_text("Music", 0.8f);
+        add_text("'Find a Peaceful Place' by ROZKOL (Free Music Archive), CC "
+                 "BY 4.0.");
+        add_text("Special Thanks", 0.8f);
+        add_text("TANGERIME");
+        add_text("SkyOnPole");
+        add_text("free_w_cloud");
+        add_text("Last but not least, thanks to you");
+    }
+
+    m_root_widget = std::move(image);
+}
+
+bool CreditsUI::handle_key_event(const KeyEvent& e) {
+    if (e.key == Key::ESCAPE && e.action == KeyAction::PRESS) {
+        m_scene.scene_manager().request_pop();
+        return true;
+    }
+    return UIManager::handle_key_event(e);
+}
+
+} // namespace Cubed

src/ui/image.cpp

@@ -7,10 +7,24 @@ namespace Cubed {
 Image::Image(Widget* parent) : Widget(parent) {}
 
 void Image::on_render(Renderer& renderer) { renderer.render_image(*this); }
-
+void Image::on_update(float) {
+    if (m_fill) {
+        if (m_fill) {
+            if (!m_parent) {
+                m_width = m_window_width;
+                m_height = m_window_height;
+            } else {
+                m_width = m_parent->width();
+                m_height = m_parent->height();
+            }
+        }
+    }
+}
 Image& Image::set_image(const std::string& path,
                         TextureManager& texture_manager) {
     m_texture = texture_manager.get_image_texture(path);
+    m_width = m_texture->width();
+    m_height = m_texture->height();
     return *this;
 }
 Image& Image::set_scale(float scale) {
@@ -23,7 +37,7 @@ float Image::height() const {
         Logger::error("Image id {} not set image!", m_id);
         return 0.0f;
     }
-    return m_texture->height() * m_scale;
+    return m_height * m_scale;
 }
 
 float Image::width() const {
@@ -31,7 +45,21 @@ float Image::width() const {
         Logger::error("Image id {} not set image!", m_id);
         return 0.0f;
     }
-    return m_texture->width() * m_scale;
+    return m_width * m_scale;
+}
+
+Image& Image::set_height(float height) {
+    m_height = height;
+    return *this;
+}
+Image& Image ::set_width(float width) {
+    m_width = width;
+    return *this;
+}
+
+Image& Image::set_fill(bool fill) {
+    m_fill = fill;
+    return *this;
 }
 
 const Texture* Image::texture() const { return m_texture; }

src/ui/main_menu_ui_manager.cpp

@@ -6,6 +6,8 @@
 #include "Cubed/scene/scene_manager.hpp"
 #include "Cubed/ui/button.hpp"
 #include "Cubed/ui/column_layout.hpp"
+#include "version.hpp"
+
 namespace Cubed {
 
 MainMenuUIManager::MainMenuUIManager(MainMenuScene& scene) : m_scene(scene) {}
@@ -13,15 +15,16 @@ MainMenuUIManager::~MainMenuUIManager() {}
 
 void MainMenuUIManager::init() {
 
-    auto rect = std::make_unique<Rect>(nullptr);
+    auto image = std::make_unique<Image>(nullptr);
 
-    rect->set_fill(true);
-    rect->set_anchor(Anchor::TOP_LEFT);
-    rect->set_color(Color::WHITE);
+    image->set_fill(true);
+    image->set_anchor(Anchor::TOP_LEFT);
+    image->set_image("texture/ui/background.png",
+                     m_scene.scene_manager().app().texture_manager());
     auto& renderer = m_scene.scene_manager().app().renderer();
-    rect->set_window_size(renderer.window_width(), renderer.window_height());
+    image->set_window_size(renderer.window_width(), renderer.window_height());
 
-    auto& layout = rect->add_child<ColumnLayout>();
+    auto& layout = image->add_child<ColumnLayout>();
     layout.set_spacing(20);
     layout.set_anchor(Anchor::CENTER);
     layout.set_window_size(renderer.window_width(), renderer.window_height());
@@ -39,10 +42,22 @@ void MainMenuUIManager::init() {
         });
         start_game_button.set_scale(4.0f);
     }
-
-    auto& exit_game = layout.add_child<Button>();
-
     {
+        auto& button = layout.add_child<Button>();
+
+        auto& back = button.set_background<Image>();
+        back.set_image("texture/ui/button001.png",
+                       m_scene.scene_manager().app().texture_manager());
+        auto& fore = button.set_foreground<Label>();
+        fore.set_text("Credits");
+        fore.set_scale(0.6f);
+        button.set_clicked([this]() {
+            m_scene.scene_manager().request_push(SceneType::CREDITS);
+        });
+        button.set_scale(4.0f);
+    }
+    {
+        auto& exit_game = layout.add_child<Button>();
         auto& back = exit_game.set_background<Image>();
         back.set_image("texture/ui/button001.png",
                        m_scene.scene_manager().app().texture_manager());
@@ -53,9 +68,24 @@ void MainMenuUIManager::init() {
             m_scene.scene_manager().app().window().should_close_window();
         });
     }
-    m_widgets.try_emplace("background", rect.get());
+    m_widgets.try_emplace("background", image.get());
     m_widgets.try_emplace("main menu layout", &layout);
-    m_root_widget = std::move(rect);
+    {
+        auto& info_layout = image->add_child<ColumnLayout>();
+        info_layout.set_anchor(Anchor::BOTTOM_LEFT);
+        info_layout.set_spacing(10);
+        auto& version = info_layout.add_child<Label>();
+        version.set_scale(0.5f);
+        std::string version_str = "Cubed: " CUBED_VERSION;
+#ifdef DEBUG_MODE
+        version_str.append("-debug");
+#else
+        version_str.append("-release");
+#endif
+        version.set_text(version_str);
+    }
+
+    m_root_widget = std::move(image);
 }
 
 } // namespace Cubed

src/ui/slider.cpp

@@ -0,0 +1,146 @@
+#include "Cubed/ui/slider.hpp"
+
+#include "Cubed/tools/cubed_assert.hpp"
+#include "Cubed/tools/log.hpp"
+
+#include <algorithm>
+namespace Cubed {
+
+Slider::Slider(Widget* parent) : Widget(parent) {
+    init_thumb();
+    init_track();
+}
+
+Slider& Slider::set_slider(float* value, const float& min, const float& max) {
+    m_value = value;
+    m_min = min;
+    m_max = max;
+    return *this;
+}
+
+Image& Slider::get_track() { return *m_track; }
+Image& Slider::get_thumb() { return *m_thumb; }
+
+void Slider::init_track() {
+    m_track = std::make_unique<Image>(this);
+
+    m_track->set_fill(true);
+
+    m_track->set_anchor(Anchor::TOP_LEFT);
+}
+
+void Slider::init_thumb() {
+    m_thumb = std::make_unique<Image>(this);
+
+    m_thumb->set_height(height());
+
+    m_thumb->set_width(THUMB_WIDTH);
+
+    m_thumb->set_anchor(Anchor::TOP_LEFT);
+
+    m_thumb->set_scale(m_scale);
+}
+
+float Slider::width() const { return m_width * m_scale; }
+float Slider::height() const { return m_height * m_scale; }
+
+Slider& Slider::set_scale(float scale) {
+    m_scale = scale;
+    m_track->set_width(width()).set_height(height());
+    m_thumb->set_height(height());
+    return *this;
+}
+
+Slider& Slider::set_width(float width) {
+    if (!m_thumb || width < m_thumb->width()) {
+        Logger::error("Width is too small set failed!");
+        ASSERT(false);
+        return *this;
+    }
+    m_width = width;
+    return *this;
+}
+
+Slider& Slider::set_height(float h) {
+    m_height = h;
+    ASSERT_MSG(m_thumb, "Thumb is nullptr !");
+    m_thumb->set_height(height());
+    return *this;
+}
+
+bool Slider::handle_mouse_move_event(const MouseMoveEvent& e) {
+    auto p = pos();
+    m_xpos = e.xpos;
+    if (e.xpos >= p.x && e.xpos <= p.x + width() && e.ypos >= p.y &&
+        e.ypos <= p.y + height()) {
+        m_inside = true;
+    } else {
+        m_inside = false;
+    }
+    if (m_dragging && m_value) {
+        update_value(e.xpos);
+        return true;
+    }
+    return Widget::handle_mouse_move_event(e);
+}
+bool Slider::handle_mouse_button_event(const MouseButtonEvent& e) {
+    if (e.action == KeyAction::PRESS && e.key == MouseKey::LEFT_BUTTON) {
+        if (m_inside) {
+            m_dragging = true;
+            update_value(m_xpos);
+            return true;
+        }
+    }
+
+    if (e.action == KeyAction::RELEASE && e.key == MouseKey::LEFT_BUTTON) {
+        if (m_dragging) {
+            m_dragging = false;
+            return true;
+        }
+    }
+
+    return Widget::handle_mouse_button_event(e);
+}
+
+void Slider::update_value(float mouse_x) {
+    if (width() <= 0.0f) {
+        Logger::info("Slider Width is less then 0");
+        return;
+    }
+    float t = std::clamp((mouse_x - pos().x) / width(), 0.0f, 1.0f);
+
+    *m_value = m_min + t * (m_max - m_min);
+}
+
+void Slider::on_update(float) {
+    if (!m_value || !m_thumb || !m_track) {
+        Logger::error("Please Set value and thumb and track");
+        ASSERT(false);
+        return;
+    }
+    float range = m_max - m_min;
+    if (range <= 0.0f) {
+        Logger::error("Range {} is <= 0.0f", range);
+        ASSERT(false);
+        return;
+    }
+
+    float t = (*m_value - m_min) / range;
+
+    t = std::clamp(t, 0.0f, 1.0f);
+
+    float offset = t * (width() - m_thumb->width());
+
+    m_thumb->set_offset({offset, 0});
+}
+
+void Slider::on_render(Renderer& renderer) {
+    if (m_track) {
+        m_track->render(renderer);
+    }
+    if (m_thumb) {
+        m_thumb->render(renderer);
+    }
+}
+
+} // namespace Cubed