Merge pull request matplotlib#19265 from ianhi/style-slider-for-real

Change styling of slider widgets

Author: jklymak

doc/users/next_whats_new/slider_styling.rst

@@ -0,0 +1,42 @@
+Updated the appearance of Slider widgets
+----------------------------------------
+
+The appearance of `~.Slider` and `~.RangeSlider` widgets
+were updated and given new styling parameters for the
+added handles.
+
+.. plot::
+
+    import matplotlib.pyplot as plt
+    from matplotlib.widgets import Slider
+
+    plt.figure(figsize=(4, 2))
+    ax_old = plt.axes([0.2, 0.65, 0.65, 0.1])
+    ax_new = plt.axes([0.2, 0.25, 0.65, 0.1])
+    Slider(ax_new, "New", 0, 1)
+
+    ax = ax_old
+    valmin = 0
+    valinit = 0.5
+    ax.set_xlim([0, 1])
+    ax_old.axvspan(valmin, valinit, 0, 1)
+    ax.axvline(valinit, 0, 1, color="r", lw=1)
+    ax.set_xticks([])
+    ax.set_yticks([])
+    ax.text(
+        -0.02,
+        0.5,
+        "Old",
+        transform=ax.transAxes,
+        verticalalignment="center",
+        horizontalalignment="right",
+    )
+
+    ax.text(
+        1.02,
+        0.5,
+        "0.5",
+        transform=ax.transAxes,
+        verticalalignment="center",
+        horizontalalignment="left",
+    )

examples/widgets/slider_demo.py

@@ -32,14 +32,11 @@ def f(t, amplitude, frequency):
 line, = plt.plot(t, f(t, init_amplitude, init_frequency), lw=2)
 ax.set_xlabel('Time [s]')
 
-axcolor = 'lightgoldenrodyellow'
-ax.margins(x=0)
-
 # adjust the main plot to make room for the sliders
 plt.subplots_adjust(left=0.25, bottom=0.25)
 
 # Make a horizontal slider to control the frequency.
-axfreq = plt.axes([0.25, 0.1, 0.65, 0.03], facecolor=axcolor)
+axfreq = plt.axes([0.25, 0.1, 0.65, 0.03])
 freq_slider = Slider(
     ax=axfreq,
     label='Frequency [Hz]',
@@ -49,7 +46,7 @@ def f(t, amplitude, frequency):
 )
 
 # Make a vertically oriented slider to control the amplitude
-axamp = plt.axes([0.1, 0.25, 0.0225, 0.63], facecolor=axcolor)
+axamp = plt.axes([0.1, 0.25, 0.0225, 0.63])
 amp_slider = Slider(
     ax=axamp,
     label="Amplitude",
@@ -72,7 +69,7 @@ def update(val):
 
 # Create a `matplotlib.widgets.Button` to reset the sliders to initial values.
 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):

examples/widgets/slider_snap_demo.py

@@ -28,9 +28,8 @@
 plt.subplots_adjust(bottom=0.25)
 l, = plt.plot(t, s, lw=2)
 
-slider_bkd_color = 'lightgoldenrodyellow'
-ax_freq = plt.axes([0.25, 0.1, 0.65, 0.03], facecolor=slider_bkd_color)
-ax_amp = plt.axes([0.25, 0.15, 0.65, 0.03], facecolor=slider_bkd_color)
+ax_freq = plt.axes([0.25, 0.1, 0.65, 0.03])
+ax_amp = plt.axes([0.25, 0.15, 0.65, 0.03])
 
 # define the values to use for snapping
 allowed_amplitudes = np.concatenate([np.linspace(.1, 5, 100), [6, 7, 8, 9]])
@@ -60,7 +59,7 @@ def update(val):
 samp.on_changed(update)
 
 ax_reset = plt.axes([0.8, 0.025, 0.1, 0.04])
-button = Button(ax_reset, 'Reset', color=slider_bkd_color, hovercolor='0.975')
+button = Button(ax_reset, 'Reset', hovercolor='0.975')
 
 
 def reset(event):

lib/matplotlib/tests/test_widgets.py

@@ -437,7 +437,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,
@@ -446,7 +446,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"])
@@ -463,15 +463,15 @@ def test_range_slider(orientation):
         valinit=[0.1, 0.34]
     )
     box = slider.poly.get_extents().transformed(ax.transAxes.inverted())
-    assert_allclose(box.get_points().flatten()[idx], [0.1, 0, 0.34, 1])
+    assert_allclose(box.get_points().flatten()[idx], [0.1, 0.25, 0.34, 0.75])
 
     # Check initial value is set correctly
     assert_allclose(slider.val, (0.1, 0.34))
 
     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))