Feature: Slider in any directions. (#468)

Add the `SliderOption` option supporting:
```cpp
{
  Ref<T> value;
  ConstRef<T> min = T(0);
  ConstRef<T> max = T(100);
  ConstRef<T> increment = (max() - min()) / 20;
  GaugeDirection direction = GaugeDirection::Right;
  Color color_active = Color::White;
  Color color_inactive = Color::GrayDark;
};
```

In particular, this supports multiple direction. This resolves:
https://github.com/ArthurSonzogni/FTXUI/issues/467

This one do not support adding a label. The old constructors can still
be used to have a label.

CHANGELOG.md

@@ -16,6 +16,10 @@ current (development)
 ### Component:
 - Feature: Add the `Modal` component.
 - Feature: `Slider` supports taking references for all its arguments.
+- Feature: `Slider` supports `SliderOption`. It supports:
+    - multiple directions.
+    - multiple colors.
+    - various values (value, min, max, increment).
 - Improvement: The `Menu` keeps the focus when an entry is selected with the
   mouse.
 

CMakeLists.txt

@@ -132,10 +132,6 @@ target_link_libraries(component
   PUBLIC Threads::Threads
 )
 
-set_target_properties(screen PROPERTIES VERSION ${PROJECT_VERSION})
-set_target_properties(dom PROPERTIES VERSION ${PROJECT_VERSION})
-set_target_properties(component PROPERTIES VERSION ${PROJECT_VERSION})
-
 include(cmake/ftxui_set_options.cmake)
 ftxui_set_options(screen)
 ftxui_set_options(dom)

cmake/ftxui_set_options.cmake

@@ -7,7 +7,11 @@ endif()
 
 
 function(ftxui_set_options library)
-  set_target_properties(${library} PROPERTIES OUTPUT_NAME "ftxui-${library}")
+  set_target_properties(${library} PROPERTIES
+    VERSION ${PROJECT_VERSION}
+    CXX_STANDARD 20
+    OUTPUT_NAME "ftxui-${library}"
+  )
 
   if(CLANG_TIDY_EXE AND FTXUI_CLANG_TIDY)
     set_target_properties(${library}

cmake/ftxui_test.cmake

@@ -34,6 +34,7 @@ add_executable(tests
   src/ftxui/component/modal_test.cpp
   src/ftxui/component/radiobox_test.cpp
   src/ftxui/component/receiver_test.cpp
+  src/ftxui/component/slider_test.cpp
   src/ftxui/component/resizable_split_test.cpp
   src/ftxui/component/screen_interactive_test.cpp
   src/ftxui/component/terminal_input_parser_test.cpp

examples/CMakeLists.txt

@@ -4,6 +4,9 @@ function(example name)
   target_link_libraries(ftxui_example_${name} PUBLIC ${DIRECTORY_LIB})
   file(RELATIVE_PATH dir ${EXAMPLES_DIR} ${CMAKE_CURRENT_SOURCE_DIR})
   set_property(GLOBAL APPEND PROPERTY FTXUI::EXAMPLES ${dir}/${name})
+  set_target_properties(ftxui_example_${name} PROPERTIES
+    CXX_STANDARD 20
+  )
 endfunction(example)
 
 add_subdirectory(component)

examples/component/CMakeLists.txt

@@ -33,6 +33,7 @@ example(radiobox_in_frame)
 example(renderer)
 example(resizable_split)
 example(slider)
+example(slider_direction)
 example(slider_rgb)
 example(tab_horizontal)
 example(tab_vertical)

examples/component/slider_direction.cpp

@@ -0,0 +1,37 @@
+#include <array>                               // for array
+#include <cmath>                               // for sin
+#include <ftxui/component/component_base.hpp>  // for ComponentBase
+#include <ftxui/dom/elements.hpp>  // for size, GaugeDirection, GaugeDirection::Up, GREATER_THAN, HEIGHT
+#include <memory>  // for shared_ptr, __shared_ptr_access
+
+#include "ftxui/component/captured_mouse.hpp"  // for ftxui
+#include "ftxui/component/component.hpp"  // for Horizontal, Slider, operator|=
+#include "ftxui/component/screen_interactive.hpp"  // for ScreenInteractive
+
+using namespace ftxui;
+
+int main(int argc, const char* argv[]) {
+  auto screen = ScreenInteractive::TerminalOutput();
+  std::array<int, 30> values;
+  for (int i = 0; i < values.size(); ++i) {
+    values[i] = 50 + 20 * std::sin(i * 0.3);
+  }
+
+  auto layout_horizontal = Container::Horizontal({});
+  for (int i = 0; i < values.size(); ++i) {
+    layout_horizontal->Add(Slider<int>({
+        .value = &values[i],
+        .max = 100,
+        .increment = 5,
+        .direction = GaugeDirection::Up,
+    }));
+  }
+
+  layout_horizontal |= size(HEIGHT, GREATER_THAN, 20);
+
+  screen.Loop(layout_horizontal);
+}
+
+// Copyright 2020 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.

include/ftxui/component/component.hpp

@@ -10,7 +10,7 @@
 #include "ftxui/component/component_base.hpp"  // for Component, Components
 #include "ftxui/component/component_options.hpp"  // for ButtonOption, CheckboxOption, MenuOption
 #include "ftxui/dom/elements.hpp"  // for Element
-#include "ftxui/util/ref.hpp"  // for Ref, ConstStringRef, ConstStringListRef, StringRef
+#include "ftxui/util/ref.hpp"  // for ConstRef, Ref, ConstStringRef, ConstStringListRef, StringRef
 
 namespace ftxui {
 struct ButtonOption;
@@ -82,6 +82,9 @@ Component Slider(ConstStringRef label,
                  ConstRef<long> min = 0l,
                  ConstRef<long> max = 100l,
                  ConstRef<long> increment = 5l);
+// General slider type without support for a `label`.
+template <typename T>  // T = {int, float, long}
+Component Slider(SliderOption<T> options = {});
 
 Component ResizableSplitLeft(Component main, Component back, int* main_size);
 Component ResizableSplitRight(Component main, Component back, int* main_size);

include/ftxui/component/component_options.hpp

@@ -3,8 +3,8 @@
 
 #include <chrono>                         // for milliseconds
 #include <ftxui/component/animation.hpp>  // for Duration, QuadraticInOut, Function
-#include <ftxui/dom/elements.hpp>         // for Element
+#include <ftxui/dom/elements.hpp>  // for Element, GaugeDirection, GaugeDirection::Right
-#include <ftxui/util/ref.hpp>             // for Ref
+#include <ftxui/util/ref.hpp>  // for Ref, ConstRef
 #include <functional>          // for function
 #include <optional>            // for optional
 #include <string>              // for string
@@ -164,6 +164,19 @@ struct RadioboxOption {
   Ref<int> focused_entry = 0;
 };
 
+// @brief Option for the `Slider` component.
+// @ingroup component
+template <typename T>
+struct SliderOption {
+  Ref<T> value;
+  ConstRef<T> min = T(0);
+  ConstRef<T> max = T(100);
+  ConstRef<T> increment = (max() - min()) / 20;
+  GaugeDirection direction = GaugeDirection::Right;
+  Color color_active = Color::White;
+  Color color_inactive = Color::GrayDark;
+};
+
 }  // namespace ftxui
 
 #endif /* end of include guard: FTXUI_COMPONENT_COMPONENT_OPTIONS_HPP */

include/ftxui/screen/screen.hpp

@@ -2,7 +2,7 @@
 #define FTXUI_SCREEN_SCREEN_HPP
 
 #include <memory>
-#include <string>  // for string, allocator, basic_string
+#include <string>  // for allocator, string, basic_string
 #include <vector>  // for vector
 
 #include "ftxui/screen/box.hpp"       // for Box

src/ftxui/component/animation.cpp

@@ -1,4 +1,5 @@
 #include <cmath>    // IWYU pragma: keep
+#include <compare>  // for operator<=, operator>=, partial_ordering
 #include <ratio>    // for ratio
 #include <utility>  // for move
 

src/ftxui/component/checkbox.cpp

@@ -1,14 +1,13 @@
 #include <functional>  // for function
-#include <memory>      // for shared_ptr
 #include <utility>     // for move
 
 #include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
-#include "ftxui/component/component.hpp"       // for Make, Component, Checkbox
+#include "ftxui/component/component.hpp"       // for Make, Checkbox
-#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/component_base.hpp"  // for Component, ComponentBase
-#include "ftxui/component/component_options.hpp"  // for CheckboxOption
+#include "ftxui/component/component_options.hpp"  // for CheckboxOption, EntryState
 #include "ftxui/component/event.hpp"              // for Event, Event::Return
 #include "ftxui/component/mouse.hpp"  // for Mouse, Mouse::Left, Mouse::Pressed
-#include "ftxui/dom/elements.hpp"  // for operator|, text, Element, hbox, reflect, focus, nothing, select
+#include "ftxui/dom/elements.hpp"  // for operator|, Element, reflect, focus, nothing, select
 #include "ftxui/screen/box.hpp"  // for Box
 #include "ftxui/util/ref.hpp"    // for Ref, ConstStringRef
 

src/ftxui/component/input.cpp

@@ -1,8 +1,7 @@
 #include <algorithm>   // for max, min
 #include <cstddef>     // for size_t
 #include <functional>  // for function
-#include <memory>      // for shared_ptr, allocator
+#include <string>      // for string, allocator
-#include <string>      // for string, wstring
 #include <utility>     // for move
 #include <vector>      // for vector
 
@@ -15,7 +14,7 @@
 #include "ftxui/component/screen_interactive.hpp"  // for Component
 #include "ftxui/dom/elements.hpp"  // for operator|, text, Element, reflect, inverted, Decorator, flex, focus, hbox, size, bold, dim, frame, select, EQUAL, HEIGHT
 #include "ftxui/screen/box.hpp"    // for Box
-#include "ftxui/screen/string.hpp"  // for GlyphPosition, GlyphCount, to_string, CellToGlyphIndex, to_wstring
+#include "ftxui/screen/string.hpp"  // for GlyphPosition, GlyphCount, CellToGlyphIndex
 #include "ftxui/screen/util.hpp"  // for clamp
 #include "ftxui/util/ref.hpp"     // for StringRef, Ref, ConstStringRef
 

src/ftxui/component/radiobox.cpp

@@ -1,6 +1,5 @@
-#include <algorithm>   // for max
 #include <functional>  // for function
-#include <memory>      // for shared_ptr, allocator_traits<>::value_type
+#include <memory>      // for allocator_traits<>::value_type
 #include <utility>     // for move
 #include <vector>      // for vector
 

src/ftxui/component/screen_interactive.cpp

@@ -1,6 +1,7 @@
-#include <algorithm>  // for copy, max, min
+#include <algorithm>  // for min
 #include <array>      // for array
-#include <chrono>  // for operator-, milliseconds, duration, operator>=, time_point, common_type<>::type
+#include <chrono>  // for operator-, milliseconds, duration, operator<=>, time_point, common_type<>::type
+#include <compare>  // for operator>=, strong_ordering
 #include <csignal>  // for signal, raise, SIGTSTP, SIGABRT, SIGFPE, SIGILL, SIGINT, SIGSEGV, SIGTERM, SIGWINCH
 #include <cstdio>   // for fileno, size_t, stdin
 #include <ftxui/component/task.hpp>  // for Task, Closure, AnimationTask

src/ftxui/component/slider.cpp

@@ -1,46 +1,108 @@
+#include <algorithm>                              // for max, min
+#include <ftxui/component/component_options.hpp>  // for SliderOption
 #include <string>                                 // for allocator
-#include <utility>  // for move
 
 #include "ftxui/component/captured_mouse.hpp"  // for CapturedMouse
 #include "ftxui/component/component.hpp"       // for Make, Slider
 #include "ftxui/component/component_base.hpp"  // for ComponentBase
-#include "ftxui/component/event.hpp"  // for Event, Event::ArrowLeft, Event::ArrowRight
+#include "ftxui/component/event.hpp"  // for Event, Event::ArrowDown, Event::ArrowLeft, Event::ArrowRight, Event::ArrowUp
 #include "ftxui/component/mouse.hpp"  // for Mouse, Mouse::Left, Mouse::Pressed, Mouse::Released
 #include "ftxui/component/screen_interactive.hpp"  // for Component
-#include "ftxui/dom/elements.hpp"  // for operator|, text, Element, reflect, xflex, gauge, hbox, underlined, color, dim, vcenter
+#include "ftxui/dom/elements.hpp"  // for operator|, text, GaugeDirection, Element, xflex, hbox, color, underlined, GaugeDirection::Down, GaugeDirection::Left, GaugeDirection::Right, GaugeDirection::Up, reflect, Decorator, dim, vcenter, yflex, gaugeDirection
 #include "ftxui/screen/box.hpp"    // for Box
-#include "ftxui/screen/color.hpp"  // for Color, Color::GrayDark, Color::GrayLight
+#include "ftxui/screen/color.hpp"  // for Color, Color::GrayDark, Color::White
-#include "ftxui/util/ref.hpp"      // for StringRef
+#include "ftxui/screen/util.hpp"   // for clamp
+#include "ftxui/util/ref.hpp"      // for ConstRef, ConstStringRef, Ref
 
 namespace ftxui {
 
+namespace {
+Decorator flexDirection(GaugeDirection direction) {
+  switch (direction) {
+    case GaugeDirection::Up:
+    case GaugeDirection::Down:
+      return yflex;
+    case GaugeDirection::Left:
+    case GaugeDirection::Right:
+      return xflex;
+  }
+  return xflex;  // NOT_REACHED()
+}
+}  // namespace
+
 template <class T>
 class SliderBase : public ComponentBase {
  public:
-  SliderBase(ConstStringRef label,
+  SliderBase(Ref<SliderOption<T>> options)
-             Ref<T> value,
+      : value_(options->value),
-             ConstRef<T> min,
+        min_(options->min),
-             ConstRef<T> max,
+        max_(options->max),
-             ConstRef<T> increment)
+        increment_(options->increment),
-      : label_(std::move(label)),
+        options_(options) {}
-        value_(value),
-        min_(min),
-        max_(max),
-        increment_(increment) {}
 
   Element Render() override {
-    auto gauge_color =
+    auto gauge_color = Focused() ? color(options_->color_active)
-        Focused() ? color(Color::GrayLight) : color(Color::GrayDark);
+                                 : color(options_->color_inactive);
     float percent = float(value_() - min_()) / float(max_() - min_());
-    return hbox({
+    return gaugeDirection(percent, options_->direction) |
-               text(label_()) | dim | vcenter,
+           flexDirection(options_->direction) | reflect(gauge_box_) |
-               hbox({
+           gauge_color;
-                   text("["),
+  }
-                   gauge(percent) | underlined | xflex | reflect(gauge_box_),
+
-                   text("]"),
+  void OnLeft() {
-               }) | xflex,
+    switch (options_->direction) {
-           }) |
+      case GaugeDirection::Right:
-           gauge_color | xflex | reflect(box_);
+        value_() -= increment_();
+        break;
+      case GaugeDirection::Left:
+        value_() += increment_();
+        break;
+      case GaugeDirection::Up:
+      case GaugeDirection::Down:
+        break;
+    }
+  }
+
+  void OnRight() {
+    switch (options_->direction) {
+      case GaugeDirection::Right:
+        value_() += increment_();
+        break;
+      case GaugeDirection::Left:
+        value_() -= increment_();
+        break;
+      case GaugeDirection::Up:
+      case GaugeDirection::Down:
+        break;
+    }
+  }
+
+  void OnUp() {
+    switch (options_->direction) {
+      case GaugeDirection::Up:
+        value_() -= increment_();
+        break;
+      case GaugeDirection::Down:
+        value_() += increment_();
+        break;
+      case GaugeDirection::Left:
+      case GaugeDirection::Right:
+        break;
+    }
+  }
+
+  void OnDown() {
+    switch (options_->direction) {
+      case GaugeDirection::Down:
+        value_() -= increment_();
+        break;
+      case GaugeDirection::Up:
+        value_() += increment_();
+        break;
+      case GaugeDirection::Left:
+      case GaugeDirection::Right:
+        break;
+    }
   }
 
   bool OnEvent(Event event) final {
@@ -48,17 +110,23 @@ class SliderBase : public ComponentBase {
       return OnMouseEvent(event);
     }
 
+    T old_value = value_();
     if (event == Event::ArrowLeft || event == Event::Character('h')) {
-      value_() -= increment_();
+      OnLeft();
-      value_() = std::max(value_(), min_());
+    }
-      return true;
+    if (event == Event::ArrowRight || event == Event::Character('l')) {
+      OnRight();
+    }
+    if (event == Event::ArrowUp || event == Event::Character('k')) {
+      OnDown();
+    }
+    if (event == Event::ArrowDown || event == Event::Character('j')) {
+      OnUp();
     }
 
-    if (event == Event::ArrowRight || event == Event::Character('l')) {
+    value_() = util::clamp(value_(), min_(), max_());
-      value_() += increment_();
+    if (old_value != value_())
-      value_() = std::min(*value_, max_());
       return true;
-    }
 
     return ComponentBase::OnEvent(event);
   }
@@ -69,7 +137,8 @@ class SliderBase : public ComponentBase {
       return true;
     }
 
-    if (box_.Contain(event.mouse().x, event.mouse().y) && CaptureMouse(event)) {
+    if (gauge_box_.Contain(event.mouse().x, event.mouse().y) &&
+        CaptureMouse(event)) {
       TakeFocus();
     }
 
@@ -81,9 +150,32 @@ class SliderBase : public ComponentBase {
     }
 
     if (captured_mouse_) {
+      switch (options_->direction) {
+        case GaugeDirection::Right: {
           value_() = min_() + (event.mouse().x - gauge_box_.x_min) *
                                   (max_() - min_()) /
                                   (gauge_box_.x_max - gauge_box_.x_min);
+          break;
+        }
+        case GaugeDirection::Left: {
+          value_() = max_() - (event.mouse().x - gauge_box_.x_min) *
+                                  (max_() - min_()) /
+                                  (gauge_box_.x_max - gauge_box_.x_min);
+          break;
+        }
+        case GaugeDirection::Down: {
+          value_() = min_() + (event.mouse().y - gauge_box_.y_min) *
+                                  (max_() - min_()) /
+                                  (gauge_box_.y_max - gauge_box_.y_min);
+          break;
+        }
+        case GaugeDirection::Up: {
+          value_() = max_() - (event.mouse().y - gauge_box_.y_min) *
+                                  (max_() - min_()) /
+                                  (gauge_box_.y_max - gauge_box_.y_min);
+          break;
+        }
+      }
       value_() = std::max(min_(), std::min(max_(), value_()));
       return true;
     }
@@ -93,16 +185,60 @@ class SliderBase : public ComponentBase {
   bool Focusable() const final { return true; }
 
  private:
-  ConstStringRef label_;
   Ref<T> value_;
   ConstRef<T> min_;
   ConstRef<T> max_;
   ConstRef<T> increment_;
-  Box box_;
+  Ref<SliderOption<T>> options_;
   Box gauge_box_;
   CapturedMouse captured_mouse_;
 };
 
+class SliderWithLabel : public ComponentBase {
+ public:
+  SliderWithLabel(ConstStringRef label, Component inner) : label_(label) {
+    Add(inner);
+    SetActiveChild(inner);
+  }
+
+ private:
+  bool OnEvent(Event event) final {
+    if (ComponentBase::OnEvent(event))
+      return true;
+
+    if (!event.is_mouse()) {
+      return false;
+    }
+
+    if (!box_.Contain(event.mouse().x, event.mouse().y)) {
+      return false;
+    }
+
+    if (!CaptureMouse(event)) {
+      return false;
+    }
+
+    TakeFocus();
+    return true;
+  }
+
+  Element Render() override {
+    auto gauge_color = Focused() ? color(Color::White) : color(Color::GrayDark);
+    return hbox({
+               text(label_()) | dim | vcenter,
+               hbox({
+                   text("["),
+                   ComponentBase::Render() | underlined,
+                   text("]"),
+               }) | xflex,
+           }) |
+           gauge_color | xflex | reflect(box_);
+  }
+
+  ConstStringRef label_;
+  Box box_;
+};
+
 /// @brief An horizontal slider.
 /// @param label The name of the slider.
 /// @param value The current value of the slider.
@@ -130,23 +266,65 @@ Component Slider(ConstStringRef label,
                  ConstRef<int> min,
                  ConstRef<int> max,
                  ConstRef<int> increment) {
-  return Make<SliderBase<int>>(std::move(label), value, min, max, increment);
+  auto slider = Make<SliderBase<int>>(SliderOption<int>({
+      .value = value,
+      .min = min,
+      .max = max,
+      .increment = increment,
+  }));
+  return Make<SliderWithLabel>(label, slider);
 }
+
 Component Slider(ConstStringRef label,
                  Ref<float> value,
                  ConstRef<float> min,
                  ConstRef<float> max,
                  ConstRef<float> increment) {
-  return Make<SliderBase<float>>(std::move(label), value, min, max, increment);
+  auto slider = Make<SliderBase<float>>(SliderOption<float>({
+      .value = value,
+      .min = min,
+      .max = max,
+      .increment = increment,
+  }));
+  return Make<SliderWithLabel>(label, slider);
 }
 Component Slider(ConstStringRef label,
                  Ref<long> value,
                  ConstRef<long> min,
                  ConstRef<long> max,
                  ConstRef<long> increment) {
-  return Make<SliderBase<long>>(std::move(label), value, min, max, increment);
+  auto slider = Make<SliderBase<long>>(SliderOption<long>({
+      .value = value,
+      .min = min,
+      .max = max,
+      .increment = increment,
+  }));
+  return Make<SliderWithLabel>(label, slider);
 }
 
+/// @brief A slider in any direction.
+/// @param option The options
+/// ### Example
+///
+/// ```cpp
+/// auto screen = ScreenInteractive::TerminalOutput();
+/// int value = 50;
+/// auto slider = Slider({
+///   .value = &value,
+///   .min = 0,
+///   .max = 100,
+///   .increment= 20,
+/// });
+/// screen.Loop(slider);
+/// ```
+template <typename T>
+Component Slider(SliderOption<T> options) {
+  return Make<SliderBase<T>>(options);
+}
+template Component Slider(SliderOption<int> options);
+template Component Slider(SliderOption<float> options);
+template Component Slider(SliderOption<long> options);
+
 }  // namespace ftxui
 
 // Copyright 2020 Arthur Sonzogni. All rights reserved.

src/ftxui/component/slider_test.cpp

@@ -0,0 +1,136 @@
+#include <gtest/gtest.h>  // for AssertionResult, Message, TestPartResult, Test, EXPECT_TRUE, EXPECT_EQ, SuiteApiResolver, TestInfo (ptr only), EXPECT_FALSE, TEST, TestFactoryImpl
+#include <ftxui/component/mouse.hpp>  // for Mouse, Mouse::Left, Mouse::Pressed, Mouse::Released
+#include <ftxui/dom/elements.hpp>  // for GaugeDirection, GaugeDirection::Down, GaugeDirection::Left, GaugeDirection::Right, GaugeDirection::Up
+#include <memory>  // for __shared_ptr_access, shared_ptr, allocator
+
+#include "ftxui/component/component.hpp"       // for Slider
+#include "ftxui/component/component_base.hpp"  // for ComponentBase
+#include "ftxui/component/event.hpp"           // for Event
+#include "ftxui/dom/node.hpp"                  // for Render
+#include "ftxui/screen/screen.hpp"             // for Screen
+
+namespace ftxui {
+
+namespace {
+Event MousePressed(int x, int y) {
+  Mouse mouse;
+  mouse.button = Mouse::Left;
+  mouse.motion = Mouse::Pressed;
+  mouse.shift = false;
+  mouse.meta = false;
+  mouse.control = false;
+  mouse.x = x;
+  mouse.y = y;
+  return Event::Mouse("jjj", mouse);
+}
+
+Event MouseReleased(int x, int y) {
+  Mouse mouse;
+  mouse.button = Mouse::Left;
+  mouse.motion = Mouse::Released;
+  mouse.shift = false;
+  mouse.meta = false;
+  mouse.control = false;
+  mouse.x = x;
+  mouse.y = y;
+  return Event::Mouse("jjj", mouse);
+}
+}  // namespace
+
+TEST(SliderTest, Right) {
+  int value = 50;
+  auto slider = Slider<int>({
+      .value = &value,
+      .min = 0,
+      .max = 100,
+      .increment = 10,
+      .direction = GaugeDirection::Right,
+  });
+  Screen screen(11, 1);
+  Render(screen, slider->Render());
+  EXPECT_TRUE(slider->OnEvent(MousePressed(3, 0)));
+  EXPECT_EQ(value, 30);
+  EXPECT_TRUE(slider->OnEvent(MousePressed(9, 0)));
+  EXPECT_EQ(value, 90);
+  EXPECT_TRUE(slider->OnEvent(MousePressed(9, 2)));
+  EXPECT_EQ(value, 90);
+  EXPECT_TRUE(slider->OnEvent(MousePressed(5, 2)));
+  EXPECT_EQ(value, 50);
+  EXPECT_TRUE(slider->OnEvent(MouseReleased(5, 2)));
+  EXPECT_FALSE(slider->OnEvent(MousePressed(5, 2)));
+}
+
+TEST(SliderTest, Left) {
+  int value = 50;
+  auto slider = Slider<int>({
+      .value = &value,
+      .min = 0,
+      .max = 100,
+      .increment = 10,
+      .direction = GaugeDirection::Left,
+  });
+  Screen screen(11, 1);
+  Render(screen, slider->Render());
+  EXPECT_TRUE(slider->OnEvent(MousePressed(3, 0)));
+  EXPECT_EQ(value, 70);
+  EXPECT_TRUE(slider->OnEvent(MousePressed(9, 0)));
+  EXPECT_EQ(value, 10);
+  EXPECT_TRUE(slider->OnEvent(MousePressed(9, 2)));
+  EXPECT_EQ(value, 10);
+  EXPECT_TRUE(slider->OnEvent(MousePressed(5, 2)));
+  EXPECT_EQ(value, 50);
+  EXPECT_TRUE(slider->OnEvent(MouseReleased(5, 2)));
+  EXPECT_FALSE(slider->OnEvent(MousePressed(5, 2)));
+}
+
+TEST(SliderTest, Down) {
+  int value = 50;
+  auto slider = Slider<int>({
+      .value = &value,
+      .min = 0,
+      .max = 100,
+      .increment = 10,
+      .direction = GaugeDirection::Down,
+  });
+  Screen screen(1, 11);
+  Render(screen, slider->Render());
+  EXPECT_TRUE(slider->OnEvent(MousePressed(0, 3)));
+  EXPECT_EQ(value, 30);
+  EXPECT_TRUE(slider->OnEvent(MousePressed(0, 9)));
+  EXPECT_EQ(value, 90);
+  EXPECT_TRUE(slider->OnEvent(MousePressed(2, 9)));
+  EXPECT_EQ(value, 90);
+  EXPECT_TRUE(slider->OnEvent(MousePressed(2, 5)));
+  EXPECT_EQ(value, 50);
+  EXPECT_TRUE(slider->OnEvent(MouseReleased(2, 5)));
+  EXPECT_FALSE(slider->OnEvent(MousePressed(2, 5)));
+}
+
+TEST(SliderTest, Up) {
+  int value = 50;
+  auto slider = Slider<int>({
+      .value = &value,
+      .min = 0,
+      .max = 100,
+      .increment = 10,
+      .direction = GaugeDirection::Up,
+  });
+  Screen screen(1, 11);
+  Render(screen, slider->Render());
+  EXPECT_TRUE(slider->OnEvent(MousePressed(0, 3)));
+  EXPECT_EQ(value, 70);
+  EXPECT_TRUE(slider->OnEvent(MousePressed(0, 9)));
+  EXPECT_EQ(value, 10);
+  EXPECT_TRUE(slider->OnEvent(MousePressed(2, 9)));
+  EXPECT_EQ(value, 10);
+  EXPECT_TRUE(slider->OnEvent(MousePressed(2, 5)));
+  EXPECT_EQ(value, 50);
+  EXPECT_TRUE(slider->OnEvent(MouseReleased(2, 5)));
+  EXPECT_FALSE(slider->OnEvent(MousePressed(2, 5)));
+}
+
+}  // namespace ftxui
+
+// Copyright 2022 Arthur Sonzogni. All rights reserved.
+// Use of this source code is governed by the MIT license that can be found in
+// the LICENSE file.