Part 2 of making sliders that will set variables in Captivate. This is the HTML and CSS that go into making the slider.
OK, so in the last post, (https://elearning.adobe.com/2018/05/set-variables-interactive-sliders-part-1-introduction/), I shared a small project with two working sliders to set some variables for a sales tax calculator. If you have not seen that yet, I encourage you to take a look as it will help to provide some context for this post.
In this post, I will share with you the HTML and CSS code that go into creating the slider itself. I hope to break it down well enough that any of you would be able to make something like this for yourselves. This is all made from scratch with no widgets or anything. In fact, I find it surprising how little code is necessary to make this work.
Alright, let’s get started…
Making the Slider
First of all, we will need some sort of text editor. Personally, I like to use Notepad++ which is a free utility but you can also use the Notepad program that comes with any Windows PC.
Second, we need some HTML code. Now, I do not intend to teach HTML, CSS, or JavaScript here but to show you how it is setup so you may replicate it in your own projects.
Here is the minimum code for a sliding bar.
<html>
<input type=”range”>
</html>
Now if you save your file with a .html extension and open it in your browser, you should see something like this.
You should be able to grab the handle with your mouse now and move it back and forth. As you can see from the code, this is a type of input called ‘range’. This means we can have a range applied to the slider. We can add some additional properties to the input that will define the minimum and maximum values for the range. Note the differences in the code below.
<html>
<input type=”range” min=“1” max=“100”>
</html>
Now when I slide the handle back and forth, I know that the input values will range from 1 on the far left to 100 on the far right. You should note that everything will look the same when it displays on the screen.
There are two more things that you will need and two more that you might want. The two you will need are to assign a class name and an ID. The class name will allow us to change the look of the slider from the default and to something of our choice and the ID will allow us to access the value of the input based on the position of the handle later on.
The two that you might want but are not required will be to assign a default starting value for the slider and to break up your values into defined steps.
Just like we did with the minimum and maximum values, we can define the property values by adding them to the input line in the HTML. Here is how it would look…
<html>
<input type=”range” min=”1″ max=”100″ value=“5” class=“slider” id=“slideRange” step=“1”>
</html>
As you can see, we added a value of 5. This will be the default start value.
We added the class name called slider.
We also added the ID called slideRange.
Finally, we added the step parameter and set it to a value of 1. This means that the slider will increment the values by one. You could set it for 5 if you want to go up and down by 5 or set it to something like 0.25 to have it go up by that much. This is the case in the percent slider. The sales tax percentages go up and down by 0.25.
Styling With CSS
Now let’s make it look a little different. To do this we will need to add some properties to our class name of slider within some style tags. It should look something like this…
<style>
.slider {
-webkit-appearance: none;
width: 500px;
height: 25px;
background: #121212;
outline: none;
}.slider::-webkit-slider-thumb {
-webkit-appearance: none;
width: 15px;
height: 50px;
background: #ffa013;
outline: none;
}</style>
Again, I don’t expect to teach CSS through this but I want you to be able to look at the stuff and know that you can change these properties for your own projects if you know what is happening. You will want to place this stuff between the two html tags and before the input.
In the creating of our input slider, we gave it a class name of slider. So if we define some properties of the slider class, our slider bar will go ahead and use them. You will notice that we actually have two little blocks of properties above. One is for the slider bar itself, (blue), which is often called the track, and the other is for the handle, (red), that you drag back and forth. Within each of those blocks you can see the same parameters defined.
The -webkit-appearance set to none basically says not to use the default look.
The width and height parameters are as you would expect and define the width and height of the track or handle.
The background parameter will set the color of the track or handle. Please note that these are hex values
Finally, the outline parameter set to none will get rid of the ugly outline that shows up when you use the slider if you do not set this.
Now you should have something that looks like this…
It will still function the same way.
One final trick with the styling…
As mentioned, you can use the background parameter to adjust the colors of the track and the handle, but you can also use it to reference your custom graphics for a track and handle. You will need to create your graphics and then point to them using the background parameter. It would look something like this.
background: url(‘pointer.png’);
You would need to indicate the location of the graphic relative to the saved html file and set your height and width appropriately for what you have created. Here is a simple example of using custom graphics for track and slider that is not super fancy but more interesting than just rectangles.
Take some time to play with this concept and see what you can come up with.
In the next post I will share with you how to take our HTML file and place it on your Captivate stage.
Feel free to ask any questions or share some of your own custom sliders. We would love to see them!
SUCCESS!
Thanks…
Learn, Grow, & Be Successful!
Respectfully,
Clg :)!
Hi Greg. Thank you so much for sharing! I’m looking forward to your next post on this solution. I definitely want to step out of my comfort zone building Captivate courses, but I’m not sure how to start that process.
I look forward to it. Thank you for this tutorial!
Yes, I will have a post on getting the HTML into Captivate followed by the JavaScript to pull the values to a variable.
Hi Greg,
Will you be discussing the javascript you used to get the sliders working?
Jose
You must be logged in to post a comment.
