UserForm Slider Buttons

Purchase · £2.99

Introduction

Introducing UserForm Slider Buttons

UserForm Slider Buttons - add horizontal Slider Button capability to your UserForms together with a Hand Cursor

UserForm Slider Buttons can be added to a UserForm to create a Slider that can be operated by the user to select a value across a range i.e 1 to 100 or 0 to 10. UserForm Slider Buttons consist of 3 Images, a Slider Button Image, a Placeholder Image and a Bar Image. Once you see how they are created and operated, you can then start to create your very own Slider Buttons using your own Images (Transparent or otherwise) and my Code to make them work. There really isn't much limit to the type of Horizontal Slider Control you can make



You can capture the value that the Slider Button is moved to and use this to initialise the position when the UserForm is displayed or you can simply display your Sliders at a constant start value should you prefer



If you like this Project you may also enjoy


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

Prerequisites

  • Excel 2016 (32bit or 64bit version 16.0)
  • Basic to moderate Excel Skills and some VBA skills to copy Code and the Slider Images into your own UserForms and Code Modules - artistic design, not an issue as elements are provided for the Images used for the Sliders in this Software, but if you are creative, the worlds your oyster (so to speak...)
  • Windows PC · NOT a Mac!
  • No support is provided for customization of this Software

Features

  • Use with my FREE Transparent Image Software for loading in any new Slider designs - download it here
  • Use ontop of different coloured Image layers which looks great when using transparent PNG's
  • Smooth as silk movement, grab a Slider Button and then release it
  • Used together with a Hand Cursor to exhibit the 'drag' look and feel when you pick up and move the Slider Button
  • Use standard designed Shapes in Excel, exported or Saved out as an SVG and then edited in most art packages before saving again as a Transparent PNG
  • A Volume style Slider for use with volumes; I designed this for use with my new Boho (MP3 Player) Software for Excel
  • You can have multiple Sliders on the same UserForm
  • Set each Slider Minimum and Maximum bounds
  • Start a Slider at 0, 1 or some other number within its range
  • Finish a Slider at a value lower than its Maximum range
  • Use with Modal or Non-Modal UserForms
  • Dynamically setup the Slider Buttons and Labels to completely new positions within a UserForm at runtime

Installation

Right-click on the file, 'UserFormSliderButtons.zip' and extract the contents to yur computer. Open the file 'UserFormSliderButtons.xslm' and test out the Example Slider Buttons to see how they work. All of the Images used in this Software are included in the 'Images' Folder in the zip archive. Please read all of the info on the individual Sheets and in this online documentation before you begin to edit and create your own Slider Buttons or before turning to Support

Usage

Using the UserForm Slider Buttons Software


The Main 'UserFormSliderButtons.xlsm' File
Before you start editing and trying to create your own UserForm Slider Buttons, take some time to look at the 4 Slider Buttons on the UserForm and the Code behind them. Press the tiny Buttons with the numbers on them to run any examples in the main file. There are 4 Slider Buttons with respective Placeholders and Bars named as 'Slider1', Slider1Placeholder' and 'Slider1Bar' - please ensure these naming conventions are followed when creating your own Slider Buttons otherwise the Code will not work correctly!

Examining the Objects or Controls that make up each Slider
Let's take a look at the UserForm Objects that make up a Slider. Open the VBE Editor and click on the UserForm to view the Slider Buttons and their component Image Objects. You may notice that the Sliders are in various states of 'being dragged' along their respective Placeholders and Bars - this is normal as this is just the initial position that I have loaded them into; the Code will set these directly at runtime but it is best practice to at least set them up on your UserForm, looking like proper Sliders. Click on the first Slider Button, it is named 'Slider1' and you can see from the Explorer Window that it is an Image Object or Control. Whenever you add an Image you should ensure that the BackStyle is set to 'fmBackStyleTransparent' and the BorderStyle is set to 'fmBorderStyleNone'. If you click the Drop-down in the Explorer Window you will see all of the Objects or Controls that make up the first Slider ie. 'Slider1', Slider1Placeholder' and 'Slider1Bar'. Almost ALL of the Objects or Controls are Images with the exception of their Values which are Labels. Where I have added extra Images, I will still leave the prefix of the Slider name ie. 'Slider4Layer'. See the image below for the Sliders that you get in this Software on the UserForm:



Click on the Placeholder and Bar Images. You will notice that I have overlaid these and set their 'Left' positions similar. If you want to layer Objects or Controls, select the Object or Control and right-click, select 'Bring Forward' or 'Send Backward'. There are also a number of Labels that will accept each Slider Button Value as they are dragged. The Code will skip any errors if these are omited but it is good to let the user know the value they may be setting. Each Image used is Loaded using my FREE Transparent Image Software that you can download here. This is because you can load Transparent PNG's into the Image Controls. Once loaded, you can simply Paste into the 'Picture' member of the Control which will appear as a '(Metafile)'. Instructions on how to ensure the Background Transparency is maintained are included in the downolad file. All of the Images you see in this Software were designed in Excel as Shapes, exported as .SVG (right-click, Save As...' on the Shape and then edited in Affinity Designer, before being exported back out again as a Transparent PNG. Sounds complicated, but you can just Copy and Paste images from Shapes in Excel directly into the 'Picture' member of the Image Control if you like, you have many options, I just wanted to show you that you can layer up Transparent Slider Button Controls! Here are some of the Images included in this Software - don't worry if you don't size the Images perfectly, they can be longer in case you want to increase the length; you can see that my Placeholder is longer than my Bar:













Setting up your own UserForm Slider Buttons
Okay so you have checked out the examples and had a look at the Code and the Images on the UserForm. Before trying to design your own SLider Buttons from scratch, what you really want is to incorporate my Code with one of my Sliders in your own UserForm. Well lets see how you can do this. Open my Software and then create or open a new Workbook or existing Project (Macro-enabled, of course...). I will create a new Project called Test.xlsm - please follow along to see how it is done

With both files open go into the VBE Editor so you can see the Code Modules of both Projects. In the Test file Insert a New UserForm to the Project, leave it as UserForm1. Now click on the UserForm1 of the Slider Buttons Software and using the Mouse, drag a rectangle around the first Slider Button to highlight all the Images that make up the Slider Button and on the file menu do Edit-Copy (or Ctrl + C) like the image below:



Switch to the Test file and on UserForm1, do file menu Paste (or Ctrl + V) to Paste the Slider Images into the UserForm like the image below:



Now add the following Code in the 'UserForm Code Module' in the Test file - we are setting up a single Slider called 'Slider1', so you need to Initialise it and add the Slider1 Button MouseDown() and MouseMove() Event Handlers. The MouseDown() Event Handler will call the DragSlider() Subroutine and the MouseMove() Event Handler will ensure that the Cursor is change from a Pointer to a Hand when you are over the Slider Button: 
Option Explicit

Private Sub UserForm_Initialize()
   InitialiseSlider Me.Slider1, ThisWorkbook.Sheets("Sheet1").Range("A1").Value2
End Sub

Private Sub Slider1_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   DragSlider SliderControl:=Me.Slider1, UpdateRange:=ThisWorkbook.Sheets("Sheet1").Range("A1"), Minimum:=1, Maximum:=100
End Sub

Private Sub Slider1_MouseMove(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   Dim MouseCursor As Cursor
   Set MouseCursor = New Cursor
   MouseCursor.AddCursor IDC_HAND
End Sub
The Test UserForm Code Module should look like this:



Okay, so now with both Projects open and visible in the Explorer Window, drag each of the following Code Modules across into the Test File, the Cursor Class Module, the mdExample Code Module and the mdUserFormSlider Code Module. This is how the Test file should now look:



Now run the Subroutine below in the mdExample Code Module in the Test file and the UserForm will popup. Drag your Slider and the value will be output to Cell "A1" of "Sheet1": 
Option Explicit
'Option Private Module

' display the UserForm and Sliders
Public Sub SliderButtonExample()
   With UserForm1
   
      ' dynamically setup the Slider Buttons and Labels to completely new positions within a UserForm at runtime
'      .Slider1.Left = .Slider1.Left + 100
'      .Slider1Placeholder.Left = .Slider1Placeholder.Left + 100
'      .Slider1Bar.Left = .Slider1Bar.Left + 100
'      .Slider1Value.Left = .Slider1Value.Left + 100
'      .Slider1DetailLabel.Top = .Slider1DetailLabel.Top + 15
      
      .Show 0
   End With
End Sub
The UserForm and the Test file should look like this:



You will notice that the only thing missing is a Label for the Slider value. You can Copy this across or simply use the Toolbox to add a Label Control and Name it 'Slider1Value'. I will do this like the image below:



Then you will have a UserForm that looks like this - good job!





Changing the Images of the Sliders without Transparency
You can design your Sliders in Excel and then simply Copy & Paste them into each UserForm Image Control if Transparency is not an issue, for example all of your Shapes are rectangular. Here I have designed some new Shapes in Excel, a Button, a Placeholder and a Bar:



And then I Copy & Paste into the UserForm Image Controls like this - they will go in as 'Bitmap':



You should at least set up the new Slider as you would like it to be seen on the UserForm when it pops up, so I will move all of the Images to look like my final Slider. Nudge the Button down 1 point if it doesn't look quite right and align the Left and Top positions of the Placeholder and Bar until it looks great. You can highlight and move all of the Images around with the Mouse on the UserForm if you want to change the final positions. One thing you MUST do is to ensure that both Bars are similar lenghts as well unless you will be setting these less than the lowest Bar length. So in my example my Bar was shorter than my Placeholder, so I simply made my Bar Shape longer in Excel and then Copied it over again. You can shorten the Bar in the UserForm but just make sure they are of similar lengths. So after resizing my Bar this is the final result, a Slider on a UserForm with a range from 1 to 100:





Changing the Images of the Sliders with Transparency
If you want to use Circles for Buttons then you will need to design and then Copy & Paste in Transparent PNG's. You can do this using my Free Transparent Image Software that you can download from here

If you make the Background of your UserForm white then this is not an issue if the Circle external parts of the Image are white as it will blend into the UserForm Control or UserForm background, however if not, then you need to adopt the following journey to ensure your Images look correct

You can design Transparent PNG's in your own art package and then simply load them in using my Free Software OR you can design a Shape in Excel, so let's design a Shape in Excel, here I have a Circle Slider Button and all of its components:



Even though the Slider Button Shape looks like it can be copied into an Image Control if you do that it will have a White Background like this:



This is not what we want, so we need to export the Image out and then bring it back in using my Free Transparent Image Software. There are other issues that we may also need to resolve like resizing the Image as a Shape designed in 'cm' with Shadows etc. may need modifying in an art package. I like to use like Affinity Designer. So you will need to right-click on the Shape in the Worksheet and select 'Save as Picture...'. Saving as a PNG will still work but when the Image is copied back it will be bigger and the Transparent space around it may also be bigger, furthermore, resizing it in the Image UserForm Control itself will not result in the final Shape you think it will as any resizing will simply 'Clip' your loaded Image. Therefore my way is to use an art package to edit and then save the Images back out as a PNG again. To do first right-click on the Shape in the Worksheet and this Save As '.SVG'. Load it into your art package ie. Affintiy Designer. This allows the Stroke, Fill and Resizing of the Document Shape Width and Height and or any of the elements. It also allows you to get rid of Shadows or modify their size as they will be loaded in as separate Images into Affinity, so you can still use them ie. Glows, Drop-shadows etc.

You will notice that loading usig my Free Software will add the Images back as '(Metafile)'. Here is the finished Slider after exporting as SVG, editing in Affinity and then exporting back out as PNG, then finally loading back in using my Free Transparency Software. I had an issue with the Bar being squashed as it is resized by the Code - if you ever get this issue, then set the 'PictureAlignment' Property to 'fmPictureAlignmentBottomLeft' to fix it (see F.A.Q.):





Changing the Range for a Slider Button Initialisation and when the Slider is Dragged
This is pretty straightforward. Go into the VBE Editor and click into the UserForm Code Module in the 'UserFormSliderButtons.xlsm' file. Here you will see the UserForm_Initialize() Event Handler Code. The : 
Private Sub UserForm_Initialize()
   InitialiseSlider Me.Slider1, ThisWorkbook.Sheets("Sheet1").Range("A1").Value2
End Sub
If we add in the Named Arguements we see all of the Parameters that can be initialised. The Minimum and Maximum settings can be adjusted ie. 20 to 75: 
' normal
Private Sub UserForm_Initialize()
   InitialiseSlider SliderControl:=Me.Slider1, _
                    SliderPosition:=ThisWorkbook.Sheets("Sheet1").Range("A1").Value2, _
                    Minimum:=1, _
                    Maximum:=100
End Sub

' modified
Private Sub UserForm_Initialize()
   InitialiseSlider SliderControl:=Me.Slider1, _
                    SliderPosition:=ThisWorkbook.Sheets("Sheet1").Range("A1").Value2, _
                    Minimum:=20, _
                    Maximum:=75
End Sub
Whenever you modify this Event Handler you must also modify the MouseDown() Event Handler like this: 
Private Sub Slider1_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   DragSlider SliderControl:=Me.Slider1, _
              UpdateRange:=ThisWorkbook.Sheets("Sheet1").Range("A1"), _
              Minimum:=20, _
              Maximum:=75
End Sub
So now our Slider Button range is 20 to 75

Changing the Cell that recieves the Value for the Slider Button
This is straightforward also, simply adjust both Event Handlers again with the correct Sheet and Cell ie. for "Sheet2" and Cell "A20" modify the Code like this: 
Private Sub UserForm_Initialize()
   InitialiseSlider SliderControl:=Me.Slider1, _
                    SliderPosition:=ThisWorkbook.Sheets("Sheet2").Range("A20").Value2, _
                    Minimum:=20, _
                    Maximum:=75
End Sub

Private Sub Slider1_MouseDown(ByVal Button As Integer, ByVal Shift As Integer, ByVal X As Single, ByVal Y As Single)
   DragSlider SliderControl:=Me.Slider1, _
              UpdateRange:=ThisWorkbook.Sheets("Sheet2").Range("A20"), _
              Minimum:=20, _
              Maximum:=75
End Sub


Dynamically setting Slider Buttons at run-time
You can move any of the Image Controls at run-time using Code like this: 
Public Sub SliderButtonExample()
   With UserForm1
   
      ' dynamically setup the Slider Buttons and Labels to completely new positions within a UserForm at runtime
      .Slider1.Left = .Slider1.Left + 100
      .Slider1Placeholder.Left = .Slider1Placeholder.Left + 100
      .Slider1Bar.Left = .Slider1Bar.Left + 100
      .Slider1Value.Left = .Slider1Value.Left + 100
      .Slider1DetailLabel.Top = .Slider1DetailLabel.Top + 15
      
      .Show 0
   End With
End Sub


Making the UserForm Modal
You can simply change the UserForm to Modal or Modeless by setting the Code to zero (0) or 1 for Modal, like this: 
Public Sub SliderButtonExample()
   With UserForm1
      .Show 1
   End With
End Sub

Screen Shots

UserForm Slider Buttons in action on a regular UserForm, ontop of different coloured Image layers, with varying transparency options

UserForm Slider Buttons for Excel demonstrating the various different Sliders available; see how the Cells are updated in the Worksheet with the Slider Button respective values. You can easily design your own Sliders and use my Code to operate them...

A different Slider built entirely by creating Shapes in Excel and then Copying and Pasting them into the Image Controls on the UserForm

32bit Excel Screen Shot

FAQ

Q. Can I start a Slider at 50 and end it at 75?
A. Yes you can start a Slider and end a Slider at any value - see the Code in the UserForm Code Module for how to Initialise() and set the DragSlider() Subroutines accordingly

Q. I added a Placeholder and a Bar image and set the Slider to a range of 1 to 100 but it goes from zero (0) to 100. Why does it do this?
A. Remember to ensure that your Placeholder and Bar start at the same place in an image, for example ensure that one of these images doesn't have more transparent space around it on the left side. If they are not aligned, then you may experience the Slider going slightly past the Placeholder to zero instead of 1. Check out all of my images in my example UserForm to see how I set them up in terms of any transparent space on the left sides of the Placeholder and Bar. If this does not fix the issue, there may be instances whereby you may need to tweak the start by 1 more than your Minimum, depending on how the Images were designed and Saved out in relation to the size of your Toggle Button - simply adjust the Minimum to be 1 more ie. here I wanted 10 to 100 but have had to set the Minimum to 11 - the Slider still runs froom 10 to 100 and outputs the correct results 

   DragSlider SliderControl:=Me.Slider1, UpdateRange:=ThisWorkbook.Sheets("UI").Range("J12"), Minimum:=11, Maximum:=100

Q. I added a Placeholder and a Bar image but when I drag the Slider Button my Bar image is squashed on the left hand side and appears to move - what is causing this to happen?
A. If a Bar is being squashed as it is resized by the Code, you can prevent this from happening by setting the 'PictureAlignment' Property to 'fmPictureAlignmentBottomLeft'. I will revist my Version 1 release and see if I can update this setting for the current Images, so if any are copied then this setting will follow the Image Controls

Q. Even using transparency, when using a Circle Button, I see some of the surrounding colour that overlays the Plaeholder. How can this be fixed?
A. You can try changing the Placeholder to the same colour as the UserForm Background or the Image Layer that it is over and then add another rectangular Image that sits between the Slider Button and the Placeholder OR make the Placeholder and Bar thinner

Videos

This is a video of the UserForm Slider Buttons in action. Music is 'Statement - NEFFEX' · view the UserForm Slider Buttons video on YouTube

Caution: Music may contain Explicit Lyrics, please listen at your own risk!

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

* There are currently no bugs identified

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 here
- the latest Version including a description of any changes made is always shown first

12.01.2023 - (Version 1)

General release of UserForm Slider Buttons