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

iced_widget/
vertical_slider.rs
