1use crate::core::border::{self, Border};
32use crate::core::keyboard;
33use crate::core::keyboard::key::{self, Key};
34use crate::core::layout;
35use crate::core::mouse;
36use crate::core::renderer;
37use crate::core::theme::palette;
38use crate::core::touch;
39use crate::core::widget::Operation;
40use crate::core::widget::operation::accessible::{Accessible, Role, Value};
41use crate::core::widget::operation::focusable::Focusable;
42use crate::core::widget::tree::{self, Tree};
43use crate::core::window;
44use crate::core::{
45 self, Background, Color, Element, Event, Layout, Length, Pixels, Point, Rectangle, Shadow,
46 Shell, Size, Theme, Widget,
47};
48
49use std::ops::RangeInclusive;
50
51pub struct Slider<'a, T, Message, Theme = crate::Theme>
88where
89 Theme: Catalog,
90{
91 range: RangeInclusive<T>,
92 step: T,
93 shift_step: Option<T>,
94 value: T,
95 default: Option<T>,
96 on_change: Box<dyn Fn(T) -> Message + 'a>,
97 on_release: Option<Message>,
98 width: Length,
99 height: f32,
100 class: Theme::Class<'a>,
101 status: Option<Status>,
102}
103
104impl<'a, T, Message, Theme> Slider<'a, T, Message, Theme>
105where
106 T: Copy + From<u8> + PartialOrd,
107 Message: Clone,
108 Theme: Catalog,
109{
110 pub const DEFAULT_HEIGHT: f32 = 16.0;
112
113 pub fn new<F>(range: RangeInclusive<T>, value: T, on_change: F) -> Self
122 where
123 F: 'a + Fn(T) -> Message,
124 {
125 let value = if value >= *range.start() {
126 value
127 } else {
128 *range.start()
129 };
130
131 let value = if value <= *range.end() {
132 value
133 } else {
134 *range.end()
135 };
136
137 Slider {
138 value,
139 default: None,
140 range,
141 step: T::from(1),
142 shift_step: None,
143 on_change: Box::new(on_change),
144 on_release: None,
145 width: Length::Fill,
146 height: Self::DEFAULT_HEIGHT,
147 class: Theme::default(),
148 status: None,
149 }
150 }
151
152 pub fn default(mut self, default: impl Into<T>) -> Self {
156 self.default = Some(default.into());
157 self
158 }
159
160 pub fn on_release(mut self, on_release: Message) -> Self {
167 self.on_release = Some(on_release);
168 self
169 }
170
171 pub fn width(mut self, width: impl Into<Length>) -> Self {
173 self.width = width.into();
174 self
175 }
176
177 pub fn height(mut self, height: impl Into<Pixels>) -> Self {
179 self.height = height.into().0;
180 self
181 }
182
183 pub fn step(mut self, step: impl Into<T>) -> Self {
185 self.step = step.into();
186 self
187 }
188
189 pub fn shift_step(mut self, shift_step: impl Into<T>) -> Self {
193 self.shift_step = Some(shift_step.into());
194 self
195 }
196
197 #[must_use]
199 pub fn style(mut self, style: impl Fn(&Theme, Status) -> Style + 'a) -> Self
200 where
201 Theme::Class<'a>: From<StyleFn<'a, Theme>>,
202 {
203 self.class = (Box::new(style) as StyleFn<'a, Theme>).into();
204 self
205 }
206
207 #[cfg(feature = "advanced")]
209 #[must_use]
210 pub fn class(mut self, class: impl Into<Theme::Class<'a>>) -> Self {
211 self.class = class.into();
212 self
213 }
214}
215
216impl<T, Message, Theme, Renderer> Widget<Message, Theme, Renderer> for Slider<'_, T, Message, Theme>
217where
218 T: Copy + Into<f64> + num_traits::FromPrimitive,
219 Message: Clone,
220 Theme: Catalog,
221 Renderer: core::Renderer,
222{
223 fn tag(&self) -> tree::Tag {
224 tree::Tag::of::<State>()
225 }
226
227 fn state(&self) -> tree::State {
228 tree::State::new(State::default())
229 }
230
231 fn size(&self) -> Size<Length> {
232 Size {
233 width: self.width,
234 height: Length::Shrink,
235 }
236 }
237
238 fn layout(
239 &mut self,
240 _tree: &mut Tree,
241 _renderer: &Renderer,
242 limits: &layout::Limits,
243 ) -> layout::Node {
244 layout::atomic(limits, self.width, self.height)
245 }
246
247 fn operate(
248 &mut self,
249 tree: &mut Tree,
250 layout: Layout<'_>,
251 _renderer: &Renderer,
252 operation: &mut dyn Operation,
253 ) {
254 let state = tree.state.downcast_mut::<State>();
255
256 operation.accessible(
257 None,
258 layout.bounds(),
259 &Accessible {
260 role: Role::Slider,
261 value: Some(Value::Numeric {
262 current: self.value.into(),
263 min: (*self.range.start()).into(),
264 max: (*self.range.end()).into(),
265 step: Some(self.step.into()),
266 }),
267 ..Accessible::default()
268 },
269 );
270
271 operation.focusable(None, layout.bounds(), state);
272 }
273
274 fn update(
275 &mut self,
276 tree: &mut Tree,
277 event: &Event,
278 layout: Layout<'_>,
279 cursor: mouse::Cursor,
280 _renderer: &Renderer,
281 shell: &mut Shell<'_, Message>,
282 _viewport: &Rectangle,
283 ) {
284 let state = tree.state.downcast_mut::<State>();
285
286 let mut update = || {
287 let current_value = self.value;
288
289 let locate = |cursor_position: Point| -> Option<T> {
290 let bounds = layout.bounds();
291
292 if cursor_position.x <= bounds.x {
293 Some(*self.range.start())
294 } else if cursor_position.x >= bounds.x + bounds.width {
295 Some(*self.range.end())
296 } else {
297 let step = if state.keyboard_modifiers.shift() {
298 self.shift_step.unwrap_or(self.step)
299 } else {
300 self.step
301 }
302 .into();
303
304 let start = (*self.range.start()).into();
305 let end = (*self.range.end()).into();
306
307 let percent = f64::from(cursor_position.x - bounds.x) / f64::from(bounds.width);
308
309 let steps = (percent * (end - start) / step).round();
310 let value = steps * step + start;
311
312 T::from_f64(value.min(end))
313 }
314 };
315
316 let increment = |value: T| -> Option<T> {
317 let step = if state.keyboard_modifiers.shift() {
318 self.shift_step.unwrap_or(self.step)
319 } else {
320 self.step
321 }
322 .into();
323
324 let steps = (value.into() / step).round();
325 let new_value = step * (steps + 1.0);
326
327 if new_value > (*self.range.end()).into() {
328 return Some(*self.range.end());
329 }
330
331 T::from_f64(new_value)
332 };
333
334 let decrement = |value: T| -> Option<T> {
335 let step = if state.keyboard_modifiers.shift() {
336 self.shift_step.unwrap_or(self.step)
337 } else {
338 self.step
339 }
340 .into();
341
342 let steps = (value.into() / step).round();
343 let new_value = step * (steps - 1.0);
344
345 if new_value < (*self.range.start()).into() {
346 return Some(*self.range.start());
347 }
348
349 T::from_f64(new_value)
350 };
351
352 let page_increment = |value: T| -> Option<T> {
353 let step = self.step.into() * 10.0;
354 let new_value = value.into() + step;
355
356 if new_value > (*self.range.end()).into() {
357 return Some(*self.range.end());
358 }
359
360 T::from_f64(new_value)
361 };
362
363 let page_decrement = |value: T| -> Option<T> {
364 let step = self.step.into() * 10.0;
365 let new_value = value.into() - step;
366
367 if new_value < (*self.range.start()).into() {
368 return Some(*self.range.start());
369 }
370
371 T::from_f64(new_value)
372 };
373
374 let mut change = |new_value: T| {
375 if (self.value.into() - new_value.into()).abs() > f64::EPSILON {
376 shell.publish((self.on_change)(new_value));
377
378 self.value = new_value;
379 }
380 };
381
382 match &event {
383 Event::Mouse(mouse::Event::ButtonPressed(mouse::Button::Left))
384 | Event::Touch(touch::Event::FingerPressed { .. }) => {
385 if let Some(cursor_position) = cursor.position_over(layout.bounds()) {
386 state.is_focused = true;
387 state.focus_visible = false;
388
389 if state.keyboard_modifiers.command() {
390 let _ = self.default.map(change);
391 state.is_dragging = false;
392 } else {
393 let _ = locate(cursor_position).map(change);
394 state.is_dragging = true;
395 }
396
397 shell.capture_event();
398 } else {
399 state.is_focused = false;
400 state.focus_visible = false;
401 }
402 }
403 Event::Mouse(mouse::Event::ButtonReleased(mouse::Button::Left))
404 | Event::Touch(touch::Event::FingerLifted { .. })
405 | Event::Touch(touch::Event::FingerLost { .. }) => {
406 if state.is_dragging {
407 if let Some(on_release) = self.on_release.clone() {
408 shell.publish(on_release);
409 }
410 state.is_dragging = false;
411 }
412 }
413 Event::Mouse(mouse::Event::CursorMoved { .. })
414 | Event::Touch(touch::Event::FingerMoved { .. }) => {
415 if state.is_dragging {
416 let _ = cursor.land().position().and_then(locate).map(change);
417
418 shell.capture_event();
419 }
420 }
421 Event::Mouse(mouse::Event::WheelScrolled { delta })
422 if state.keyboard_modifiers.control() =>
423 {
424 if cursor.is_over(layout.bounds()) {
425 let delta = match delta {
426 mouse::ScrollDelta::Lines { x: _, y } => y,
427 mouse::ScrollDelta::Pixels { x: _, y } => y,
428 };
429
430 if *delta < 0.0 {
431 let _ = decrement(current_value).map(change);
432 } else {
433 let _ = increment(current_value).map(change);
434 }
435
436 shell.capture_event();
437 }
438 }
439 Event::Keyboard(keyboard::Event::KeyPressed { key, .. }) => {
440 if cursor.is_over(layout.bounds()) || state.is_focused {
441 match key {
442 Key::Named(key::Named::ArrowUp | key::Named::ArrowRight) => {
443 let _ = increment(current_value).map(change);
444 shell.capture_event();
445 }
446 Key::Named(key::Named::ArrowDown | key::Named::ArrowLeft) => {
447 let _ = decrement(current_value).map(change);
448 shell.capture_event();
449 }
450 Key::Named(key::Named::PageUp) => {
451 let _ = page_increment(current_value).map(change);
452 shell.capture_event();
453 }
454 Key::Named(key::Named::PageDown) => {
455 let _ = page_decrement(current_value).map(change);
456 shell.capture_event();
457 }
458 Key::Named(key::Named::Home) => {
459 change(*self.range.start());
460 shell.capture_event();
461 }
462 Key::Named(key::Named::End) => {
463 change(*self.range.end());
464 shell.capture_event();
465 }
466 Key::Named(key::Named::Escape) => {
467 if state.is_focused {
468 state.is_focused = false;
469 state.focus_visible = false;
470 shell.capture_event();
471 }
472 }
473 _ => (),
474 }
475 }
476 }
477 Event::Keyboard(keyboard::Event::ModifiersChanged(modifiers)) => {
478 state.keyboard_modifiers = *modifiers;
479 }
480 _ => {}
481 }
482 };
483
484 update();
485
486 let current_status = if state.is_dragging {
487 Status::Dragged
488 } else if state.focus_visible {
489 Status::Focused
490 } else if cursor.is_over(layout.bounds()) {
491 Status::Hovered
492 } else {
493 Status::Active
494 };
495
496 if let Event::Window(window::Event::RedrawRequested(_now)) = event {
497 self.status = Some(current_status);
498 } else if self.status.is_some_and(|status| status != current_status) {
499 shell.request_redraw();
500 }
501 }
502
503 fn draw(
504 &self,
505 _tree: &Tree,
506 renderer: &mut Renderer,
507 theme: &Theme,
508 _style: &renderer::Style,
509 layout: Layout<'_>,
510 _cursor: mouse::Cursor,
511 _viewport: &Rectangle,
512 ) {
513 let bounds = layout.bounds();
514
515 let style = theme.style(&self.class, self.status.unwrap_or(Status::Active));
516
517 let (handle_width, handle_height, handle_border_radius) = match style.handle.shape {
518 HandleShape::Circle { radius } => (radius * 2.0, radius * 2.0, radius.into()),
519 HandleShape::Rectangle {
520 width,
521 border_radius,
522 } => (f32::from(width), bounds.height, border_radius),
523 };
524
525 let value = self.value.into() as f32;
526 let (range_start, range_end) = {
527 let (start, end) = self.range.clone().into_inner();
528
529 (start.into() as f32, end.into() as f32)
530 };
531
532 let offset = if range_start >= range_end {
533 0.0
534 } else {
535 (bounds.width - handle_width) * (value - range_start) / (range_end - range_start)
536 };
537
538 let rail_y = bounds.y + bounds.height / 2.0;
539
540 renderer.fill_quad(
541 renderer::Quad {
542 bounds: Rectangle {
543 x: bounds.x,
544 y: rail_y - style.rail.width / 2.0,
545 width: offset + handle_width / 2.0,
546 height: style.rail.width,
547 },
548 border: style.rail.border,
549 ..renderer::Quad::default()
550 },
551 style.rail.backgrounds.0,
552 );
553
554 renderer.fill_quad(
555 renderer::Quad {
556 bounds: Rectangle {
557 x: bounds.x + offset + handle_width / 2.0,
558 y: rail_y - style.rail.width / 2.0,
559 width: bounds.width - offset - handle_width / 2.0,
560 height: style.rail.width,
561 },
562 border: style.rail.border,
563 ..renderer::Quad::default()
564 },
565 style.rail.backgrounds.1,
566 );
567
568 renderer.fill_quad(
569 renderer::Quad {
570 bounds: Rectangle {
571 x: bounds.x + offset,
572 y: rail_y - handle_height / 2.0,
573 width: handle_width,
574 height: handle_height,
575 },
576 border: Border {
577 radius: handle_border_radius,
578 width: style.handle.border_width,
579 color: style.handle.border_color,
580 },
581 shadow: style.handle.shadow,
582 ..renderer::Quad::default()
583 },
584 style.handle.background,
585 );
586 }
587
588 fn mouse_interaction(
589 &self,
590 tree: &Tree,
591 layout: Layout<'_>,
592 cursor: mouse::Cursor,
593 _viewport: &Rectangle,
594 _renderer: &Renderer,
595 ) -> mouse::Interaction {
596 let state = tree.state.downcast_ref::<State>();
597
598 if state.is_dragging {
599 if cfg!(target_os = "windows") {
602 mouse::Interaction::Pointer
603 } else {
604 mouse::Interaction::Grabbing
605 }
606 } else if cursor.is_over(layout.bounds()) {
607 if cfg!(target_os = "windows") {
608 mouse::Interaction::Pointer
609 } else {
610 mouse::Interaction::Grab
611 }
612 } else {
613 mouse::Interaction::default()
614 }
615 }
616}
617
618impl<'a, T, Message, Theme, Renderer> From<Slider<'a, T, Message, Theme>>
619 for Element<'a, Message, Theme, Renderer>
620where
621 T: Copy + Into<f64> + num_traits::FromPrimitive + 'a,
622 Message: Clone + 'a,
623 Theme: Catalog + 'a,
624 Renderer: core::Renderer + 'a,
625{
626 fn from(slider: Slider<'a, T, Message, Theme>) -> Element<'a, Message, Theme, Renderer> {
627 Element::new(slider)
628 }
629}
630
631#[derive(Debug, Clone, Copy, PartialEq, Eq, Default)]
632struct State {
633 is_dragging: bool,
634 is_focused: bool,
635 focus_visible: bool,
636 keyboard_modifiers: keyboard::Modifiers,
637}
638
639impl Focusable for State {
640 fn is_focused(&self) -> bool {
641 self.is_focused
642 }
643
644 fn focus(&mut self) {
645 self.is_focused = true;
646 self.focus_visible = true;
647 }
648
649 fn unfocus(&mut self) {
650 self.is_focused = false;
651 self.focus_visible = false;
652 }
653}
654
655#[derive(Debug, Clone, Copy, PartialEq, Eq)]
657pub enum Status {
658 Active,
660 Hovered,
662 Dragged,
664 Focused,
666}
667
668#[derive(Debug, Clone, Copy, PartialEq)]
670pub struct Style {
671 pub rail: Rail,
673 pub handle: Handle,
675}
676
677impl Style {
678 pub fn with_circular_handle(mut self, radius: impl Into<Pixels>) -> Self {
681 self.handle.shape = HandleShape::Circle {
682 radius: radius.into().0,
683 };
684 self
685 }
686}
687
688#[derive(Debug, Clone, Copy, PartialEq)]
690pub struct Rail {
691 pub backgrounds: (Background, Background),
693 pub width: f32,
695 pub border: Border,
697}
698
699#[derive(Debug, Clone, Copy, PartialEq)]
701pub struct Handle {
702 pub shape: HandleShape,
704 pub background: Background,
706 pub border_width: f32,
708 pub border_color: Color,
710 pub shadow: Shadow,
712}
713
714#[derive(Debug, Clone, Copy, PartialEq)]
716pub enum HandleShape {
717 Circle {
719 radius: f32,
721 },
722 Rectangle {
724 width: u16,
726 border_radius: border::Radius,
728 },
729}
730
731pub trait Catalog: Sized {
733 type Class<'a>;
735
736 fn default<'a>() -> Self::Class<'a>;
738
739 fn style(&self, class: &Self::Class<'_>, status: Status) -> Style;
741}
742
743pub type StyleFn<'a, Theme> = Box<dyn Fn(&Theme, Status) -> Style + 'a>;
745
746impl Catalog for Theme {
747 type Class<'a> = StyleFn<'a, Self>;
748
749 fn default<'a>() -> Self::Class<'a> {
750 Box::new(default)
751 }
752
753 fn style(&self, class: &Self::Class<'_>, status: Status) -> Style {
754 class(self, status)
755 }
756}
757
758pub fn default(theme: &Theme, status: Status) -> Style {
760 let palette = theme.palette();
761
762 let color = match status {
763 Status::Active => palette.primary.base.color,
764 Status::Hovered | Status::Focused => palette.primary.strong.color,
765 Status::Dragged => palette.primary.weak.color,
766 };
767
768 let (handle_border_color, handle_border_width, handle_shadow) = match status {
769 Status::Focused => {
770 let accent = palette.primary.strong.color;
771 let page_bg = palette.background.base.color;
772 (
773 palette::focus_border_color(color, accent, page_bg),
774 2.0,
775 palette::focus_shadow(accent, page_bg),
776 )
777 }
778 _ => (Color::TRANSPARENT, 0.0, Shadow::default()),
779 };
780
781 Style {
782 rail: Rail {
783 backgrounds: (color.into(), palette.background.strong.color.into()),
784 width: 4.0,
785 border: Border {
786 radius: 2.0.into(),
787 width: 0.0,
788 color: Color::TRANSPARENT,
789 },
790 },
791 handle: Handle {
792 shape: HandleShape::Circle { radius: 7.0 },
793 background: color.into(),
794 border_color: handle_border_color,
795 border_width: handle_border_width,
796 shadow: handle_shadow,
797 },
798 }
799}
800
801#[cfg(test)]
802mod tests {
803 use super::*;
804 use crate::core::widget::operation::focusable::Focusable;
805
806 #[test]
807 fn focusable_trait() {
808 let mut state = State::default();
809 assert!(!state.is_focused());
810 assert!(!state.focus_visible);
811 state.focus();
812 assert!(state.is_focused());
813 assert!(state.focus_visible);
814 state.unfocus();
815 assert!(!state.is_focused());
816 assert!(!state.focus_visible);
817 }
818
819 #[test]
820 fn default_state_not_focused() {
821 let state = State::default();
822 assert!(!state.is_focused);
823 assert!(!state.is_dragging);
824 assert!(!state.focus_visible);
825 }
826
827 #[test]
828 fn focus_independent_of_drag() {
829 let mut state = State::default();
830
831 state.focus();
832 assert!(!state.is_dragging);
833
834 state.is_dragging = true;
835 assert!(state.is_focused());
836
837 state.unfocus();
838 assert!(state.is_dragging);
839 }
840}