From c545d4ffcb93e95d8226dff996fcb38f92c48d14 Mon Sep 17 00:00:00 2001
From: Mustafa Quraish <mustafaq9@gmail.com>
Date: Sat, 11 Sep 2021 00:35:00 -0400
Subject: [PATCH] WidgetGallery: Add GUI::ValueSlider widget

This was a cool slider and was missing from the gallery completely.
Vertical mode for this isn't enabled, and it looked awfully crammed
in the bottom along with the other horizontal sliders, so for now
I've just added this to the top, and it controls the opacity of the
image along with the opacity slider.
---
 .../WidgetGallery/GalleryGML/SlidersTab.gml   | 24 +++++++++++++++++--
 .../Demos/WidgetGallery/GalleryWidget.cpp     | 10 ++++++++
 Userland/Demos/WidgetGallery/GalleryWidget.h  |  1 +
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/Userland/Demos/WidgetGallery/GalleryGML/SlidersTab.gml b/Userland/Demos/WidgetGallery/GalleryGML/SlidersTab.gml
index d2a5e88a78..e0c0a39be4 100644
--- a/Userland/Demos/WidgetGallery/GalleryGML/SlidersTab.gml
+++ b/Userland/Demos/WidgetGallery/GalleryGML/SlidersTab.gml
@@ -10,8 +10,28 @@
             margins: [8]
         }
 
-        @GUI::OpacitySlider {
-            name: "opacity_slider"
+        @GUI::GroupBox {
+            max_height: 30
+
+            layout: @GUI::HorizontalBoxLayout {
+                margins: [8]
+            }
+
+            @GUI::OpacitySlider {
+                name: "opacity_slider"
+                tooltip: "Opacity Slider"
+            }
+
+            @GUI::VerticalSeparator {
+            }
+
+            @GUI::ValueSlider {
+                name: "opacity_value_slider"
+                min: 0
+                max: 100
+                value: 100
+                tooltip: "Value Slider"
+            }
         }
 
         @GUI::HorizontalSeparator {
diff --git a/Userland/Demos/WidgetGallery/GalleryWidget.cpp b/Userland/Demos/WidgetGallery/GalleryWidget.cpp
index badda01419..256afba173 100644
--- a/Userland/Demos/WidgetGallery/GalleryWidget.cpp
+++ b/Userland/Demos/WidgetGallery/GalleryWidget.cpp
@@ -25,6 +25,7 @@
 #include <LibGUI/SpinBox.h>
 #include <LibGUI/TabWidget.h>
 #include <LibGUI/TableView.h>
+#include <LibGUI/ValueSlider.h>
 #include <LibGfx/FontDatabase.h>
 #include <LibGfx/Palette.h>
 
@@ -217,6 +218,15 @@ GalleryWidget::GalleryWidget()
 
     m_opacity_slider->on_change = [&](auto percent) {
         m_opacity_imagewidget->set_opacity_percent(percent);
+        m_opacity_value_slider->set_value(percent);
+    };
+
+    m_opacity_value_slider = sliders_tab.find_descendant_of_type_named<GUI::ValueSlider>("opacity_value_slider");
+    m_opacity_value_slider->set_range(0, 100);
+
+    m_opacity_value_slider->on_change = [&](auto percent) {
+        m_opacity_imagewidget->set_opacity_percent(percent);
+        m_opacity_slider->set_value(percent);
     };
 
     auto& wizards_tab = tab_widget.add_tab<GUI::Widget>("Wizards");
diff --git a/Userland/Demos/WidgetGallery/GalleryWidget.h b/Userland/Demos/WidgetGallery/GalleryWidget.h
index ecbc0d44b4..42b4c52d9c 100644
--- a/Userland/Demos/WidgetGallery/GalleryWidget.h
+++ b/Userland/Demos/WidgetGallery/GalleryWidget.h
@@ -58,6 +58,7 @@ private:
     RefPtr<GUI::TableView> m_icons_tableview;
     RefPtr<GUI::TableView> m_cursors_tableview;
     RefPtr<GUI::OpacitySlider> m_opacity_slider;
+    RefPtr<GUI::ValueSlider> m_opacity_value_slider;
     RefPtr<GUI::ImageWidget> m_opacity_imagewidget;
 
     Vector<String> m_frame_shapes;