Vertical orientation added to Slider.

4 files changed, 92 insertions, 0 deletions

diff --git a/examples/slider/Cargo.toml b/examples/slider/Cargo.toml
new file mode 100644
index 00000000..112d7cff
--- /dev/null
+++ b/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 = "../.." }
diff --git a/examples/slider/README.md b/examples/slider/README.md
new file mode 100644
index 00000000..0d409dc6
--- /dev/null
+++ b/examples/slider/README.md
@@ -0,0 +1,14 @@
+## Slider
+
+A bar and a handle that selects a single value from a range of values.  
+Can be oriented both vertical and horizontal.
+
+<div align="center">
+    <img src="sliders.gif">
+</div>
+
+You can run it with `cargo run`:
+
+```
+cargo run --package slider
+```
diff --git a/examples/slider/sliders.gif b/examples/slider/sliders.gif
new file mode 100644
index 00000000..f906d05a
--- /dev/null
+++ b/examples/slider/sliders.gif
diff --git a/examples/slider/src/main.rs b/examples/slider/src/main.rs
new file mode 100644
index 00000000..44770382
--- /dev/null
+++ b/examples/slider/src/main.rs
@@ -0,0 +1,69 @@
+use iced::widget::{column, container, slider, text};
+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> {
+        use slider::Orientation::{Horizontal, Vertical};
+
+        let value = self.slider_value;
+
+        let h_slider = container(
+            slider(0..=100, value, Message::SliderChanged)
+                .orientation(Horizontal),
+        )
+        .width(Length::Units(250));
+
+        let v_slider = container(
+            slider(0..=100, value, Message::SliderChanged)
+                .orientation(Vertical),
+        )
+        .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()
+    }
+}