Change styling of slider widgets

ianhi · ianhi · commit ca058d1a376e · 2021-01-09T00:43:26.000-05:00
Goal is to add a clear handle for the user to grab and to provide visual feedback via color change of when the slider has been grabbed.
diff --git a/examples/widgets/slider_demo.py b/examples/widgets/slider_demo.py
@@ -23,9 +23,8 @@
 l, = plt.plot(t, s, lw=2)
 ax.margins(x=0)
 
-axcolor = 'lightgoldenrodyellow'
-axfreq = plt.axes([0.25, 0.1, 0.65, 0.03], facecolor=axcolor)
-axamp = plt.axes([0.25, 0.15, 0.65, 0.03], facecolor=axcolor)
+axfreq = plt.axes([0.25, 0.1, 0.65, 0.03])
+axamp = plt.axes([0.25, 0.15, 0.65, 0.03])
 
 sfreq = Slider(axfreq, 'Freq', 0.1, 30.0, valinit=f0, valstep=delta_f)
 samp = Slider(axamp, 'Amp', 0.1, 10.0, valinit=a0)
@@ -42,15 +41,15 @@ def update(val):
 samp.on_changed(update)
 
 resetax = plt.axes([0.8, 0.025, 0.1, 0.04])
-button = Button(resetax, 'Reset', color=axcolor, hovercolor='0.975')
+button = Button(resetax, 'Reset', hovercolor='0.975')
 
 
 def reset(event):
     sfreq.reset()
     samp.reset()
 button.on_clicked(reset)
 
-rax = plt.axes([0.025, 0.5, 0.15, 0.15], facecolor=axcolor)
+rax = plt.axes([0.025, 0.5, 0.15, 0.15])
 radio = RadioButtons(rax, ('red', 'blue', 'green'), active=0)
 
 
diff --git a/lib/matplotlib/tests/test_widgets.py b/lib/matplotlib/tests/test_widgets.py
@@ -286,7 +286,7 @@ def test_slider_horizontal_vertical():
     assert slider.val == 10
     # check the dimension of the slider patch in axes units
     box = slider.poly.get_extents().transformed(ax.transAxes.inverted())
-    assert_allclose(box.bounds, [0, 0, 10/24, 1])
+    assert_allclose(box.bounds, [0, .25, 10/24, .5])
 
     fig, ax = plt.subplots()
     slider = widgets.Slider(ax=ax, label='', valmin=0, valmax=24,
@@ -295,7 +295,7 @@ def test_slider_horizontal_vertical():
     assert slider.val == 10
     # check the dimension of the slider patch in axes units
     box = slider.poly.get_extents().transformed(ax.transAxes.inverted())
-    assert_allclose(box.bounds, [0, 0, 1, 10/24])
+    assert_allclose(box.bounds, [.25, 0, .5, 10/24])
 
 
 @pytest.mark.parametrize("orientation", ["horizontal", "vertical"])
@@ -311,12 +311,12 @@ def test_range_slider(orientation):
         ax=ax, label="", valmin=0.0, valmax=1.0, orientation=orientation
     )
     box = slider.poly.get_extents().transformed(ax.transAxes.inverted())
-    assert_allclose(box.get_points().flatten()[idx], [0.25, 0, 0.75, 1])
+    assert_allclose(box.get_points().flatten()[idx], [0.25, .25, 0.75, .75])
 
     slider.set_val((0.2, 0.6))
     assert_allclose(slider.val, (0.2, 0.6))
     box = slider.poly.get_extents().transformed(ax.transAxes.inverted())
-    assert_allclose(box.get_points().flatten()[idx], [0.2, 0, 0.6, 1])
+    assert_allclose(box.get_points().flatten()[idx], [0.2, .25, 0.6, .75])
 
     slider.set_val((0.2, 0.1))
     assert_allclose(slider.val, (0.1, 0.2))
diff --git a/lib/matplotlib/widgets.py b/lib/matplotlib/widgets.py
@@ -267,8 +267,7 @@ def __init__(self, ax, orientation, closedmin, closedmax,
         self._fmt.set_useOffset(False)  # No additive offset.
         self._fmt.set_useMathText(True)  # x sign before multiplicative offset.
 
-        ax.set_xticks([])
-        ax.set_yticks([])
+        ax.set_axis_off()
         ax.set_navigate(False)
         self.connect_event("button_press_event", self._update)
         self.connect_event("button_release_event", self._update)
@@ -329,7 +328,9 @@ class Slider(SliderBase):
     def __init__(self, ax, label, valmin, valmax, valinit=0.5, valfmt=None,
                  closedmin=True, closedmax=True, slidermin=None,
                  slidermax=None, dragging=True, valstep=None,
-                 orientation='horizontal', *, initcolor='r', **kwargs):
+                 orientation='horizontal', *, initcolor='r',
+                 handle_color_grabbed=None, handle_color_released='white',
+                 handle_edgecolor='.75', handle_size=10, **kwargs):
         """
         Parameters
         ----------
@@ -380,6 +381,19 @@ def __init__(self, ax, label, valmin, valmax, valinit=0.5, valfmt=None,
             The color of the line at the *valinit* position. Set to ``'none'``
             for no line.
 
+        handle_color_grabbed : color or None, default: None
+            The color of the circular slider handle when grabbed. If *None*
+            the same color as active part of the slider will be used.
+
+        handle_color_released : color, default: 'white'
+            The color of the circular slider handle when released.
+
+        handle_edgecolor : color, default: '.75'
+            The edgecolor of the circle slider handle.
+
+        handle_size : int, deafult: 10
+            The size of circular slider handle.
+
         Notes
         -----
         Additional kwargs are passed on to ``self.poly`` which is the
@@ -404,11 +418,41 @@ def __init__(self, ax, label, valmin, valmax, valinit=0.5, valfmt=None,
         self.val = valinit
         self.valinit = valinit
         if orientation == 'vertical':
-            self.poly = ax.axhspan(valmin, valinit, 0, 1, **kwargs)
-            self.hline = ax.axhline(valinit, 0, 1, color=initcolor, lw=1)
+            self.poly = ax.axhspan(valmin, valinit, .25, .75, **kwargs)
+            self.hline = ax.axhline(valinit, .25, .75, color=initcolor, lw=1)
+            handleXY = [[0.5], [valinit]]
+            self._above_rect = Rectangle(
+                (0.25, valinit),
+                height=valmax - valinit,
+                width=0.5,
+                transform=ax.get_yaxis_transform(),
+            )
         else:
-            self.poly = ax.axvspan(valmin, valinit, 0, 1, **kwargs)
-            self.vline = ax.axvline(valinit, 0, 1, color=initcolor, lw=1)
+            self.poly = ax.axvspan(valmin, valinit, .25, .75, **kwargs)
+            self.vline = ax.axvline(valinit, .25, .75, color=initcolor, lw=1)
+            handleXY = [[valinit], [0.5]]
+            self._above_rect = Rectangle(
+                (valinit, 0.25),
+                width=valmax - valinit,
+                height=0.5,
+                transform=ax.get_xaxis_transform(),
+            )
+        self._above_rect.set_facecolor('grey')
+        self._handle, = ax.plot(
+            *handleXY,
+            "o",
+            markersize=handle_size,
+            markeredgecolor=handle_edgecolor,
+            markerfacecolor=handle_color_released,
+            clip_on=False
+        )
+        ax.add_patch(self._above_rect)
+
+        self._handle_color_released = handle_color_released
+        self._handle_edgecolor = handle_edgecolor
+        if handle_color_grabbed is None:
+            handle_color_grabbed = self.poly.get_facecolor()
+        self._handle_color_grabbed = handle_color_grabbed
 
         if orientation == 'vertical':
             self.label = ax.text(0.5, 1.02, label, transform=ax.transAxes,
@@ -472,7 +516,13 @@ def _update(self, event):
                event.inaxes != self.ax)):
             self.drag_active = False
             event.canvas.release_mouse(self.ax)
+            self._handle.set_markeredgecolor(self._handle_edgecolor)
+            self._handle.set_markerfacecolor(self._handle_color_released)
+            self.ax.figure.canvas.draw_idle()
             return
+        if event.name == 'button_press_event':
+            self._handle.set_markeredgecolor(self._handle_color_grabbed)
+            self._handle.set_markerfacecolor(self._handle_color_grabbed)
         if self.orientation == 'vertical':
             val = self._value_in_bounds(event.ydata)
         else:
@@ -499,11 +549,17 @@ def set_val(self, val):
         """
         xy = self.poly.xy
         if self.orientation == 'vertical':
-            xy[1] = 0, val
-            xy[2] = 1, val
+            xy[1] = .25, val
+            xy[2] = .75, val
+            self._above_rect.set_y(val)
+            self._above_rect.set_height(self.valmax-val)
+            self._handle.set_ydata([val])
         else:
-            xy[2] = val, 1
-            xy[3] = val, 0
+            xy[2] = val, .75
+            xy[3] = val, .25
+            self._above_rect.set_x(val)
+            self._above_rect.set_width(self.valmax-val)
+            self._handle.set_xdata([val])
         self.poly.xy = xy
         self.valtext.set_text(self._format(val))
         if self.drawon:
@@ -558,6 +614,10 @@ def __init__(
         dragging=True,
         valstep=None,
         orientation="horizontal",
+        handle_color_grabbed=None,
+        handle_color_released='white',
+        handle_edgecolor='.75',
+        handle_size=10,
         **kwargs,
     ):
         """
@@ -598,6 +658,19 @@ def __init__(
         orientation : {'horizontal', 'vertical'}, default: 'horizontal'
             The orientation of the slider.
 
+        handle_color_grabbed : color or None, default: None
+            The color of the circular slider handles when grabbed. If *None*
+            the same color as active part of the slider will be used.
+
+        handle_color_released : color, default: 'white'
+            The color of the circular slider handles when released.
+
+        handle_edgecolor : color, default: '.75'
+            The edgecolor of the circular slider handles.
+
+        handle_size : int, deafult: 10
+            The size of circular slider handles.
+
         Notes
         -----
         Additional kwargs are passed on to ``self.poly`` which is the
@@ -620,8 +693,64 @@ def __init__(
         self.valinit = valinit
         if orientation == "vertical":
             self.poly = ax.axhspan(valinit[0], valinit[1], 0, 1, **kwargs)
+            handleXY_1 = [.5, valinit[0]]
+            handleXY_2 = [.5, valinit[1]]
+            self._above_rect = Rectangle(
+                (.25, valinit[1]),
+                height=valmax - valinit[1],
+                width=0.5,
+                transform=ax.get_yaxis_transform(),
+            )
+            self._below_rect = Rectangle(
+                (valmin, 0.25),
+                width=valinit[0] - valmin,
+                height=0.5,
+                transform=ax.get_xaxis_transform(),
+            )
         else:
             self.poly = ax.axvspan(valinit[0], valinit[1], 0, 1, **kwargs)
+            handleXY_1 = [valinit[0], .5]
+            handleXY_2 = [valinit[1], .5]
+            self._above_rect = Rectangle(
+                (valinit[1], 0.25),
+                width=valmax - valinit[1],
+                height=0.5,
+                transform=ax.get_xaxis_transform(),
+            )
+            self._below_rect = Rectangle(
+                (valmin, 0.25),
+                width=valinit[0] - valmin,
+                height=0.5,
+                transform=ax.get_xaxis_transform(),
+            )
+        self._above_rect.set_facecolor('grey')
+        self._below_rect.set_facecolor('grey')
+        ax.add_patch(self._above_rect)
+        ax.add_patch(self._below_rect)
+        self._handles = [
+            ax.plot(
+                *handleXY_1,
+                "o",
+                markersize=handle_size,
+                markeredgecolor=handle_edgecolor,
+                markerfacecolor=handle_color_released,
+                clip_on=False
+            )[0],
+            ax.plot(
+                *handleXY_2,
+                "o",
+                markersize=handle_size,
+                markeredgecolor=handle_edgecolor,
+                markerfacecolor=handle_color_released,
+                clip_on=False
+            )[0]
+        ]
+
+        self._handle_color_released = handle_color_released
+        self._handle_edgecolor = handle_edgecolor
+        if handle_color_grabbed is None:
+            handle_color_grabbed = self.poly.get_facecolor()
+        self._handle_color_grabbed = handle_color_grabbed
 
         if orientation == "vertical":
             self.label = ax.text(
@@ -660,6 +789,7 @@ def __init__(
                 horizontalalignment="left",
             )
 
+        self._active_handle = None
         self.set_val(valinit)
 
     def _min_in_bounds(self, min):
@@ -696,6 +826,8 @@ def _update_val_from_pos(self, pos):
         else:
             val = self._max_in_bounds(pos)
             self.set_max(val)
+        if self._active_handle:
+            self._active_handle.set_xdata([val])
 
     def _update(self, event):
         """Update the slider position."""
@@ -714,7 +846,33 @@ def _update(self, event):
         ):
             self.drag_active = False
             event.canvas.release_mouse(self.ax)
+            self.ax.figure.canvas.draw_idle()
+            for handle in self._handles:
+                handle.set_markeredgecolor(self._handle_edgecolor)
+                handle.set_markerfacecolor(self._handle_color_released)
+            self._active_handle = None
             return
+
+        # determine which handle was grabbed
+        handle = self._handles[
+            np.argmin(
+                np.abs([h.get_xdata()[0] - event.xdata for h in self._handles])
+            )
+        ]
+        # these checks ensure smooth behavior if the handles swap which one
+        # has a higher value. i.e. if one is dragged over and past the other.
+        if handle is not self._active_handle:
+            if self._active_handle is not None:
+                self._active_handle.set_markeredgecolor(
+                    self._handle_edgecolor
+                )
+                self._active_handle.set_markerfacecolor(
+                    self._handle_color_released
+                )
+            self._active_handle = handle
+        self._active_handle.set_markeredgecolor(self._handle_color_grabbed)
+        self._active_handle.set_markerfacecolor(self._handle_color_grabbed)
+
         if self.orientation == "vertical":
             self._update_val_from_pos(event.ydata)
         else:
@@ -771,17 +929,23 @@ def set_val(self, val):
         val[1] = self._max_in_bounds(val[1])
         xy = self.poly.xy
         if self.orientation == "vertical":
-            xy[0] = 0, val[0]
-            xy[1] = 0, val[1]
-            xy[2] = 1, val[1]
-            xy[3] = 1, val[0]
-            xy[4] = 0, val[0]
+            xy[0] = .25, val[0]
+            xy[1] = .25, val[1]
+            xy[2] = .75, val[1]
+            xy[3] = .75, val[0]
+            xy[4] = .25, val[0]
+            self._above_rect.set_height(self.valmax - val[1])
+            self._above_rect.set_y(val[1])
+            self._below_rect.set_height(val[0] - self.valmin)
         else:
-            xy[0] = val[0], 0
-            xy[1] = val[0], 1
-            xy[2] = val[1], 1
-            xy[3] = val[1], 0
-            xy[4] = val[0], 0
+            xy[0] = val[0], .25
+            xy[1] = val[0], .75
+            xy[2] = val[1], .75
+            xy[3] = val[1], .25
+            xy[4] = val[0], .25
+            self._above_rect.set_width(self.valmax - val[1])
+            self._above_rect.set_x(val[1])
+            self._below_rect.set_width(val[0] - self.valmin)
         self.poly.xy = xy
         self.valtext.set_text(self._format(val))
         if self.drawon:
