Slider Toggle Buttons

Purchase · £2.99

Introduction

Introducing Slider Toggle Buttons

Slider Toggle Buttons - animated buttons to use as a switch to toggle an option or setting for Excel

I designed these Slider Buttons after seeing a lovely UX/UI design by Siddeswara Gajula which you can see/download here I use 3 Shapes and 1 Graphics object (an Icon) grouped together to create each Slider Button. I suffix each group with 1, 2, 3 etc. to allow the code to distinguish which Button is being activated on a Sheet. Then I link up a Subroutine to animate the Slider Button and the Icon - the code also changes the colour of the cylinder from grey to green when the Slider Button is switched on. The code uses my IEasing Class to demonstrate 3 different types of easing or movements for the Buttons, easeInExpo (start slow then accelerate), easeInBack (gives the impression that you are pulling back on the Button before letting it spring out) and easeInSine (a silky-smooth feel to make the Button glide into situ)

If you like this Project you may also enjoy


Specialist Sliders ·  Vertical Sliders ·  Flat UI ·  Awesome Buttons ·  Sliders ·  Menubar ·  Toggle Buttons ·  xlui ·  RadiObutton ·  CheckboX ·  Burger Buttons ·  Popup Burger Buttons Small Toggle Buttons

Prerequisites

  • Excel 2013 (Version 5) & Excel 2016 (32bit or 64bit, Version 8)
  • Basic to moderate Excel Skills and some VBA skills to copy a Grouped Shape and then link a Subroutine to a Shape and a Graphic object
  • Windows PC · NOT a Mac!
  • No support is provided for customization of this Software

Features

  • Copy the Grouped Shapes/Icon to make more Toggle Buttons
  • Store the Toggled values in the Sheet or as Defined Names/other Ranges
  • Easing animations include easeInExpo, easeInBack, easeOutSine and easeOutElastic
  • Use SVG Icons and change their Colour
  • Style the Cylinder to create an On/Off look and feel
  • Nice Drop-shadow effects and some silky-smooth easing animations (approx. 24 different easing motions are available for you to try, some may/may not be useful in the Slider Button context ie. easeInBounce)
  • Protect the Shape and Graphic Drawing Objects via VBA Code to prevent Selection






Installation

Slider Toggle Buttons.xlsm is ready to use (version specific naming of the file will differ with each new release). Open the Slider Toggle Buttons.xlsm File and test out the Buttons on the various Worksheets to see how they animate and toggle their respective setting values On/Off. In order to select any of the Shapes or Graphic Objects you must first Unprotect the Sheet

Usage

Slider Toggle Buttons.xlsm


Using the Slider Toggle Buttons in your own Project
To use the Slider Toggle Buttons in your own Project, first Unprotect the Interface by just doing Unprotect Sheet on the Protect Group of the Review Tab on the Ribbon. Right-click a Shape and use the Selection Pane on the Editing Group of the Home Tab of the Ribbon to make Selections easier. Now, Copy the Shape (it's Grouped, so select the overall Group Shape object) and Paste onto any Worksheet. If you need more than one set of Toggle Buttons then repeatedly Paste more until you have the amount that you need. Now rename the Slider Toggle Button Shapes and individual Shapes using the suffix 1, 2, 3, 4 etc. The Code uses the Application.Caller() method to retrieve the Grouped Toggle Name and with this, it can then find the Cylinder and the collection of Shapes/Icons Group Name - it is still wise to make all of the Shapes have unique Names as this is good practice, but the Code means that no Names need to be hard-coded. Remember to use the Selection Pane to do this as it's easier and you can see what you are changing. Now Copy the Code in one of the Code Modules into your own Project Worksheet Code Module. Link the Code by selecting both the Icon and SliderButton in turn and then right-click assign macro - pick the Subroutine that you just copied. That's it, click one of the Toggle Buttons to protect the Interface and trigger the animation. The Code below details how the grouped Shape is known via Application.Caller(). Oh, remember to add the IEasing Class to your Project/Workbook - you can open the VBE Editor and simply drag this from one Project into another Project using the Project Pane (top LHS): 
    
   ' assign all of the Shapes/Graphics used by the slider toggle buttons.  please note: the Container Shape is not required to be referenced in the code
   Set Toggle = ActiveSheet.Shapes(CStr(Application.Caller)).ParentGroup
   Set Icon = ActiveSheet.Shapes(Toggle.Name).GroupItems(4)
   Set SliderButton = ActiveSheet.Shapes(Toggle.Name).GroupItems(3)
   Set Cylinder = ActiveSheet.Shapes(Toggle.Name).GroupItems(2)


Adding the Macro
You need to add any of the Code Module Macros/Subroutines to both the Icon and the SliderButton Shape only, not the Cylinder, nor the Container or the Group, Toggle Shape. You should use the Find & Select, Selection Pane to highlight the Icon and the SliderButton and then right-click on it and assign the Macro. Always use the same Macro for the Icon and the Slider Button within each grouped set of Shapes. Please Note: when starting a new Project and Copying over the Buttons, Save the Project when you have finished and added the Macros to the Toggle Buttons and then Close the File! Reopen it and test the Slider Toggle Buttons

Changing the Colours of the Cylinder Shape
Changing the Colour of the Cylinder Shape is easy. Go into the Code and in the Subroutine, scroll down to the bottom of the Code. To change the Colour of the Cylinder for either On or Off, change the RGB values of the Cylinder: 
    
   If Direction Then
      ' right, On
      Cylinder.Fill.ForeColor.RGB = RGB(168, 194, 83)
   Else
      ' left, Off
      Cylinder.Fill.ForeColor.RGB = RGB(158, 158, 158)
   End If


Storing the On/Off value of the Slider Toggle Buttons
You can store or capture the On/Off status of any of the Slider Toggle Buttons via code either in a Defined Name or Named Range or in a Cell/Range ie. [Slider1].value2 = "On" or ActiveSheet.Range("A100").value2 = "On". Below I simply output the result to the offset of the Cylinder object a couple of Columns next to the object itself: 
    
   If Direction Then
      ' right, On
      Cylinder.Fill.ForeColor.RGB = RGB(168, 194, 83)
      Cylinder.BottomRightCell.Offset(-1, 2).Value2 = "On"
   Else
      ' left, Off
      Cylinder.Fill.ForeColor.RGB = RGB(158, 158, 158)
      Cylinder.BottomRightCell.Offset(-1, 2).Value2 = "Off"
   End If


Changing the Alt. Text of the Slider Toggle Buttons
I have done the hard work for you already, however if you have an error when creating a new Toggle Button if you use your own Shapes then remember to edit the Alt. Text as per the image below (set to True or False for the Code to work correctly when using my Subroutines and easing functions). This setting determines whether the Code will make the Icons and Buttons move right or left. Once the code has ran once, the setting will be automatically updated:





SVG Icons
The Slider Toggle Button uses an SVG Icon. To change the Icon, you first need to Unprotect the Worksheet. Then right-click the Graphic Object or any Shape and use the Selection Pane on the Editing Group of the Home Tab of the Ribbon to select the Icon in a Toggle Group. Now choose, change Graphic, from Icons on the Change Group of the Graphics Format Tab on the Ribbon and pick another Icon. Here I am changing the Icon to a Bug Icon





Tips
Speeding up the animations:
To speed up the animations, go into the code and in any of the Code Modules, change the 24 in 'TweenTime = TweenTime + 1 / 24' to a lower number ie. 12. If this does not work for some animations, increase the timer refresh rate ie. From 40 per second to 60 per second

Resizing the Slider Toggle Buttons to create smaller ones:
Unprotect the Worksheet and select the Toggle Grouped Shape. Hold down Shift and then drag the object to resize it. Now adjust the MoveAmount variable in the Code to a smaller value (please note: you may have to tweak the positioning of the Icon and the Slider Button to get the Button sliding to each end equally depending on the type of easing function used). A separate Subroutine is linked as the Macro to demonstrate this Slider Toggle Button. The MoveAmount variable determines how far right and left that the Icon and Button will move for each Mouse Button press

Slider Toggle Buttons

The Slider Toggle Buttons in all of their splendour!

Version 1.1 with an Elastic easing and an alternative Blue Cylinder colour which is set during the animation tween

Version 1.1 Slider Buttons on a white background set at 100% zoom (as they would look on a normal Worksheet)

Version 1.1 A Smaller Resized Slider Toggle Button

FAQ

Q. How do I speed up the Slider Button animations?
A. To speed up the animations, go into the code and in any of the Code Modules, change the 24 in 'TweenTime = TweenTime + 1 / 24' to a lower number ie. 12. If this does not work for some animations, increase the timer refresh rate ie. From 40 per second to 60 per second

Slider Toggle Buttons

This is a video of the Slider Toggle Buttons

This is a video of the Slider Toggle Buttons on a White Background with a Smaller Button and demonstrating how to Speed up the Animation

Support

Please remember you have purchased very affordable Software and you have not paid for a full-time Software design agency - I am but one man. Occasionally I may help with small tweaks, but these requests will be put on a much lower priority due to their nature. You have not PAID for Support, Support is 100% optional and I provide it for your convenience, so please be patient, polite and respectful

Support (limited) for my Software includes

  • Responding to questions or problems regarding the Software and its features
  • Fixing valid (replicated) bugs and reported issues for the VERSION I HAVE WRITTEN

Software support does not include

  • Customization and installation services
  • Support for third party software or ANY kind of development whatsoever

Before seeking support

  • Make sure your question is a valid Software Issue and not a customization request
  • Make sure you have read through the FAQ's, online documentation and any related video guides before asking support on how to accomplish a task
  • Ensure that you access to the VBOM is allowed and that Macros can run in Excel
  • Make sure to provide 'proof of purchase' and state the name / version of the Software that you are having issues with when requesting support by Email or via Facebook

How to get Support

Contact Mark Kubiszyn on the Email address provided when you purchased the Software, including the Order Number
...or Contact Mark Kubiszyn via our Facebook Page - remember to be patient, if there has been an issue with your download, Mark will always respond within 48 hours and will Email you the File directly if neccessary or via Messenger. For other issues the response time may be considerably longer and I may choose to respond to specific questions only (as is my right), depending on what has been asked

Future Builds

* No ideas as yet!

Bug Fixes

* Reported 04.04.2022. On some machines when copying a SliderButton and then Zooming in/out on the Worksheet, the SliderButton will begin to incrementally shift 3 or more pixels left or right causing it to exceed the normal operating bounds. This is a strange bug as it ONLY happens to a copied SliderButton - all of the demo SliderButtons have no issue when Zooming. Further update I have found that you can replicate this issue by MOVING one of my demo SliderButtons somewhere else in the Worksheet and then Zooming in/out repeatedly and then at some point you can create the issue that is reported

Fixed: 08.04.2022
1. Change the Properties of the Grouped Object to Change to 'don’t move or size with cells'. 2. Add some small Code to force the SliderButton and Icon to always remain within a specific tolerance of the Toggle Group Left position

Changelog

You can find the version history in the Code Module for any Macro-enabled Software or read more information on the status of each release
- the latest Version including a description of any changes made is always shown first

08.04.2022 - (Version 1.2)

This version fixes the Zoom issue with a copied SliderButton. 1. Change the Properties of the Grouped Object to Change to 'don’t move or size with cells'. 2. Add some small Code to force the SliderButton and Icon to always remain within a specific tolerance of the Toggle Group Left position. I have updated all 4 Code Modules

22.06.2021 - (Version 1.1)

Added more examples including an Elastic easing where the Cylinder colour is set within the Timer and is set to a blue colour
Included a Boolean Running variable to prevent multiple clicks on the Icon or Slider Button which may cause the Buttons to move to a different position
Added another Sheet at 100% with the background colour set to white to display the Slider Buttons as how they would look when added to any normal Worksheet

20.06.2021 - (Version 1) general release