Merge pull request #1596 from casperstorm/feat/slider-orientation

Added a VerticalSlider widget.

examples/slider/Cargo.toml

@@ -0,0 +1,9 @@
+[package]
+name = "slider"
+version = "0.1.0"
+authors = ["Casper Rogild Storm<casper@rogildstorm.com>"]
+edition = "2021"
+publish = false
+
+[dependencies]
+iced = { path = "../.." }

examples/slider/README.md

@@ -0,0 +1,14 @@
+## Slider
+
+A `Slider` is a bar and a handle that selects a single value from a range of values.
+There exists both `Slider` and `VerticalSlider` depending on which orientation you need.
+
+<div align="center">
+    <img src="sliders.gif">
+</div>
+
+You can run it with `cargo run`:
+
+```
+cargo run --package slider
+```

examples/slider/src/main.rs

@@ -0,0 +1,63 @@
+use iced::widget::{column, container, slider, text, vertical_slider};
+use iced::{Element, Length, Sandbox, Settings};
+
+pub fn main() -> iced::Result {
+    Slider::run(Settings::default())
+}
+
+#[derive(Debug, Clone)]
+pub enum Message {
+    SliderChanged(u8),
+}
+
+pub struct Slider {
+    slider_value: u8,
+}
+
+impl Sandbox for Slider {
+    type Message = Message;
+
+    fn new() -> Slider {
+        Slider { slider_value: 50 }
+    }
+
+    fn title(&self) -> String {
+        String::from("Slider - Iced")
+    }
+
+    fn update(&mut self, message: Message) {
+        match message {
+            Message::SliderChanged(value) => {
+                self.slider_value = value;
+            }
+        }
+    }
+
+    fn view(&self) -> Element<Message> {
+        let value = self.slider_value;
+
+        let h_slider =
+            container(slider(0..=100, value, Message::SliderChanged))
+                .width(Length::Units(250));
+
+        let v_slider =
+            container(vertical_slider(0..=100, value, Message::SliderChanged))
+                .height(Length::Units(200));
+
+        let text = text(format!("{value}"));
+
+        container(
+            column![
+                container(v_slider).width(Length::Fill).center_x(),
+                container(h_slider).width(Length::Fill).center_x(),
+                container(text).width(Length::Fill).center_x(),
+            ]
+            .spacing(25),
+        )
+        .height(Length::Fill)
+        .width(Length::Fill)
+        .center_x()
+        .center_y()
+        .into()
+    }
+}

native/src/widget.rs

@@ -33,6 +33,7 @@ pub mod text_input;
 pub mod toggler;
 pub mod tooltip;
 pub mod tree;
+pub mod vertical_slider;
 
 mod action;
 mod id;
@@ -79,6 +80,8 @@ pub use toggler::Toggler;
 pub use tooltip::Tooltip;
 #[doc(no_inline)]
 pub use tree::Tree;
+#[doc(no_inline)]
+pub use vertical_slider::VerticalSlider;
 
 pub use action::Action;
 pub use id::Id;

native/src/widget/helpers.rs

@@ -198,6 +198,23 @@ where
     widget::Slider::new(range, value, on_change)
 }
 
+/// Creates a new [`VerticalSlider`].
+///
+/// [`VerticalSlider`]: widget::VerticalSlider
+pub fn vertical_slider<'a, T, Message, Renderer>(
+    range: std::ops::RangeInclusive<T>,
+    value: T,
+    on_change: impl Fn(T) -> Message + 'a,
+) -> widget::VerticalSlider<'a, T, Message, Renderer>
+where
+    T: Copy + From<u8> + std::cmp::PartialOrd,
+    Message: Clone,
+    Renderer: crate::Renderer,
+    Renderer::Theme: widget::slider::StyleSheet,
+{
+    widget::VerticalSlider::new(range, value, on_change)
+}
+
 /// Creates a new [`PickList`].
 ///
 /// [`PickList`]: widget::PickList