iced_widget/
vertical_slider.rs

1//! Sliders let users set a value by moving an indicator.
2//!
3//! # Example
4//! ```no_run
5//! # mod iced { pub mod widget { pub use iced_widget::*; } pub use iced_widget::Renderer; pub use iced_widget::core::*; }
6//! # pub type Element<'a, Message> = iced_widget::core::Element<'a, Message, iced_widget::Theme, iced_widget::Renderer>;
7//! #
8//! use iced::widget::slider;
9//!
10//! struct State {
11//!    value: f32,
12//! }
13//!
14//! #[derive(Debug, Clone)]
15//! enum Message {
16//!     ValueChanged(f32),
17//! }
18//!
19//! fn view(state: &State) -> Element<'_, Message> {
20//!     slider(0.0..=100.0, state.value, Message::ValueChanged).into()
21//! }
22//!
23//! fn update(state: &mut State, message: Message) {
24//!     match message {
25//!         Message::ValueChanged(value) => {
26//!             state.value = value;
27//!         }
28//!     }
29//! }
30//! ```
31use std::ops::RangeInclusive;
32
33pub use crate::slider::{Catalog, Handle, HandleShape, Status, Style, StyleFn, default};
34
35use crate::core::border::Border;
36use crate::core::keyboard;
37use crate::core::keyboard::key::{self, Key};
38use crate::core::layout::{self, Layout};
39use crate::core::mouse;
40use crate::core::renderer;
41use crate::core::touch;
42use crate::core::widget::tree::{self, Tree};
43use crate::core::window;
44use crate::core::{self, Element, Event, Length, Pixels, Point, Rectangle, Shell, Size, Widget};
45
46/// An vertical bar and a handle that selects a single value from a range of
47/// values.
48///
49/// A [`VerticalSlider`] will try to fill the vertical space of its container.
50///
51/// The [`VerticalSlider`] range of numeric values is generic and its step size defaults
52/// to 1 unit.
53///
54/// # Example
55/// ```no_run
56/// # mod iced { pub mod widget { pub use iced_widget::*; } pub use iced_widget::Renderer; pub use iced_widget::core::*; }
57/// # pub type Element<'a, Message> = iced_widget::core::Element<'a, Message, iced_widget::Theme, iced_widget::Renderer>;
58/// #
59/// use iced::widget::vertical_slider;
60///
61/// struct State {
62///    value: f32,
63/// }
64///
65/// #[derive(Debug, Clone)]
66/// enum Message {
67///     ValueChanged(f32),
68/// }
69///
70/// fn view(state: &State) -> Element<'_, Message> {
71///     vertical_slider(0.0..=100.0, state.value, Message::ValueChanged).into()
72/// }
73///
74/// fn update(state: &mut State, message: Message) {
75///     match message {
76///         Message::ValueChanged(value) => {
77///             state.value = value;
78///         }
79///     }
80/// }
81/// ```
82pub struct VerticalSlider<'a, T, Message, Theme = crate::Theme>
83where
84    Theme: Catalog,
85{
86    range: RangeInclusive<T>,
87    step: T,
88    shift_step: Option<T>,
89    value: T,
90    default: Option<T>,
91    on_change: Box<dyn Fn(T) -> Message + 'a>,
92    on_release: Option<Message>,
93    width: f32,
94    height: Length,
95    class: Theme::Class<'a>,
96    status: Option<Status>,
97}
98
99impl<'a, T, Message, Theme> VerticalSlider<'a, T, Message, Theme>
100where
101    T: Copy + From<u8> + std::cmp::PartialOrd,
102    Message: Clone,
103    Theme: Catalog,
104{
105    /// The default width of a [`VerticalSlider`].
106    pub const DEFAULT_WIDTH: f32 = 16.0;
107
108    /// Creates a new [`VerticalSlider`].
109    ///
110    /// It expects:
111    ///   * an inclusive range of possible values
112    ///   * the current value of the [`VerticalSlider`]
113    ///   * a function that will be called when the [`VerticalSlider`] is dragged.
114    ///     It receives the new value of the [`VerticalSlider`] and must produce a
115    ///     `Message`.
116    pub fn new<F>(range: RangeInclusive<T>, value: T, on_change: F) -> Self
117    where
118        F: 'a + Fn(T) -> Message,
119    {
120        let value = if value >= *range.start() {
121            value
122        } else {
123            *range.start()
124        };
125
126        let value = if value <= *range.end() {
127            value
128        } else {
129            *range.end()
130        };
131
132        VerticalSlider {
133            value,
134            default: None,
135            range,
136            step: T::from(1),
137            shift_step: None,
138            on_change: Box::new(on_change),
139            on_release: None,
140            width: Self::DEFAULT_WIDTH,
141            height: Length::Fill,
142            class: Theme::default(),
143            status: None,
144        }
145    }
146
147    /// Sets the optional default value for the [`VerticalSlider`].
148    ///
149    /// If set, the [`VerticalSlider`] will reset to this value when ctrl-clicked or command-clicked.
150    pub fn default(mut self, default: impl Into<T>) -> Self {
151        self.default = Some(default.into());
152        self
153    }
154
155    /// Sets the release message of the [`VerticalSlider`].
156    /// This is called when the mouse is released from the slider.
157    ///
158    /// Typically, the user's interaction with the slider is finished when this message is produced.
159    /// This is useful if you need to spawn a long-running task from the slider's result, where
160    /// the default on_change message could create too many events.
161    pub fn on_release(mut self, on_release: Message) -> Self {
162        self.on_release = Some(on_release);
163        self
164    }
165
166    /// Sets the width of the [`VerticalSlider`].
167    pub fn width(mut self, width: impl Into<Pixels>) -> Self {
168        self.width = width.into().0;
169        self
170    }
171
172    /// Sets the height of the [`VerticalSlider`].
173    pub fn height(mut self, height: impl Into<Length>) -> Self {
174        self.height = height.into();
175        self
176    }
177
178    /// Sets the step size of the [`VerticalSlider`].
179    pub fn step(mut self, step: T) -> Self {
180        self.step = step;
181        self
182    }
183
184    /// Sets the optional "shift" step for the [`VerticalSlider`].
185    ///
186    /// If set, this value is used as the step while the shift key is pressed.
187    pub fn shift_step(mut self, shift_step: impl Into<T>) -> Self {
188        self.shift_step = Some(shift_step.into());
189        self
190    }
191
192    /// Sets the style of the [`VerticalSlider`].
193    #[must_use]
194    pub fn style(mut self, style: impl Fn(&Theme, Status) -> Style + 'a) -> Self
195    where
196        Theme::Class<'a>: From<StyleFn<'a, Theme>>,
197    {
198        self.class = (Box::new(style) as StyleFn<'a, Theme>).into();
199        self
200    }
201
202    /// Sets the style class of the [`VerticalSlider`].
203    #[cfg(feature = "advanced")]
204    #[must_use]
205    pub fn class(mut self, class: impl Into<Theme::Class<'a>>) -> Self {
206        self.class = class.into();
207        self
208    }
209}
210
211impl<T, Message, Theme, Renderer> Widget<Message, Theme, Renderer>
212    for VerticalSlider<'_, T, Message, Theme>
213where
214    T: Copy + Into<f64> + num_traits::FromPrimitive,
215    Message: Clone,
216    Theme: Catalog,
217    Renderer: core::Renderer,
218{
219    fn tag(&self) -> tree::Tag {
220        tree::Tag::of::<State>()
221    }
222
223    fn state(&self) -> tree::State {
224        tree::State::new(State::default())
225    }
226
227    fn size(&self) -> Size<Length> {
228        Size {
229            width: Length::Shrink,
230            height: self.height,
231        }
232    }
233
234    fn layout(
235        &mut self,
236        _tree: &mut Tree,
237        _renderer: &Renderer,
238        limits: &layout::Limits,
239    ) -> layout::Node {
240        layout::atomic(limits, self.width, self.height)
241    }
242
243    fn update(
244        &mut self,
245        tree: &mut Tree,
246        event: &Event,
247        layout: Layout<'_>,
248        cursor: mouse::Cursor,
249        _renderer: &Renderer,
250        shell: &mut Shell<'_, Message>,
251        _viewport: &Rectangle,
252    ) {
253        let state = tree.state.downcast_mut::<State>();
254        let is_dragging = state.is_dragging;
255        let current_value = self.value;
256
257        let locate = |cursor_position: Point| -> Option<T> {
258            let bounds = layout.bounds();
259
260            if cursor_position.y >= bounds.y + bounds.height {
261                Some(*self.range.start())
262            } else if cursor_position.y <= bounds.y {
263                Some(*self.range.end())
264            } else {
265                let step = if state.keyboard_modifiers.shift() {
266                    self.shift_step.unwrap_or(self.step)
267                } else {
268                    self.step
269                }
270                .into();
271
272                let start = (*self.range.start()).into();
273                let end = (*self.range.end()).into();
274
275                let percent =
276                    1.0 - f64::from(cursor_position.y - bounds.y) / f64::from(bounds.height);
277
278                let steps = (percent * (end - start) / step).round();
279                let value = steps * step + start;
280
281                T::from_f64(value.min(end))
282            }
283        };
284
285        let increment = |value: T| -> Option<T> {
286            let step = if state.keyboard_modifiers.shift() {
287                self.shift_step.unwrap_or(self.step)
288            } else {
289                self.step
290            }
291            .into();
292
293            let steps = (value.into() / step).round();
294            let new_value = step * (steps + 1.0);
295
296            if new_value > (*self.range.end()).into() {
297                return Some(*self.range.end());
298            }
299
300            T::from_f64(new_value)
301        };
302
303        let decrement = |value: T| -> Option<T> {
304            let step = if state.keyboard_modifiers.shift() {
305                self.shift_step.unwrap_or(self.step)
306            } else {
307                self.step
308            }
309            .into();
310
311            let steps = (value.into() / step).round();
312            let new_value = step * (steps - 1.0);
313
314            if new_value < (*self.range.start()).into() {
315                return Some(*self.range.start());
316            }
317
318            T::from_f64(new_value)
319        };
320
321        let change = |new_value: T| {
322            if (self.value.into() - new_value.into()).abs() > f64::EPSILON {
323                shell.publish((self.on_change)(new_value));
324
325                self.value = new_value;
326            }
327        };
328
329        match event {
330            Event::Mouse(mouse::Event::ButtonPressed(mouse::Button::Left))
331            | Event::Touch(touch::Event::FingerPressed { .. }) => {
332                if let Some(cursor_position) = cursor.position_over(layout.bounds()) {
333                    if state.keyboard_modifiers.control() || state.keyboard_modifiers.command() {
334                        let _ = self.default.map(change);
335                        state.is_dragging = false;
336                    } else {
337                        let _ = locate(cursor_position).map(change);
338                        state.is_dragging = true;
339                    }
340
341                    shell.capture_event();
342                }
343            }
344            Event::Mouse(mouse::Event::ButtonReleased(mouse::Button::Left))
345            | Event::Touch(touch::Event::FingerLifted { .. })
346            | Event::Touch(touch::Event::FingerLost { .. }) => {
347                if is_dragging {
348                    if let Some(on_release) = self.on_release.clone() {
349                        shell.publish(on_release);
350                    }
351                    state.is_dragging = false;
352                }
353            }
354            Event::Mouse(mouse::Event::CursorMoved { .. })
355            | Event::Touch(touch::Event::FingerMoved { .. }) => {
356                if is_dragging {
357                    let _ = cursor.land().position().and_then(locate).map(change);
358
359                    shell.capture_event();
360                }
361            }
362            Event::Mouse(mouse::Event::WheelScrolled { delta })
363                if state.keyboard_modifiers.control() =>
364            {
365                if cursor.is_over(layout.bounds()) {
366                    let delta = match *delta {
367                        mouse::ScrollDelta::Lines { x: _, y } => y,
368                        mouse::ScrollDelta::Pixels { x: _, y } => y,
369                    };
370
371                    if delta < 0.0 {
372                        let _ = decrement(current_value).map(change);
373                    } else {
374                        let _ = increment(current_value).map(change);
375                    }
376
377                    shell.capture_event();
378                }
379            }
380            Event::Keyboard(keyboard::Event::KeyPressed { key, .. }) => {
381                if cursor.is_over(layout.bounds()) {
382                    match key {
383                        Key::Named(key::Named::ArrowUp) => {
384                            let _ = increment(current_value).map(change);
385                            shell.capture_event();
386                        }
387                        Key::Named(key::Named::ArrowDown) => {
388                            let _ = decrement(current_value).map(change);
389                            shell.capture_event();
390                        }
391                        _ => (),
392                    }
393                }
394            }
395            Event::Keyboard(keyboard::Event::ModifiersChanged(modifiers)) => {
396                state.keyboard_modifiers = *modifiers;
397            }
398            _ => {}
399        }
400
401        let current_status = if state.is_dragging {
402            Status::Dragged
403        } else if cursor.is_over(layout.bounds()) {
404            Status::Hovered
405        } else {
406            Status::Active
407        };
408
409        if let Event::Window(window::Event::RedrawRequested(_now)) = event {
410            self.status = Some(current_status);
411        } else if self.status.is_some_and(|status| status != current_status) {
412            shell.request_redraw();
413        }
414    }
415
416    fn draw(
417        &self,
418        _tree: &Tree,
419        renderer: &mut Renderer,
420        theme: &Theme,
421        _style: &renderer::Style,
422        layout: Layout<'_>,
423        _cursor: mouse::Cursor,
424        _viewport: &Rectangle,
425    ) {
426        let bounds = layout.bounds();
427
428        let style = theme.style(&self.class, self.status.unwrap_or(Status::Active));
429
430        let (handle_width, handle_height, handle_border_radius) = match style.handle.shape {
431            HandleShape::Circle { radius } => (radius * 2.0, radius * 2.0, radius.into()),
432            HandleShape::Rectangle {
433                width,
434                border_radius,
435            } => (f32::from(width), bounds.width, border_radius),
436        };
437
438        let value = self.value.into() as f32;
439        let (range_start, range_end) = {
440            let (start, end) = self.range.clone().into_inner();
441
442            (start.into() as f32, end.into() as f32)
443        };
444
445        let offset = if range_start >= range_end {
446            0.0
447        } else {
448            (bounds.height - handle_width) * (value - range_end) / (range_start - range_end)
449        };
450
451        let rail_x = bounds.x + bounds.width / 2.0;
452
453        renderer.fill_quad(
454            renderer::Quad {
455                bounds: Rectangle {
456                    x: rail_x - style.rail.width / 2.0,
457                    y: bounds.y,
458                    width: style.rail.width,
459                    height: offset + handle_width / 2.0,
460                },
461                border: style.rail.border,
462                ..renderer::Quad::default()
463            },
464            style.rail.backgrounds.1,
465        );
466
467        renderer.fill_quad(
468            renderer::Quad {
469                bounds: Rectangle {
470                    x: rail_x - style.rail.width / 2.0,
471                    y: bounds.y + offset + handle_width / 2.0,
472                    width: style.rail.width,
473                    height: bounds.height - offset - handle_width / 2.0,
474                },
475                border: style.rail.border,
476                ..renderer::Quad::default()
477            },
478            style.rail.backgrounds.0,
479        );
480
481        renderer.fill_quad(
482            renderer::Quad {
483                bounds: Rectangle {
484                    x: rail_x - handle_height / 2.0,
485                    y: bounds.y + offset,
486                    width: handle_height,
487                    height: handle_width,
488                },
489                border: Border {
490                    radius: handle_border_radius,
491                    width: style.handle.border_width,
492                    color: style.handle.border_color,
493                },
494                ..renderer::Quad::default()
495            },
496            style.handle.background,
497        );
498    }
499
500    fn mouse_interaction(
501        &self,
502        tree: &Tree,
503        layout: Layout<'_>,
504        cursor: mouse::Cursor,
505        _viewport: &Rectangle,
506        _renderer: &Renderer,
507    ) -> mouse::Interaction {
508        let state = tree.state.downcast_ref::<State>();
509
510        if state.is_dragging {
511            // FIXME: Fall back to `Pointer` on Windows
512            // See https://github.com/rust-windowing/winit/issues/1043
513            if cfg!(target_os = "windows") {
514                mouse::Interaction::Pointer
515            } else {
516                mouse::Interaction::Grabbing
517            }
518        } else if cursor.is_over(layout.bounds()) {
519            if cfg!(target_os = "windows") {
520                mouse::Interaction::Pointer
521            } else {
522                mouse::Interaction::Grab
523            }
524        } else {
525            mouse::Interaction::default()
526        }
527    }
528}
529
530impl<'a, T, Message, Theme, Renderer> From<VerticalSlider<'a, T, Message, Theme>>
531    for Element<'a, Message, Theme, Renderer>
532where
533    T: Copy + Into<f64> + num_traits::FromPrimitive + 'a,
534    Message: Clone + 'a,
535    Theme: Catalog + 'a,
536    Renderer: core::Renderer + 'a,
537{
538    fn from(
539        slider: VerticalSlider<'a, T, Message, Theme>,
540    ) -> Element<'a, Message, Theme, Renderer> {
541        Element::new(slider)
542    }
543}
544
545#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
546struct State {
547    is_dragging: bool,
548    keyboard_modifiers: keyboard::Modifiers,
549}
iced_widget/vertical_slider.rs

iced_widget/
vertical_slider.rs
