Add step member to slider widgets

Both the native and the web slider now have a member `step` to control
the least possible change of the slider's value. It defaults to 1.0
for all sliders and can be adjusted with the step method.

examples/color_palette/src/main.rs

@@ -288,9 +288,15 @@ impl<C: 'static + ColorSpace + Copy> ColorPicker<C> {
             .spacing(10)
             .align_items(Align::Center)
             .push(Text::new(C::LABEL).width(Length::Units(50)))
-            .push(Slider::new(s1, cr1, c1, move |v| C::new(v, c2, c3)))
+            .push(
-            .push(Slider::new(s2, cr2, c2, move |v| C::new(c1, v, c3)))
+                Slider::new(s1, cr1, c1, move |v| C::new(v, c2, c3)).step(0.01),
-            .push(Slider::new(s3, cr3, c3, move |v| C::new(c1, c2, v)))
+            )
+            .push(
+                Slider::new(s2, cr2, c2, move |v| C::new(c1, v, c3)).step(0.01),
+            )
+            .push(
+                Slider::new(s3, cr3, c3, move |v| C::new(c1, c2, v)).step(0.01),
+            )
             .push(
                 Text::new(color.to_string())
                     .width(Length::Units(185))

examples/integration/src/controls.rs

@@ -48,24 +48,33 @@ impl Program for Controls {
         let sliders = Row::new()
             .width(Length::Units(500))
             .spacing(20)
-            .push(Slider::new(r, 0.0..=1.0, background_color.r, move |r| {
+            .push(
+                Slider::new(r, 0.0..=1.0, background_color.r, move |r| {
                     Message::BackgroundColorChanged(Color {
                         r,
                         ..background_color
                     })
-            }))
+                })
-            .push(Slider::new(g, 0.0..=1.0, background_color.g, move |g| {
+                .step(0.01),
+            )
+            .push(
+                Slider::new(g, 0.0..=1.0, background_color.g, move |g| {
                     Message::BackgroundColorChanged(Color {
                         g,
                         ..background_color
                     })
-            }))
+                })
-            .push(Slider::new(b, 0.0..=1.0, background_color.b, move |b| {
+                .step(0.01),
+            )
+            .push(
+                Slider::new(b, 0.0..=1.0, background_color.b, move |b| {
                     Message::BackgroundColorChanged(Color {
                         b,
                         ..background_color
                     })
-            }));
+                })
+                .step(0.01),
+            );
 
         Row::new()
             .width(Length::Fill)

examples/tour/src/main.rs

@@ -500,15 +500,24 @@ impl<'a> Step {
             .push(
                 Row::new()
                     .spacing(10)
-                    .push(Slider::new(red, 0.0..=1.0, color.r, move |r| {
+                    .push(
+                        Slider::new(red, 0.0..=1.0, color.r, move |r| {
                             StepMessage::TextColorChanged(Color { r, ..color })
-                    }))
+                        })
-                    .push(Slider::new(green, 0.0..=1.0, color.g, move |g| {
+                        .step(0.01),
+                    )
+                    .push(
+                        Slider::new(green, 0.0..=1.0, color.g, move |g| {
                             StepMessage::TextColorChanged(Color { g, ..color })
-                    }))
+                        })
-                    .push(Slider::new(blue, 0.0..=1.0, color.b, move |b| {
+                        .step(0.01),
+                    )
+                    .push(
+                        Slider::new(blue, 0.0..=1.0, color.b, move |b| {
                             StepMessage::TextColorChanged(Color { b, ..color })
-                    })),
+                        })
+                        .step(0.01),
+                    ),
             );
 
         Self::container("Text")

native/src/widget/slider.rs

@@ -16,6 +16,8 @@ use std::{hash::Hash, ops::RangeInclusive};
 ///
 /// A [`Slider`] will try to fill the horizontal space of its container.
 ///
+/// The step size defaults to 1.0.
+///
 /// [`Slider`]: struct.Slider.html
 ///
 /// # Example
@@ -38,6 +40,7 @@ use std::{hash::Hash, ops::RangeInclusive};
 pub struct Slider<'a, Message, Renderer: self::Renderer> {
     state: &'a mut State,
     range: RangeInclusive<f32>,
+    step: f32,
     value: f32,
     on_change: Box<dyn Fn(f32) -> Message>,
     on_release: Option<Message>,
@@ -71,6 +74,7 @@ impl<'a, Message, Renderer: self::Renderer> Slider<'a, Message, Renderer> {
             state,
             value: value.max(*range.start()).min(*range.end()),
             range,
+            step: 1.0,
             on_change: Box::new(on_change),
             on_release: None,
             width: Length::Fill,
@@ -106,6 +110,14 @@ impl<'a, Message, Renderer: self::Renderer> Slider<'a, Message, Renderer> {
         self.style = style.into();
         self
     }
+
+    /// Sets the step size of the [`Slider`].
+    ///
+    /// [`Slider`]: struct.Slider.html
+    pub fn step(mut self, step: f32) -> Self {
+        self.step = step;
+        self
+    }
 }
 
 /// The local state of a [`Slider`].
@@ -164,16 +176,16 @@ where
     ) {
         let mut change = || {
             let bounds = layout.bounds();
-
             if cursor_position.x <= bounds.x {
                 messages.push((self.on_change)(*self.range.start()));
             } else if cursor_position.x >= bounds.x + bounds.width {
                 messages.push((self.on_change)(*self.range.end()));
             } else {
                 let percent = (cursor_position.x - bounds.x) / bounds.width;
-                let value = (self.range.end() - self.range.start()) * percent
+                let steps = (percent * (self.range.end() - self.range.start())
-                    + self.range.start();
+                    / self.step)
-
+                    .round();
+                let value = steps * self.step + self.range.start();
                 messages.push((self.on_change)(value));
             }
         };

web/src/widget/slider.rs

@@ -16,6 +16,8 @@ use std::{ops::RangeInclusive, rc::Rc};
 ///
 /// A [`Slider`] will try to fill the horizontal space of its container.
 ///
+/// The step size defaults to 1.0.
+///
 /// [`Slider`]: struct.Slider.html
 ///
 /// # Example
@@ -37,6 +39,7 @@ use std::{ops::RangeInclusive, rc::Rc};
 pub struct Slider<'a, Message> {
     _state: &'a mut State,
     range: RangeInclusive<f32>,
+    step: f32,
     value: f32,
     on_change: Rc<Box<dyn Fn(f32) -> Message>>,
     width: Length,
@@ -69,6 +72,7 @@ impl<'a, Message> Slider<'a, Message> {
             _state: state,
             value: value.max(*range.start()).min(*range.end()),
             range,
+            step: 1.0,
             on_change: Rc::new(Box::new(on_change)),
             width: Length::Fill,
             style: Default::default(),
@@ -90,6 +94,14 @@ impl<'a, Message> Slider<'a, Message> {
         self.style = style.into();
         self
     }
+
+    /// Sets the step size of the [`Slider`].
+    ///
+    /// [`Slider`]: struct.Slider.html
+    pub fn step(mut self, step: f32) -> Self {
+        self.step = step;
+        self
+    }
 }
 
 impl<'a, Message> Widget<Message> for Slider<'a, Message>
@@ -110,15 +122,15 @@ where
         let min = bumpalo::format!(in bump, "{}", start);
         let max = bumpalo::format!(in bump, "{}", end);
         let value = bumpalo::format!(in bump, "{}", self.value);
+        let step = bumpalo::format!(in bump, "{}", self.step);
 
         let on_change = self.on_change.clone();
         let event_bus = bus.clone();
 
-        // TODO: Make `step` configurable
         // TODO: Styling
         input(bump)
             .attr("type", "range")
-            .attr("step", "0.01")
+            .attr("step", step.into_bump_str())
             .attr("min", min.into_bump_str())
             .attr("max", max.into_bump_str())
             .attr("value", value.into_bump_str())