Merge pull request #22432 from mk56-spn/sheared_slider_implementation_clean_ii

Implement a sheared slider for the updated design

osu.Game.Rulesets.Mania/ManiaSettingsSubsection.cs

@@ -48,7 +48,7 @@ namespace osu.Game.Rulesets.Mania
             };
         }
 
-        private partial class ManiaScrollSlider : OsuSliderBar<double>
+        private partial class ManiaScrollSlider : RoundedSliderBar<double>
         {
             public override LocalisableString TooltipText => RulesetSettingsStrings.ScrollSpeedTooltip(Current.Value, (int)Math.Round(DrawableManiaRuleset.MAX_TIME_RANGE / Current.Value));
         }

osu.Game.Tests/Visual/Audio/TestSceneAudioFilter.cs

@@ -31,8 +31,8 @@ namespace osu.Game.Tests.Visual.Audio
 
         private WaveformTestBeatmap beatmap;
 
-        private OsuSliderBar<int> lowPassSlider;
+        private RoundedSliderBar<int> lowPassSlider;
-        private OsuSliderBar<int> highPassSlider;
+        private RoundedSliderBar<int> highPassSlider;
 
         [BackgroundDependencyLoader]
         private void load(AudioManager audio)
@@ -52,7 +52,7 @@ namespace osu.Game.Tests.Visual.Audio
                         Text = $"Low Pass: {lowPassFilter.Cutoff}hz",
                         Font = new FontUsage(size: 40)
                     },
-                    lowPassSlider = new OsuSliderBar<int>
+                    lowPassSlider = new RoundedSliderBar<int>
                     {
                         Width = 500,
                         Height = 50,
@@ -69,7 +69,7 @@ namespace osu.Game.Tests.Visual.Audio
                         Text = $"High Pass: {highPassFilter.Cutoff}hz",
                         Font = new FontUsage(size: 40)
                     },
-                    highPassSlider = new OsuSliderBar<int>
+                    highPassSlider = new RoundedSliderBar<int>
                     {
                         Width = 500,
                         Height = 50,

osu.Game.Tests/Visual/UserInterface/TestSceneModDifficultyAdjustSettings.cs

@@ -261,7 +261,7 @@ namespace osu.Game.Tests.Visual.UserInterface
         {
             AddStep($"Set {name} slider to {value}", () =>
                 this.ChildrenOfType<DifficultyAdjustSettingsControl>().First(c => c.LabelText == name)
-                    .ChildrenOfType<OsuSliderBar<float>>().First().Current.Value = value);
+                    .ChildrenOfType<RoundedSliderBar<float>>().First().Current.Value = value);
         }
 
         private void checkBindableAtValue(string name, float? expectedValue)
@@ -275,7 +275,7 @@ namespace osu.Game.Tests.Visual.UserInterface
         {
             AddAssert($"Slider {name} at {expectedValue}", () =>
                 this.ChildrenOfType<DifficultyAdjustSettingsControl>().First(c => c.LabelText == name)
-                    .ChildrenOfType<OsuSliderBar<float>>().First().Current.Value == expectedValue);
+                    .ChildrenOfType<RoundedSliderBar<float>>().First().Current.Value == expectedValue);
         }
 
         private void setBeatmapWithDifficultyParameters(float value)

osu.Game.Tests/Visual/UserInterface/TestSceneModSelectOverlay.cs

@@ -270,7 +270,7 @@ namespace osu.Game.Tests.Visual.UserInterface
             createScreen();
             AddStep("select difficulty adjust via panel", () => getPanelForMod(typeof(OsuModDifficultyAdjust)).TriggerClick());
 
-            AddStep("set setting", () => modSelectOverlay.ChildrenOfType<OsuSliderBar<float>>().First().Current.Value = 8);
+            AddStep("set setting", () => modSelectOverlay.ChildrenOfType<RoundedSliderBar<float>>().First().Current.Value = 8);
 
             AddAssert("ensure setting is propagated", () => SelectedMods.Value.OfType<OsuModDifficultyAdjust>().Single().CircleSize.Value == 8);
 

osu.Game.Tests/Visual/UserInterface/TestSceneShearedSliderBar.cs

@@ -0,0 +1,37 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Graphics;
+using osu.Game.Graphics.UserInterface;
+using osu.Game.Overlays;
+
+namespace osu.Game.Tests.Visual.UserInterface
+{
+    public partial class TestSceneShearedSliderBar : OsuTestScene
+    {
+        [Cached]
+        private OverlayColourProvider colourProvider { get; set; } = new OverlayColourProvider(OverlayColourScheme.Purple);
+
+        private readonly BindableDouble current = new BindableDouble(5)
+        {
+            Precision = 0.1f,
+            MinValue = 0,
+            MaxValue = 15
+        };
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            Child = new ShearedSliderBar<double>
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                Current = current,
+                RelativeSizeAxes = Axes.X,
+                Width = 0.4f
+            };
+        }
+    }
+}

osu.Game/Graphics/UserInterface/ExpandableSlider.cs

@@ -21,7 +21,7 @@ namespace osu.Game.Graphics.UserInterface
     /// </summary>
     public partial class ExpandableSlider<T, TSlider> : CompositeDrawable, IExpandable, IHasCurrentValue<T>
         where T : struct, IEquatable<T>, IComparable<T>, IConvertible
-        where TSlider : OsuSliderBar<T>, new()
+        where TSlider : RoundedSliderBar<T>, new()
     {
         private readonly OsuSpriteText label;
         private readonly TSlider slider;
@@ -130,7 +130,7 @@ namespace osu.Game.Graphics.UserInterface
     /// <summary>
     /// An <see cref="IExpandable"/> implementation for the UI slider bar control.
     /// </summary>
-    public partial class ExpandableSlider<T> : ExpandableSlider<T, OsuSliderBar<T>>
+    public partial class ExpandableSlider<T> : ExpandableSlider<T, RoundedSliderBar<T>>
         where T : struct, IEquatable<T>, IComparable<T>, IConvertible
     {
     }

osu.Game/Graphics/UserInterface/Nub.cs

@@ -1,10 +1,7 @@
-// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
-#nullable disable
-
 using System;
-using JetBrains.Annotations;
 using osuTK;
 using osuTK.Graphics;
 using osu.Framework.Allocation;
@@ -58,7 +55,7 @@ namespace osu.Game.Graphics.UserInterface
         }
 
         [BackgroundDependencyLoader(true)]
-        private void load([CanBeNull] OverlayColourProvider colourProvider, OsuColour colours)
+        private void load(OverlayColourProvider? colourProvider, OsuColour colours)
         {
             AccentColour = colourProvider?.Highlight1 ?? colours.Pink;
             GlowingAccentColour = colourProvider?.Highlight1.Lighten(0.2f) ?? colours.PinkLighter;

osu.Game/Graphics/UserInterface/OsuSliderBar.cs

@@ -1,195 +1,59 @@
-// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
 // See the LICENCE file in the repository root for full licence text.
 
-#nullable disable
-
 using System;
 using System.Globalization;
-using JetBrains.Annotations;
-using osuTK;
-using osuTK.Graphics;
 using osu.Framework.Allocation;
 using osu.Framework.Audio;
 using osu.Framework.Audio.Sample;
-using osu.Framework.Extensions.Color4Extensions;
-using osu.Framework.Graphics;
-using osu.Framework.Graphics.Containers;
-using osu.Framework.Graphics.UserInterface;
 using osu.Framework.Graphics.Cursor;
-using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.UserInterface;
-using osu.Framework.Input.Events;
 using osu.Framework.Localisation;
 using osu.Framework.Utils;
-using osu.Game.Overlays;
 using osu.Game.Utils;
 
 namespace osu.Game.Graphics.UserInterface
 {
-    public partial class OsuSliderBar<T> : SliderBar<T>, IHasTooltip, IHasAccentColour
+    public abstract partial class OsuSliderBar<T> : SliderBar<T>, IHasTooltip
         where T : struct, IEquatable<T>, IComparable<T>, IConvertible
     {
-        /// <summary>
-        /// Maximum number of decimal digits to be displayed in the tooltip.
-        /// </summary>
-        private const int max_decimal_digits = 5;
-
-        private Sample sample;
-        private double lastSampleTime;
-        private T lastSampleValue;
-
-        protected readonly Nub Nub;
-        protected readonly Box LeftBox;
-        protected readonly Box RightBox;
-        private readonly Container nubContainer;
-
-        public virtual LocalisableString TooltipText { get; private set; }
-
         public bool PlaySamplesOnAdjust { get; set; } = true;
 
-        private readonly HoverClickSounds hoverClickSounds;
-
         /// <summary>
         /// Whether to format the tooltip as a percentage or the actual value.
         /// </summary>
         public bool DisplayAsPercentage { get; set; }
 
-        private Color4 accentColour;
+        public virtual LocalisableString TooltipText { get; private set; }
 
-        public Color4 AccentColour
+        /// <summary>
-        {
+        /// Maximum number of decimal digits to be displayed in the tooltip.
-            get => accentColour;
+        /// </summary>
-            set
+        private const int max_decimal_digits = 5;
-            {
-                accentColour = value;
-                LeftBox.Colour = value;
-            }
-        }
 
-        private Colour4 backgroundColour;
+        private Sample sample = null!;
 
-        public Color4 BackgroundColour
+        private double lastSampleTime;
-        {
+        private T lastSampleValue;
-            get => backgroundColour;
-            set
-            {
-                backgroundColour = value;
-                RightBox.Colour = value;
-            }
-        }
 
-        public OsuSliderBar()
+        [BackgroundDependencyLoader]
-        {
+        private void load(AudioManager audio)
-            Height = Nub.HEIGHT;
-            RangePadding = Nub.EXPANDED_SIZE / 2;
-            Children = new Drawable[]
-            {
-                new Container
-                {
-                    RelativeSizeAxes = Axes.X,
-                    AutoSizeAxes = Axes.Y,
-                    Anchor = Anchor.CentreLeft,
-                    Origin = Anchor.CentreLeft,
-                    Padding = new MarginPadding { Horizontal = 2 },
-                    Child = new CircularContainer
-                    {
-                        RelativeSizeAxes = Axes.X,
-                        AutoSizeAxes = Axes.Y,
-                        Anchor = Anchor.CentreLeft,
-                        Origin = Anchor.CentreLeft,
-                        Masking = true,
-                        CornerRadius = 5f,
-                        Children = new Drawable[]
-                        {
-                            LeftBox = new Box
-                            {
-                                Height = 5,
-                                EdgeSmoothness = new Vector2(0, 0.5f),
-                                RelativeSizeAxes = Axes.None,
-                                Anchor = Anchor.CentreLeft,
-                                Origin = Anchor.CentreLeft,
-                            },
-                            RightBox = new Box
-                            {
-                                Height = 5,
-                                EdgeSmoothness = new Vector2(0, 0.5f),
-                                RelativeSizeAxes = Axes.None,
-                                Anchor = Anchor.CentreRight,
-                                Origin = Anchor.CentreRight,
-                            },
-                        },
-                    },
-                },
-                nubContainer = new Container
-                {
-                    RelativeSizeAxes = Axes.Both,
-                    Child = Nub = new Nub
-                    {
-                        Origin = Anchor.TopCentre,
-                        RelativePositionAxes = Axes.X,
-                        Current = { Value = true }
-                    },
-                },
-                hoverClickSounds = new HoverClickSounds()
-            };
-        }
-
-        [BackgroundDependencyLoader(true)]
-        private void load(AudioManager audio, [CanBeNull] OverlayColourProvider colourProvider, OsuColour colours)
         {
             sample = audio.Samples.Get(@"UI/notch-tick");
-            AccentColour = colourProvider?.Highlight1 ?? colours.Pink;
-            BackgroundColour = colourProvider?.Background5 ?? colours.PinkDarker.Darken(1);
-        }
-
-        protected override void Update()
-        {
-            base.Update();
-
-            nubContainer.Padding = new MarginPadding { Horizontal = RangePadding };
         }
 
         protected override void LoadComplete()
         {
             base.LoadComplete();
             CurrentNumber.BindValueChanged(current => TooltipText = getTooltipText(current.NewValue), true);
-
-            Current.BindDisabledChanged(disabled =>
-            {
-                Alpha = disabled ? 0.3f : 1;
-                hoverClickSounds.Enabled.Value = !disabled;
-            }, true);
-        }
-
-        protected override bool OnHover(HoverEvent e)
-        {
-            updateGlow();
-            return base.OnHover(e);
-        }
-
-        protected override void OnHoverLost(HoverLostEvent e)
-        {
-            updateGlow();
-            base.OnHoverLost(e);
-        }
-
-        protected override bool ShouldHandleAsRelativeDrag(MouseDownEvent e)
-            => Nub.ReceivePositionalInputAt(e.ScreenSpaceMouseDownPosition);
-
-        protected override void OnDragEnd(DragEndEvent e)
-        {
-            updateGlow();
-            base.OnDragEnd(e);
-        }
-
-        private void updateGlow()
-        {
-            Nub.Glowing = !Current.Disabled && (IsHovered || IsDragged);
         }
 
         protected override void OnUserChange(T value)
         {
             base.OnUserChange(value);
+
             playSample(value);
+
             TooltipText = getTooltipText(value);
         }
 
@@ -236,18 +100,6 @@ namespace osu.Game.Graphics.UserInterface
             return floatValue.ToString($"N{significantDigits}");
         }
 
-        protected override void UpdateAfterChildren()
-        {
-            base.UpdateAfterChildren();
-            LeftBox.Scale = new Vector2(Math.Clamp(RangePadding + Nub.DrawPosition.X - Nub.DrawWidth / 2, 0, Math.Max(0, DrawWidth)), 1);
-            RightBox.Scale = new Vector2(Math.Clamp(DrawWidth - Nub.DrawPosition.X - RangePadding - Nub.DrawWidth / 2, 0, Math.Max(0, DrawWidth)), 1);
-        }
-
-        protected override void UpdateValue(float value)
-        {
-            Nub.MoveToX(value, 250, Easing.OutQuint);
-        }
-
         /// <summary>
         /// Removes all non-significant digits, keeping at most a requested number of decimal digits.
         /// </summary>

osu.Game/Graphics/UserInterface/RangeSlider.cs

@@ -158,7 +158,7 @@ namespace osu.Game.Graphics.UserInterface
                 && screenSpacePos.X >= Nub.ScreenSpaceDrawQuad.TopLeft.X;
         }
 
-        protected partial class BoundSlider : OsuSliderBar<double>
+        protected partial class BoundSlider : RoundedSliderBar<double>
         {
             public string? DefaultString;
             public LocalisableString? DefaultTooltip;

osu.Game/Graphics/UserInterface/RoundedSliderBar.cs

@@ -0,0 +1,170 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using System;
+using osuTK;
+using osuTK.Graphics;
+using osu.Framework.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Input.Events;
+using osu.Game.Overlays;
+
+namespace osu.Game.Graphics.UserInterface
+{
+    public partial class RoundedSliderBar<T> : OsuSliderBar<T>
+        where T : struct, IEquatable<T>, IComparable<T>, IConvertible
+    {
+        protected readonly Nub Nub;
+        protected readonly Box LeftBox;
+        protected readonly Box RightBox;
+        private readonly Container nubContainer;
+
+        private readonly HoverClickSounds hoverClickSounds;
+
+        private Color4 accentColour;
+
+        public Color4 AccentColour
+        {
+            get => accentColour;
+            set
+            {
+                accentColour = value;
+                LeftBox.Colour = value;
+            }
+        }
+
+        private Colour4 backgroundColour;
+
+        public Color4 BackgroundColour
+        {
+            get => backgroundColour;
+            set
+            {
+                backgroundColour = value;
+                RightBox.Colour = value;
+            }
+        }
+
+        public RoundedSliderBar()
+        {
+            Height = Nub.HEIGHT;
+            RangePadding = Nub.EXPANDED_SIZE / 2;
+            Children = new Drawable[]
+            {
+                new Container
+                {
+                    RelativeSizeAxes = Axes.X,
+                    AutoSizeAxes = Axes.Y,
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                    Padding = new MarginPadding { Horizontal = 2 },
+                    Child = new CircularContainer
+                    {
+                        RelativeSizeAxes = Axes.X,
+                        AutoSizeAxes = Axes.Y,
+                        Anchor = Anchor.CentreLeft,
+                        Origin = Anchor.CentreLeft,
+                        Masking = true,
+                        CornerRadius = 5f,
+                        Children = new Drawable[]
+                        {
+                            LeftBox = new Box
+                            {
+                                Height = 5,
+                                EdgeSmoothness = new Vector2(0, 0.5f),
+                                RelativeSizeAxes = Axes.None,
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                            },
+                            RightBox = new Box
+                            {
+                                Height = 5,
+                                EdgeSmoothness = new Vector2(0, 0.5f),
+                                RelativeSizeAxes = Axes.None,
+                                Anchor = Anchor.CentreRight,
+                                Origin = Anchor.CentreRight,
+                            },
+                        },
+                    },
+                },
+                nubContainer = new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Child = Nub = new Nub
+                    {
+                        Origin = Anchor.TopCentre,
+                        RelativePositionAxes = Axes.X,
+                        Current = { Value = true }
+                    },
+                },
+                hoverClickSounds = new HoverClickSounds()
+            };
+        }
+
+        [BackgroundDependencyLoader(true)]
+        private void load(OverlayColourProvider? colourProvider, OsuColour colours)
+        {
+            AccentColour = colourProvider?.Highlight1 ?? colours.Pink;
+            BackgroundColour = colourProvider?.Background5 ?? colours.PinkDarker.Darken(1);
+        }
+
+        protected override void Update()
+        {
+            base.Update();
+
+            nubContainer.Padding = new MarginPadding { Horizontal = RangePadding };
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            Current.BindDisabledChanged(disabled =>
+            {
+                Alpha = disabled ? 0.3f : 1;
+                hoverClickSounds.Enabled.Value = !disabled;
+            }, true);
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            updateGlow();
+            return base.OnHover(e);
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            updateGlow();
+            base.OnHoverLost(e);
+        }
+
+        protected override bool ShouldHandleAsRelativeDrag(MouseDownEvent e)
+            => Nub.ReceivePositionalInputAt(e.ScreenSpaceMouseDownPosition);
+
+        protected override void OnDragEnd(DragEndEvent e)
+        {
+            updateGlow();
+            base.OnDragEnd(e);
+        }
+
+        private void updateGlow()
+        {
+            Nub.Glowing = !Current.Disabled && (IsHovered || IsDragged);
+        }
+
+        protected override void UpdateAfterChildren()
+        {
+            base.UpdateAfterChildren();
+            LeftBox.Scale = new Vector2(Math.Clamp(RangePadding + Nub.DrawPosition.X - Nub.DrawWidth / 2, 0, Math.Max(0, DrawWidth)), 1);
+            RightBox.Scale = new Vector2(Math.Clamp(DrawWidth - Nub.DrawPosition.X - RangePadding - Nub.DrawWidth / 2, 0, Math.Max(0, DrawWidth)), 1);
+        }
+
+        protected override void UpdateValue(float value)
+        {
+            Nub.MoveToX(value, 250, Easing.OutQuint);
+        }
+    }
+}

osu.Game/Graphics/UserInterface/ShearedNub.cs

@@ -0,0 +1,183 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using System;
+using osu.Framework.Allocation;
+using osu.Framework.Bindables;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Effects;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.UserInterface;
+using osu.Game.Overlays;
+using osuTK;
+using osuTK.Graphics;
+
+namespace osu.Game.Graphics.UserInterface
+{
+    public partial class ShearedNub : Container, IHasCurrentValue<bool>, IHasAccentColour
+    {
+        protected const float BORDER_WIDTH = 3;
+
+        public const int HEIGHT = 30;
+        public const float EXPANDED_SIZE = 50;
+
+        public static readonly Vector2 SHEAR = new Vector2(0.15f, 0);
+
+        private readonly Box fill;
+        private readonly Container main;
+
+        /// <summary>
+        ///  Implements the shape for the nub, allowing for any type of container to be used.
+        /// </summary>
+        /// <returns></returns>
+        public ShearedNub()
+        {
+            Size = new Vector2(EXPANDED_SIZE, HEIGHT);
+            InternalChild = main = new Container
+            {
+                Shear = SHEAR,
+                BorderColour = Colour4.White,
+                BorderThickness = BORDER_WIDTH,
+                Masking = true,
+                CornerRadius = 5,
+                RelativeSizeAxes = Axes.Both,
+                Anchor = Anchor.TopCentre,
+                Origin = Anchor.TopCentre,
+                Child = fill = new Box
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Alpha = 0,
+                    AlwaysPresent = true,
+                }
+            };
+        }
+
+        [BackgroundDependencyLoader(true)]
+        private void load(OverlayColourProvider? colourProvider, OsuColour colours)
+        {
+            AccentColour = colourProvider?.Highlight1 ?? colours.Pink;
+            GlowingAccentColour = colourProvider?.Highlight1.Lighten(0.4f) ?? colours.PinkLighter;
+            GlowColour = colourProvider?.Highlight1 ?? colours.PinkLighter;
+
+            main.EdgeEffect = new EdgeEffectParameters
+            {
+                Colour = GlowColour.Opacity(0),
+                Type = EdgeEffectType.Glow,
+                Radius = 8,
+                Roundness = 4,
+            };
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            Current.BindValueChanged(onCurrentValueChanged, true);
+        }
+
+        private bool glowing;
+
+        public bool Glowing
+        {
+            get => glowing;
+            set
+            {
+                if (glowing == value)
+                    return;
+
+                glowing = value;
+
+                if (value)
+                {
+                    main.FadeColour(GlowingAccentColour.Lighten(0.1f), 40, Easing.OutQuint)
+                        .Then()
+                        .FadeColour(GlowingAccentColour, 800, Easing.OutQuint);
+
+                    main.FadeEdgeEffectTo(Color4.White.Opacity(0.1f), 40, Easing.OutQuint)
+                        .Then()
+                        .FadeEdgeEffectTo(GlowColour.Opacity(0.1f), 800, Easing.OutQuint);
+                }
+                else
+                {
+                    main.FadeEdgeEffectTo(GlowColour.Opacity(0), 800, Easing.OutQuint);
+                    main.FadeColour(AccentColour, 800, Easing.OutQuint);
+                }
+            }
+        }
+
+        private readonly Bindable<bool> current = new Bindable<bool>();
+
+        public Bindable<bool> Current
+        {
+            get => current;
+            set
+            {
+                ArgumentNullException.ThrowIfNull(value);
+
+                current.UnbindBindings();
+                current.BindTo(value);
+            }
+        }
+
+        private Color4 accentColour;
+
+        public Color4 AccentColour
+        {
+            get => accentColour;
+            set
+            {
+                accentColour = value;
+                if (!Glowing)
+                    main.Colour = value;
+            }
+        }
+
+        private Color4 glowingAccentColour;
+
+        public Color4 GlowingAccentColour
+        {
+            get => glowingAccentColour;
+            set
+            {
+                glowingAccentColour = value;
+                if (Glowing)
+                    main.Colour = value;
+            }
+        }
+
+        private Color4 glowColour;
+
+        public Color4 GlowColour
+        {
+            get => glowColour;
+            set
+            {
+                glowColour = value;
+
+                var effect = main.EdgeEffect;
+                effect.Colour = Glowing ? value : value.Opacity(0);
+                main.EdgeEffect = effect;
+            }
+        }
+
+        private void onCurrentValueChanged(ValueChangedEvent<bool> filled)
+        {
+            const double duration = 200;
+
+            fill.FadeTo(filled.NewValue ? 1 : 0, duration, Easing.OutQuint);
+
+            if (filled.NewValue)
+            {
+                main.ResizeWidthTo(1, duration, Easing.OutElasticHalf);
+                main.TransformTo(nameof(BorderThickness), 8.5f, duration, Easing.OutElasticHalf);
+            }
+            else
+            {
+                main.ResizeWidthTo(0.75f, duration, Easing.OutQuint);
+                main.TransformTo(nameof(BorderThickness), BORDER_WIDTH, duration, Easing.OutQuint);
+            }
+        }
+    }
+}

osu.Game/Graphics/UserInterface/ShearedSliderBar.cs

@@ -0,0 +1,173 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using System;
+using osuTK;
+using osuTK.Graphics;
+using osu.Framework.Allocation;
+using osu.Framework.Extensions.Color4Extensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Input.Events;
+using osu.Game.Overlays;
+using static osu.Game.Graphics.UserInterface.ShearedNub;
+
+namespace osu.Game.Graphics.UserInterface
+{
+    public partial class ShearedSliderBar<T> : OsuSliderBar<T>
+        where T : struct, IEquatable<T>, IComparable<T>, IConvertible
+    {
+        protected readonly ShearedNub Nub;
+        protected readonly Box LeftBox;
+        protected readonly Box RightBox;
+        private readonly Container nubContainer;
+
+        private readonly HoverClickSounds hoverClickSounds;
+
+        private Color4 accentColour;
+
+        public Color4 AccentColour
+        {
+            get => accentColour;
+            set
+            {
+                accentColour = value;
+
+                // We want to slightly darken the colour for the box because the sheared slider has the boxes at the same height as the nub,
+                // making the nub invisible when not hovered.
+                LeftBox.Colour = value.Darken(0.1f);
+            }
+        }
+
+        private Colour4 backgroundColour;
+
+        public Color4 BackgroundColour
+        {
+            get => backgroundColour;
+            set
+            {
+                backgroundColour = value;
+                RightBox.Colour = value;
+            }
+        }
+
+        public ShearedSliderBar()
+        {
+            Shear = SHEAR;
+            Height = HEIGHT;
+            RangePadding = EXPANDED_SIZE / 2;
+            Children = new Drawable[]
+            {
+                new Container
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Anchor = Anchor.CentreLeft,
+                    Origin = Anchor.CentreLeft,
+                    Padding = new MarginPadding { Horizontal = 2 },
+                    Child = new Container
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Anchor = Anchor.CentreLeft,
+                        Origin = Anchor.CentreLeft,
+                        Masking = true,
+                        CornerRadius = 5,
+                        Children = new Drawable[]
+                        {
+                            LeftBox = new Box
+                            {
+                                EdgeSmoothness = new Vector2(0, 0.5f),
+                                RelativeSizeAxes = Axes.Y,
+                                Anchor = Anchor.CentreLeft,
+                                Origin = Anchor.CentreLeft,
+                            },
+                            RightBox = new Box
+                            {
+                                EdgeSmoothness = new Vector2(0, 0.5f),
+                                RelativeSizeAxes = Axes.Y,
+                                Anchor = Anchor.CentreRight,
+                                Origin = Anchor.CentreRight,
+                            },
+                        },
+                    },
+                },
+                nubContainer = new Container
+                {
+                    Shear = -SHEAR,
+                    RelativeSizeAxes = Axes.Both,
+                    Child = Nub = new ShearedNub
+                    {
+                        X = -SHEAR.X * HEIGHT / 2f,
+                        Origin = Anchor.TopCentre,
+                        RelativePositionAxes = Axes.X,
+                        Current = { Value = true }
+                    },
+                },
+                hoverClickSounds = new HoverClickSounds()
+            };
+        }
+
+        [BackgroundDependencyLoader(true)]
+        private void load(OverlayColourProvider? colourProvider, OsuColour colours)
+        {
+            AccentColour = colourProvider?.Highlight1 ?? colours.Pink;
+            BackgroundColour = colourProvider?.Background5 ?? colours.PinkDarker.Darken(1);
+        }
+
+        protected override void Update()
+        {
+            base.Update();
+
+            nubContainer.Padding = new MarginPadding { Horizontal = RangePadding };
+        }
+
+        protected override void LoadComplete()
+        {
+            base.LoadComplete();
+
+            Current.BindDisabledChanged(disabled =>
+            {
+                Alpha = disabled ? 0.3f : 1;
+                hoverClickSounds.Enabled.Value = !disabled;
+            }, true);
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            updateGlow();
+            return base.OnHover(e);
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            updateGlow();
+            base.OnHoverLost(e);
+        }
+
+        protected override bool ShouldHandleAsRelativeDrag(MouseDownEvent e)
+            => Nub.ReceivePositionalInputAt(e.ScreenSpaceMouseDownPosition);
+
+        protected override void OnDragEnd(DragEndEvent e)
+        {
+            updateGlow();
+            base.OnDragEnd(e);
+        }
+
+        private void updateGlow()
+        {
+            Nub.Glowing = !Current.Disabled && (IsHovered || IsDragged);
+        }
+
+        protected override void UpdateAfterChildren()
+        {
+            base.UpdateAfterChildren();
+            LeftBox.Scale = new Vector2(Math.Clamp(RangePadding + Nub.DrawPosition.X - Nub.DrawWidth / 2.15f, 0, Math.Max(0, DrawWidth)), 1);
+            RightBox.Scale = new Vector2(Math.Clamp(DrawWidth - Nub.DrawPosition.X - RangePadding - Nub.DrawWidth / 2.15f, 0, Math.Max(0, DrawWidth)), 1);
+        }
+
+        protected override void UpdateValue(float value)
+        {
+            Nub.MoveToX(value, 250, Easing.OutQuint);
+        }
+    }
+}

osu.Game/Graphics/UserInterface/TimeSlider.cs

@@ -10,7 +10,7 @@ namespace osu.Game.Graphics.UserInterface
     /// <summary>
     /// A slider bar which displays a millisecond time value.
     /// </summary>
-    public partial class TimeSlider : OsuSliderBar<double>
+    public partial class TimeSlider : RoundedSliderBar<double>
     {
         public override LocalisableString TooltipText => $"{Current.Value:N0} ms";
     }

osu.Game/Overlays/FirstRunSetup/ScreenUIScale.cs

@@ -107,7 +107,7 @@ namespace osu.Game.Overlays.FirstRunSetup
             public override bool? AllowTrackAdjustments => false;
         }
 
-        private partial class UIScaleSlider : OsuSliderBar<float>
+        private partial class UIScaleSlider : RoundedSliderBar<float>
         {
             public override LocalisableString TooltipText => base.TooltipText + "x";
         }

osu.Game/Overlays/Settings/Sections/Audio/VolumeSettings.cs

@@ -58,7 +58,7 @@ namespace osu.Game.Overlays.Settings.Sections.Audio
         {
             protected override Drawable CreateControl()
             {
-                var sliderBar = (OsuSliderBar<double>)base.CreateControl();
+                var sliderBar = (RoundedSliderBar<double>)base.CreateControl();
                 sliderBar.PlaySamplesOnAdjust = false;
                 return sliderBar;
             }

osu.Game/Overlays/Settings/Sections/Graphics/LayoutSettings.cs

@@ -329,7 +329,7 @@ namespace osu.Game.Overlays.Settings.Sections.Graphics
             }
         }
 
-        private partial class UIScaleSlider : OsuSliderBar<float>
+        private partial class UIScaleSlider : RoundedSliderBar<float>
         {
             public override LocalisableString TooltipText => base.TooltipText + "x";
         }

osu.Game/Overlays/Settings/Sections/Input/MouseSettings.cs

@@ -135,7 +135,7 @@ namespace osu.Game.Overlays.Settings.Sections.Input
             }
         }
 
-        public partial class SensitivitySlider : OsuSliderBar<double>
+        public partial class SensitivitySlider : RoundedSliderBar<double>
         {
             public override LocalisableString TooltipText => Current.Disabled ? MouseSettingsStrings.EnableHighPrecisionForSensitivityAdjust : $"{base.TooltipText}x";
         }

osu.Game/Overlays/Settings/Sections/SizeSlider.cs

@@ -13,7 +13,7 @@ namespace osu.Game.Overlays.Settings.Sections
     /// <summary>
     /// A slider intended to show a "size" multiplier number, where 1x is 1.0.
     /// </summary>
-    public partial class SizeSlider<T> : OsuSliderBar<T>
+    public partial class SizeSlider<T> : RoundedSliderBar<T>
         where T : struct, IEquatable<T>, IComparable<T>, IConvertible, IFormattable
     {
         public override LocalisableString TooltipText => Current.Value.ToString(@"0.##x", NumberFormatInfo.CurrentInfo);

osu.Game/Overlays/Settings/SettingsSlider.cs

@@ -10,14 +10,14 @@ using osu.Game.Graphics.UserInterface;
 
 namespace osu.Game.Overlays.Settings
 {
-    public partial class SettingsSlider<T> : SettingsSlider<T, OsuSliderBar<T>>
+    public partial class SettingsSlider<T> : SettingsSlider<T, RoundedSliderBar<T>>
         where T : struct, IEquatable<T>, IComparable<T>, IConvertible
     {
     }
 
     public partial class SettingsSlider<TValue, TSlider> : SettingsItem<TValue>
         where TValue : struct, IEquatable<TValue>, IComparable<TValue>, IConvertible
-        where TSlider : OsuSliderBar<TValue>, new()
+        where TSlider : RoundedSliderBar<TValue>, new()
     {
         protected override Drawable CreateControl() => new TSlider
         {

osu.Game/Rulesets/Mods/DifficultyAdjustSettingsControl.cs

@@ -104,7 +104,7 @@ namespace osu.Game.Rulesets.Mods
             {
                 InternalChildren = new Drawable[]
                 {
-                    new OsuSliderBar<float>
+                    new RoundedSliderBar<float>
                     {
                         RelativeSizeAxes = Axes.X,
                         Current = currentNumber,

osu.Game/Rulesets/Mods/ModAccuracyChallenge.cs

@@ -70,7 +70,7 @@ namespace osu.Game.Rulesets.Mods
         }
     }
 
-    public partial class PercentSlider : OsuSliderBar<double>
+    public partial class PercentSlider : RoundedSliderBar<double>
     {
         public PercentSlider()
         {

osu.Game/Rulesets/Mods/ModMuted.cs

@@ -94,7 +94,7 @@ namespace osu.Game.Rulesets.Mods
         public ScoreRank AdjustRank(ScoreRank rank, double accuracy) => rank;
     }
 
-    public partial class MuteComboSlider : OsuSliderBar<int>
+    public partial class MuteComboSlider : RoundedSliderBar<int>
     {
         public override LocalisableString TooltipText => Current.Value == 0 ? "always muted" : base.TooltipText;
     }

osu.Game/Rulesets/Mods/ModNoScope.cs

@@ -62,7 +62,7 @@ namespace osu.Game.Rulesets.Mods
         }
     }
 
-    public partial class HiddenComboSlider : OsuSliderBar<int>
+    public partial class HiddenComboSlider : RoundedSliderBar<int>
     {
         public override LocalisableString TooltipText => Current.Value == 0 ? "always hidden" : base.TooltipText;
     }

osu.Game/Screens/Play/PlayerSettings/PlayerSliderBar.cs

@@ -15,11 +15,11 @@ namespace osu.Game.Screens.Play.PlayerSettings
     public partial class PlayerSliderBar<T> : SettingsSlider<T>
         where T : struct, IEquatable<T>, IComparable<T>, IConvertible
     {
-        public OsuSliderBar<T> Bar => (OsuSliderBar<T>)Control;
+        public RoundedSliderBar<T> Bar => (RoundedSliderBar<T>)Control;
 
         protected override Drawable CreateControl() => new SliderBar();
 
-        protected partial class SliderBar : OsuSliderBar<T>
+        protected partial class SliderBar : RoundedSliderBar<T>
         {
             public SliderBar()
             {