Merged in david_gileadi/unity-ui-extensions/stepper-segmented-fixes (pull request #16)

Fixes for Stepper and Segmented Control

Editor/UIExtensionsMenuOptions.cs

@@ -1656,17 +1656,22 @@ namespace UnityEditor.UI
         [MenuItem("GameObject/UI/Extensions/Segmented Control", false)]
         static public void AddSegmentedControl(MenuCommand menuCommand)
         {
-            GameObject go = CreateUIElementRoot("Segmented Control", menuCommand, s_ThinGUIElementSize);
+            GameObject go = CreateUIElementRoot("Segmented Control", menuCommand, s_ThickGUIElementSize);
             SegmentedControl control = go.AddComponent<SegmentedControl>();
 
             Color selectedColor = new Color(0f, 0.455f, 0.894f);
-            control.selectedColor = selectedColor;
 
             var labels = new string[] { "This", "That", "Other" };
             for (int i = 0; i < 3; i++)
 			{
-                var button = AddButtonAsChild(go);
+                var button = AddButtonAsChild(go).GetComponent<Button>();
+				button.gameObject.AddComponent<Segment>();
                 button.name = "Segment " + (i + 1);
+
+                var colors = button.colors;
+                colors.pressedColor = selectedColor;
+                button.colors = colors;
+
                 var text = button.GetComponentInChildren<Text>();
                 text.text = labels[i];
                 text.color = selectedColor;
@@ -1677,12 +1682,12 @@ namespace UnityEditor.UI
             Selection.activeGameObject = go;
         }
         #endregion
-		
+
         #region Stepper
         [MenuItem("GameObject/UI/Extensions/Stepper", false)]
         static public void AddStepper(MenuCommand menuCommand)
         {
-            GameObject go = CreateUIElementRoot("Stepper", menuCommand, new Vector2(42, kThinHeight));
+            GameObject go = CreateUIElementRoot("Stepper", menuCommand, new Vector2(kWidth / 2, kThickHeight));
             Stepper control = go.AddComponent<Stepper>();
 
             var labels = new string[] { "−", "+" };
@@ -1741,7 +1746,7 @@ namespace UnityEditor.UI
             backgroundImage.fillCenter = false;
             backgroundImage.color = new Color(1f, 1f, 1f, 0.392f);
 
-            RectTransform handleRect = SetAnchorsAndStretch(handle); 
+            RectTransform handleRect = SetAnchorsAndStretch(handle);
             handleRect.sizeDelta = new Vector2(25, 25);
             Image handleImage = handle.AddComponent<Image>();
             handleImage.sprite = AssetDatabase.GetBuiltinExtraResource<Sprite>(kKnobPath);

Scripts/Controls/Segment.cs

@@ -0,0 +1,236 @@
+/// Credit David Gileadi
+/// Sourced from - https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/pull-requests/12
+
+using System;
+using System.Collections;
+using UnityEngine.Events;
+using UnityEngine.EventSystems;
+
+namespace UnityEngine.UI.Extensions
+{
+    [AddComponentMenu("UI/Extensions/Segmented Control/Segment")]
+    [RequireComponent(typeof(Selectable))]
+    public class Segment :
+        UIBehaviour,
+        IPointerClickHandler,
+        ISubmitHandler,
+        IPointerEnterHandler, IPointerExitHandler,
+        IPointerDownHandler, IPointerUpHandler,
+        ISelectHandler, IDeselectHandler
+    {
+        internal int index;
+        internal SegmentedControl segmentedControl;
+
+        internal bool leftmost
+        {
+            get { return index == 0; }
+        }
+        internal bool rightmost
+        {
+            get { return index == segmentedControl.segments.Length - 1; }
+        }
+
+        public bool selected
+        {
+            get { return segmentedControl.selectedSegment == this.button; }
+            set { SetSelected(value); }
+        }
+
+        internal Selectable button
+        {
+            get { return GetComponent<Selectable>(); }
+        }
+
+        internal Sprite cutSprite;
+
+        protected Segment()
+        { }
+
+        protected override void Start()
+        {
+            StartCoroutine(DelayedInit());
+        }
+
+        IEnumerator DelayedInit()
+        {
+            yield return null;
+            yield return null;
+
+            button.image.overrideSprite = cutSprite;
+            if (selected)
+                MaintainSelection();
+        }
+
+        public virtual void OnPointerClick(PointerEventData eventData)
+        {
+            if (eventData.button != PointerEventData.InputButton.Left)
+                return;
+
+            selected = true;
+        }
+
+        public virtual void OnPointerEnter(PointerEventData eventData)
+        {
+            MaintainSelection();
+        }
+
+        public virtual void OnPointerExit(PointerEventData eventData)
+        {
+            MaintainSelection();
+        }
+
+        public virtual void OnPointerDown(PointerEventData eventData)
+        {
+            MaintainSelection();
+        }
+
+        public virtual void OnPointerUp(PointerEventData eventData)
+        {
+            MaintainSelection();
+        }
+
+        public virtual void OnSelect(BaseEventData eventData)
+        {
+            MaintainSelection();
+        }
+
+        public virtual void OnDeselect(BaseEventData eventData)
+        {
+            MaintainSelection();
+        }
+
+        protected override void OnEnable()
+        {
+            base.OnEnable();
+            if (segmentedControl)
+                MaintainSelection();
+        }
+
+        public virtual void OnSubmit(BaseEventData eventData)
+        {
+            selected = true;
+        }
+
+        private void SetSelected(bool value)
+        {
+            if (value && button.IsActive() && button.IsInteractable())
+            {
+                if (segmentedControl.selectedSegment == this.button)
+                {
+                    if (segmentedControl.allowSwitchingOff)
+                    {
+                        Deselect();
+                    }
+                    else
+                    {
+                        MaintainSelection();
+                    }
+                }
+                else
+                {
+                    if (segmentedControl.selectedSegment)
+                    {
+                        var segment = segmentedControl.selectedSegment.GetComponent<Segment>();
+                        segmentedControl.selectedSegment = null;
+                        if (segment)
+                        {
+                            segment.TransitionButton();
+                        }
+                    }
+
+                    segmentedControl.selectedSegment = this.button;
+                    TransitionButton();
+                    segmentedControl.onValueChanged.Invoke(index);
+                }
+            }
+            else if (segmentedControl.selectedSegment == this.button)
+            {
+                Deselect();
+            }
+        }
+
+        private void Deselect()
+        {
+            segmentedControl.selectedSegment = null;
+            TransitionButton();
+            segmentedControl.onValueChanged.Invoke(-1);
+        }
+
+        void MaintainSelection()
+        {
+            if (button != segmentedControl.selectedSegment)
+                return;
+
+            TransitionButton(true);
+        }
+
+        internal void TransitionButton()
+        {
+            TransitionButton(false);
+        }
+
+        internal void TransitionButton(bool instant)
+        {
+            Color tintColor = selected ? button.colors.pressedColor : button.colors.normalColor;
+            Color textColor = selected ? button.colors.normalColor : button.colors.pressedColor;
+            Sprite transitionSprite = selected ? button.spriteState.pressedSprite : cutSprite;
+            string triggerName = selected ? button.animationTriggers.pressedTrigger : button.animationTriggers.normalTrigger;
+
+            switch (button.transition)
+            {
+                case Selectable.Transition.ColorTint:
+                    button.image.overrideSprite = cutSprite;
+                    StartColorTween(tintColor * button.colors.colorMultiplier, instant);
+                    ChangeTextColor(textColor * button.colors.colorMultiplier);
+                    break;
+                case Selectable.Transition.SpriteSwap:
+                    if (transitionSprite != cutSprite)
+                        transitionSprite = SegmentedControl.CutSprite(transitionSprite, leftmost, rightmost);
+                    DoSpriteSwap(transitionSprite);
+                    break;
+                case Selectable.Transition.Animation:
+                    button.image.overrideSprite = cutSprite;
+                    TriggerAnimation(triggerName);
+                    break;
+            }
+        }
+
+        void StartColorTween(Color targetColor, bool instant)
+        {
+            if (button.targetGraphic == null)
+                return;
+
+            button.targetGraphic.CrossFadeColor(targetColor, instant ? 0f : button.colors.fadeDuration, true, true);
+        }
+
+        void ChangeTextColor(Color targetColor)
+        {
+            var text = GetComponentInChildren<Text>();
+            if (!text)
+                return;
+
+            text.color = targetColor;
+        }
+
+        void DoSpriteSwap(Sprite newSprite)
+        {
+            if (button.image == null)
+                return;
+
+            button.image.overrideSprite = newSprite;
+        }
+
+        void TriggerAnimation(string triggername)
+        {
+            if (button.animator == null || !button.animator.isActiveAndEnabled || !button.animator.hasBoundPlayables || string.IsNullOrEmpty(triggername))
+                return;
+
+            button.animator.ResetTrigger(button.animationTriggers.normalTrigger);
+            button.animator.ResetTrigger(button.animationTriggers.pressedTrigger);
+            button.animator.ResetTrigger(button.animationTriggers.highlightedTrigger);
+            button.animator.ResetTrigger(button.animationTriggers.disabledTrigger);
+
+            button.animator.SetTrigger(triggername);
+        }
+    }
+}

Scripts/Controls/Segment.cs.meta

@@ -0,0 +1,12 @@
+fileFormatVersion: 2
+guid: b8ea9937637d64c6da52723c68267703
+timeCreated: 1503449008
+licenseType: Free
+MonoImporter:
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: 

Scripts/Controls/SegmentedControl.cs

@@ -2,13 +2,14 @@
 /// Sourced from - https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/pull-requests/12
 
 using System;
+using System.Collections;
 using UnityEngine.Events;
 using UnityEngine.EventSystems;
 
 namespace UnityEngine.UI.Extensions
 {
     // Segmented control, like a group of buttons
-    [AddComponentMenu("UI/Extensions/Segmented Control")]
+    [AddComponentMenu("UI/Extensions/Segmented Control/Segmented Control")]
     [RequireComponent(typeof(RectTransform))]
     public class SegmentedControl : UIBehaviour
     {
@@ -28,7 +29,7 @@ namespace UnityEngine.UI.Extensions
         [Tooltip("Event to fire once the selection has been changed")]
         private SegmentSelectedEvent m_onValueChanged = new SegmentSelectedEvent();
 
-        protected internal Selectable selectedSegment;
+        internal Selectable selectedSegment;
 
         protected float SeparatorWidth
         {
@@ -60,9 +61,6 @@ namespace UnityEngine.UI.Extensions
             }
         }
 
-        [SerializeField]
-        public Color selectedColor;
-
         public Graphic separator { get { return m_separator; } set { m_separator = value; m_separatorWidth = 0; LayoutSegments(); } }
 
         public bool allowSwitchingOff { get { return m_allowSwitchingOff; } set { m_allowSwitchingOff = value; } }
@@ -74,21 +72,27 @@ namespace UnityEngine.UI.Extensions
             {
                 value = Math.Max(value, -1);
                 value = Math.Min(value, segments.Length - 1);
+
                 m_selectedSegmentIndex = value;
-                if (value == -1)
+
+                if (selectedSegment)
                 {
-                    if (selectedSegment)
+                    var segment = selectedSegment.GetComponent<Segment>();
+                    if (segment)
                     {
-                        selectedSegment.GetComponent<Segment>().selected = false;
+                        segment.selected = false;
-                        selectedSegment = null;
                     }
+                    selectedSegment = null;
                 }
-                else
+
+                if (value != -1)
                 {
-#if UNITY_EDITOR
+                    selectedSegment = segments[value];
-                    segments[value].GetComponent<Segment>().StoreTextColor();
+                    var segment = selectedSegment.GetComponent<Segment>();
-#endif
+                    if (segment)
-                    segments[value].GetComponent<Segment>().selected = true;
+                    {
+                        segment.selected = true;
+                    }
                 }
             }
         }
@@ -106,6 +110,19 @@ namespace UnityEngine.UI.Extensions
         {
             base.Start();
 
+            if (isActiveAndEnabled)
+                StartCoroutine(DelayedInit());
+        }
+
+        protected override void OnEnable()
+        {
+            StartCoroutine(DelayedInit());
+        }
+
+        IEnumerator DelayedInit()
+        {
+            yield return null;
+
             LayoutSegments();
 
             if (m_selectedSegmentIndex != -1)
@@ -117,21 +134,13 @@ namespace UnityEngine.UI.Extensions
         {
             base.OnValidate();
 
-            if (separator)
+            if (isActiveAndEnabled)
-                LayoutSegments();
+                StartCoroutine(DelayedInit());
-
-            if (m_selectedSegmentIndex != -1)
-                selectedSegmentIndex = m_selectedSegmentIndex;
 
             if (m_selectedSegmentIndex > transform.childCount)
             {
                 selectedSegmentIndex = transform.childCount - 1;
             }
-
-            if (selectedColor == new Color(0, 0, 0, 0))
-            {
-                selectedColor = new Color(0f, 0.455f, 0.894f);
-            }
         }
 #endif
 
@@ -146,21 +155,16 @@ namespace UnityEngine.UI.Extensions
             for (int i = 0; i < buttons.Length; i++)
             {
                 var segment = buttons[i].GetComponent<Segment>();
-                if (segment == null)
+                if (segment != null)
                 {
-                    segment = buttons[i].gameObject.AddComponent<Segment>();
+                    segment.index = i;
+                    segment.segmentedControl = this;
                 }
-                segment.index = i;
             }
 
             return buttons;
         }
 
-        public void SetAllSegmentsOff()
-        {
-            selectedSegment = null;
-        }
-
         private void RecreateSprites()
         {
             for (int i = 0; i < segments.Length; i++)
@@ -168,28 +172,38 @@ namespace UnityEngine.UI.Extensions
                 if (segments[i].image == null)
                     continue;
 
-                var sprite = segments[i].image.sprite;
+                var sprite = CutSprite(segments[i].image.sprite, i == 0, i == segments.Length - 1);
-                if (sprite.border.x == 0 || sprite.border.z == 0)
+                var segment = segments[i].GetComponent<Segment>();
-                    continue;
+                if (segment)
-
-                var rect = sprite.rect;
-                var border = sprite.border;
-
-                if (i > 0)
                 {
-                    rect.xMin = border.x;
+                    segment.cutSprite = sprite;
-                    border.x = 0;
                 }
-                if (i < segments.Length - 1)
+                segments[i].image.overrideSprite = sprite;
-                {
-                    rect.xMax = border.z;
-                    border.z = 0;
-                }
-
-                segments[i].image.sprite = Sprite.Create(sprite.texture, rect, sprite.pivot, sprite.pixelsPerUnit, 0, SpriteMeshType.FullRect, border);
             }
         }
 
+        static internal Sprite CutSprite(Sprite sprite, bool leftmost, bool rightmost)
+        {
+            if (sprite.border.x == 0 || sprite.border.z == 0)
+                return sprite;
+
+            var rect = sprite.rect;
+            var border = sprite.border;
+
+            if (!leftmost)
+            {
+                rect.xMin = border.x;
+                border.x = 0;
+            }
+            if (!rightmost)
+            {
+                rect.xMax = border.z;
+                border.z = 0;
+            }
+
+            return Sprite.Create(sprite.texture, rect, sprite.pivot, sprite.pixelsPerUnit, 0, SpriteMeshType.FullRect, border);
+        }
+
         public void LayoutSegments()
         {
             RecreateSprites();
@@ -223,215 +237,4 @@ namespace UnityEngine.UI.Extensions
             }
         }
     }
-
-    [RequireComponent(typeof(Selectable))]
-    public class Segment :
-        UIBehaviour,
-        IPointerClickHandler,
-        ISubmitHandler,
-        IPointerEnterHandler, IPointerExitHandler,
-        IPointerDownHandler, IPointerUpHandler,
-        ISelectHandler, IDeselectHandler
-    {
-        internal int index;
-
-        internal bool leftmost
-        {
-            get { return index == 0; }
-        }
-        internal bool rightmost
-        {
-            get { return index == segmentControl.segments.Length - 1; }
-        }
-
-        public bool selected
-        {
-            get { return segmentControl.selectedSegment == this.button; }
-            set { SetSelected(value); }
-        }
-
-        internal SegmentedControl segmentControl
-        {
-            get { return GetComponentInParent<SegmentedControl>(); }
-        }
-
-        internal Selectable button
-        {
-            get { return GetComponent<Selectable>(); }
-        }
-
-        [SerializeField]
-        Color textColor;
-
-        protected Segment()
-        { }
-
-        public virtual void OnPointerClick(PointerEventData eventData)
-        {
-            if (eventData.button != PointerEventData.InputButton.Left)
-                return;
-
-            selected = true;
-        }
-
-        public virtual void OnPointerEnter(PointerEventData eventData)
-        {
-            MaintainSelection();
-        }
-
-        public virtual void OnPointerExit(PointerEventData eventData)
-        {
-            MaintainSelection();
-        }
-
-        public virtual void OnPointerDown(PointerEventData eventData)
-        {
-            MaintainSelection();
-        }
-
-        public virtual void OnPointerUp(PointerEventData eventData)
-        {
-            MaintainSelection();
-        }
-
-        public virtual void OnSelect(BaseEventData eventData)
-        {
-            MaintainSelection();
-        }
-
-        public virtual void OnDeselect(BaseEventData eventData)
-        {
-            MaintainSelection();
-        }
-
-        public virtual void OnSubmit(BaseEventData eventData)
-        {
-            selected = true;
-        }
-
-        private void SetSelected(bool value)
-        {
-            if (value && button.IsActive() && button.IsInteractable())
-            {
-                if (segmentControl.selectedSegment == this.button)
-                {
-                    if (segmentControl.allowSwitchingOff)
-                    {
-                        Deselect();
-                    }
-                    else
-                    {
-                        MaintainSelection();
-                    }
-                }
-                else
-                {
-                    if (segmentControl.selectedSegment)
-                    {
-                        var segment = segmentControl.selectedSegment.GetComponent<Segment>();
-                        segmentControl.selectedSegment = null;
-                        segment.TransitionButton();
-                    }
-
-                    segmentControl.selectedSegment = this.button;
-                    StoreTextColor();
-                    TransitionButton();
-                    segmentControl.onValueChanged.Invoke(index);
-                }
-            }
-            else if (segmentControl.selectedSegment == this.button)
-            {
-                Deselect();
-            }
-        }
-
-        private void Deselect()
-        {
-            segmentControl.selectedSegment = null;
-            TransitionButton();
-            segmentControl.onValueChanged.Invoke(-1);
-        }
-
-        void MaintainSelection()
-        {
-            if (button != segmentControl.selectedSegment)
-                return;
-
-            TransitionButton(true);
-        }
-
-        internal void TransitionButton()
-        {
-            TransitionButton(false);
-        }
-
-        internal void TransitionButton(bool instant)
-        {
-            Color tintColor = selected ? segmentControl.selectedColor : button.colors.normalColor;
-            Color textColor = selected ? button.colors.normalColor : this.textColor;
-            Sprite transitionSprite = selected ? button.spriteState.pressedSprite : null;
-            string triggerName = selected ? button.animationTriggers.pressedTrigger : button.animationTriggers.normalTrigger;
-
-            switch (button.transition)
-            {
-                case Selectable.Transition.ColorTint:
-                    StartColorTween(tintColor * button.colors.colorMultiplier, instant);
-                    ChangeTextColor(textColor * button.colors.colorMultiplier);
-                    break;
-                case Selectable.Transition.SpriteSwap:
-                    DoSpriteSwap(transitionSprite);
-                    break;
-                case Selectable.Transition.Animation:
-                    TriggerAnimation(triggerName);
-                    break;
-            }
-        }
-
-        void StartColorTween(Color targetColor, bool instant)
-        {
-            if (button.targetGraphic == null)
-                return;
-
-            button.targetGraphic.CrossFadeColor(targetColor, instant ? 0f : button.colors.fadeDuration, true, true);
-        }
-
-        internal void StoreTextColor()
-        {
-            var text = GetComponentInChildren<Text>();
-            if (!text)
-                return;
-
-            textColor = text.color;
-        }
-
-        void ChangeTextColor(Color targetColor)
-        {
-            var text = GetComponentInChildren<Text>();
-            if (!text)
-                return;
-
-            text.color = targetColor;
-        }
-
-        void DoSpriteSwap(Sprite newSprite)
-        {
-            if (button.image == null)
-                return;
-
-            button.image.overrideSprite = newSprite;
-        }
-
-        void TriggerAnimation(string triggername)
-        {
-            if (button.animator == null || !button.animator.isActiveAndEnabled || !button.animator.hasBoundPlayables || string.IsNullOrEmpty(triggername))
-                return;
-
-            button.animator.ResetTrigger(button.animationTriggers.normalTrigger);
-            button.animator.ResetTrigger(button.animationTriggers.pressedTrigger);
-            button.animator.ResetTrigger(button.animationTriggers.highlightedTrigger);
-            button.animator.ResetTrigger(button.animationTriggers.disabledTrigger);
-
-            button.animator.SetTrigger(triggername);
-        }
-    }
 }

Scripts/Controls/Stepper.cs

@@ -2,6 +2,7 @@
 /// Sourced from - https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/pull-requests/11
 
 using System;
+using System.Collections;
 using UnityEngine.Events;
 using UnityEngine.EventSystems;
 
@@ -93,6 +94,7 @@ namespace UnityEngine.UI.Extensions
         {
             base.OnValidate();
 
+            RecreateSprites(sides);
             if (separator)
                 LayoutSides();
 
@@ -103,6 +105,24 @@ namespace UnityEngine.UI.Extensions
         }
 #endif
 
+        protected override void Start()
+        {
+            if (isActiveAndEnabled)
+                StartCoroutine(DelayedInit());
+        }
+
+        protected override void OnEnable()
+        {
+            StartCoroutine(DelayedInit());
+        }
+
+        IEnumerator DelayedInit()
+        {
+            yield return null;
+
+            RecreateSprites(sides);
+        }
+
         private Selectable[] GetSides()
         {
             var buttons = GetComponentsInChildren<Selectable>();
@@ -111,15 +131,6 @@ namespace UnityEngine.UI.Extensions
                 throw new InvalidOperationException("A stepper must have two Button children");
             }
 
-            for (int i = 0; i < 2; i++)
-            {
-                var side = buttons[i].GetComponent<StepperSide>();
-                if (side == null)
-                {
-                    side = buttons[i].gameObject.AddComponent<StepperSide>();
-                }
-            }
-
             if (!wrap)
             {
                 DisableAtExtremes(buttons);
@@ -172,28 +183,38 @@ namespace UnityEngine.UI.Extensions
                 if (sides[i].image == null)
                     continue;
 
-                var sprite = sides[i].image.sprite;
+                var sprite = CutSprite(sides[i].image.sprite, i == 0);
-                if (sprite.border.x == 0 || sprite.border.z == 0)
+                var side = sides[i].GetComponent<StepperSide>();
-                    continue;
+                if (side)
-
-                var rect = sprite.rect;
-                var border = sprite.border;
-
-                if (i == 0)
                 {
-                    rect.xMax = border.z;
+                    side.cutSprite = sprite;
-                    border.z = 0;
                 }
-                else
+                sides[i].image.overrideSprite = sprite;
-                {
-                    rect.xMin = border.x;
-                    border.x = 0;
-                }
-
-                sides[i].image.sprite = Sprite.Create(sprite.texture, rect, sprite.pivot, sprite.pixelsPerUnit, 0, SpriteMeshType.FullRect, border);
             }
         }
 
+        static internal Sprite CutSprite(Sprite sprite, bool leftmost)
+        {
+            if (sprite.border.x == 0 || sprite.border.z == 0)
+                return sprite;
+
+            var rect = sprite.rect;
+            var border = sprite.border;
+
+            if (leftmost)
+            {
+                rect.xMax = border.z;
+                border.z = 0;
+            }
+            else
+            {
+                rect.xMin = border.x;
+                border.x = 0;
+            }
+
+            return Sprite.Create(sprite.texture, rect, sprite.pivot, sprite.pixelsPerUnit, 0, SpriteMeshType.FullRect, border);
+        }
+
         public void LayoutSides(Selectable[] sides = null)
         {
             sides = sides ?? this.sides;
@@ -230,45 +251,4 @@ namespace UnityEngine.UI.Extensions
             }
         }
     }
-
-    [RequireComponent(typeof(Selectable))]
-    public class StepperSide : UIBehaviour, IPointerClickHandler, ISubmitHandler
-    {
-        Selectable button { get { return GetComponent<Selectable>(); } }
-
-        Stepper stepper { get { return GetComponentInParent<Stepper>(); } }
-
-        bool leftmost { get { return button == stepper.sides[0]; } }
-
-        protected StepperSide()
-        { }
-
-        public virtual void OnPointerClick(PointerEventData eventData)
-        {
-            if (eventData.button != PointerEventData.InputButton.Left)
-                return;
-
-            Press();
-        }
-
-        public virtual void OnSubmit(BaseEventData eventData)
-        {
-            Press();
-        }
-
-        private void Press()
-        {
-            if (!button.IsActive() || !button.IsInteractable())
-                return;
-
-            if (leftmost)
-            {
-                stepper.StepDown();
-            }
-            else
-            {
-                stepper.StepUp();
-            }
-        }
-    }
 }

Scripts/Controls/StepperSide.cs

@@ -0,0 +1,103 @@
+/// Credit David Gileadi
+/// Sourced from - https://bitbucket.org/UnityUIExtensions/unity-ui-extensions/pull-requests/11
+
+using System;
+using UnityEngine.Events;
+using UnityEngine.EventSystems;
+
+namespace UnityEngine.UI.Extensions
+{
+
+    [RequireComponent(typeof(Selectable))]
+    public class StepperSide :
+        UIBehaviour,
+        IPointerClickHandler,
+        ISubmitHandler,
+        IPointerEnterHandler, IPointerExitHandler,
+        IPointerDownHandler, IPointerUpHandler,
+        ISelectHandler, IDeselectHandler
+    {
+        Selectable button { get { return GetComponent<Selectable>(); } }
+
+        Stepper stepper { get { return GetComponentInParent<Stepper>(); } }
+
+        bool leftmost { get { return button == stepper.sides[0]; } }
+
+        internal Sprite cutSprite;
+
+        protected StepperSide()
+        { }
+
+        public virtual void OnPointerClick(PointerEventData eventData)
+        {
+            if (eventData.button != PointerEventData.InputButton.Left)
+                return;
+
+            Press();
+            AdjustSprite(false);
+        }
+
+        public virtual void OnSubmit(BaseEventData eventData)
+        {
+            Press();
+            AdjustSprite(true);
+        }
+
+        public virtual void OnPointerEnter(PointerEventData eventData)
+        {
+            AdjustSprite(false);
+        }
+
+        public virtual void OnPointerExit(PointerEventData eventData)
+        {
+            AdjustSprite(true);
+        }
+
+        public virtual void OnPointerDown(PointerEventData eventData)
+        {
+            AdjustSprite(false);
+        }
+
+        public virtual void OnPointerUp(PointerEventData eventData)
+        {
+            AdjustSprite(false);
+        }
+
+        public virtual void OnSelect(BaseEventData eventData)
+        {
+            AdjustSprite(false);
+        }
+
+        public virtual void OnDeselect(BaseEventData eventData)
+        {
+            AdjustSprite(true);
+        }
+
+        private void Press()
+        {
+            if (!button.IsActive() || !button.IsInteractable())
+                return;
+
+            if (leftmost)
+            {
+                stepper.StepDown();
+            }
+            else
+            {
+                stepper.StepUp();
+            }
+        }
+
+        private void AdjustSprite(bool restore)
+        {
+            var image = button.image;
+            if (!image || image.overrideSprite == cutSprite)
+                return;
+
+            if (restore)
+                image.overrideSprite = cutSprite;
+            else
+                image.overrideSprite = Stepper.CutSprite(image.overrideSprite, leftmost);
+        }
+    }
+}

Scripts/Controls/StepperSide.cs.meta

@@ -0,0 +1,12 @@
+fileFormatVersion: 2
+guid: dd241e0d4a8de4fc9924c1dce285c587
+timeCreated: 1503449912
+licenseType: Free
+MonoImporter:
+  serializedVersion: 2
+  defaultReferences: []
+  executionOrder: 0
+  icon: {instanceID: 0}
+  userData: 
+  assetBundleName: 
+  assetBundleVariant: