Tutorial on how to add a slider bar in your Captivate project. It covers how the slider value can interact with Captivate’s variables and functions.
There are a lot of cool things you can do with a slide bar. It can enhance interactivity and the overall user experience. This tutorial will show you how to add a slide bar and capture and use its data variable.
Step 1. Create an HTML5 zip file
Open a text document (in any text editor). Copy and paste the following. Save the text document with the suffix html. Then zip the html file. I will explain the details of this file at the end of this tutorial – for those interested.
<!doctype html>
<html>
<head>
<meta charset=”utf-8″><style>
.slidecontainer {
width: 100%;
}.slider {
-webkit-appearance: none;
appearance: none;
height: 8px;
width: 100%;
border-radius: 10px;
background: lightgrey;
outline: none;
opacity: .5;
-webkit-transition: .2s;
transition: opacity .2s;
}/* Mouse-over effects */
.slider:hover {
opacity: 1;
}.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border-radius: 10px;
width: 25px;
height: 25px;
background: grey;
cursor: pointer;
}.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: grey;
cursor: pointer;
}
</style>
</head><div class=”slidecontainer”>
<input type=”range” min=”1″ max=”100″ value=”20″ class=”slider” id=”myRange”>
</div><body>
<script>
parent.slider = document.getElementById(‘myRange’).value
var slider = document.getElementById(“myRange”);
slider.oninput = function() {
parent.slider = slider.value
parent.slideFunction();
}</script>
</body>
</html>
Step 2: Import zip file into Captivate
Open the Captivate file you want to have the slider in.
Click Media -> HTML5 Animation and then import the .zip file. You can resize animation window to whatever size you like. The width is set to 100% so changing the size will not affect the slider’s value. Remove the scroll bar and border under ‘style’ if you prefer.
Step 3: Adding the Captivate Variables
Create a new variable called ‘slider’ and give it a value of 0. In my example I have created a textbox that will display the ‘slider’ variable.
On the slide with the slider, execute javascript On Enter. In the javascript window enter the following:
function slideFunction() {
}
This is an empty function called slideFunction. It will execute every time the slide bar value is updated (i.e. anytime the user moves the slider) If you want to follow my example, I use this function:
function slideFunction() {
scaling = slider * 0.05
document.getElementById(“imgc”).style.transform= “scale(“+scaling+”)”
}
This function will change the size of the object with the id ‘img’.
That is basically it. I’ll explain below the details of how it works and some ideas of how you could use it. If you understand .css you can change the appearance, color, and size of the slider – as well as add animation effects.
Explanation of script
Style
The stuff between the <style> tags is .css code. It states what each element should look like. For example the .slider is set to have “border-radius: 10px”. If you wanted the borders to be straight, you can erase this border-radius style, or set it to 0px. Note that I have the webkit appearance set to none so that it overwrites the default style.
I recommend that when you edit the css, you copy and paste the entire html script it into a real time html editor. I use https://htmledit.squarefree.com/ as a simple one but there are lots.
Body
This is the stuff between the <div> tags. I basically have a slider with the ‘slider’ class (that sets the style). You can alter the range with the min and max settings. You can also set the initial value to whatever you choose.
Scripts
This is where the HTML5 file communicates with Captivate. There is an ‘oninput’ function. This means every time the slider bar is moved it will trigger this function. This function does two things. (1) it makes the Captivate variable slider equal the slider’s value. “parent.slider = slider.value”. (2) It triggers slideFunction() – the function you created in the Captivate javascript window. Technically you don’t need to have a function – but I put one in just in case you wanted something.
In other words, it updates a Captivate variable, and it executes a Captivate function.
How You Could Use This
The possibilities are endless 🙂
These are just a few I thought of:
- You can have a submit button (as I put in the example) that checks the ‘slider’ value.
- You can create a transform effect based on the slider value
- You can create feedback statements based ranges the user submits.
- You could create likert scales. Change the range of the slider between 1 – 5.
- Create movable animated charts, scales or tables
- Show or hide different images based on the values
- Create a photo slideshow – the photos move across the screen based on the slider value
Enjoy the file and please feel free to ask any questions. Thanks
Hi Jeremy,
I found your code and explanations very useful. I modified the concept to create a slider with up/down arrows to move an image in an area of one of our software tools. It is working nicely except for two things which I can’t seem to figure out: 1) How to make the slider move up down when the arrows are clicked 2) How to make the slider work/appear correctly when using IE 11.
If you’d like to see my code I can send you an example.
Hi! I would like to use this slider bar to toggle the opacity of an image, but I am unfamiliar with code/css… can anyone help me out or point me in the right direction? thanks!
Hi! I am unfamiliar with script/coding but I would like to use this slide bar to toggle an image’s opacity rather than its scale. Would this be possible? Can anyone help me figure this out or point me in the right direction? Thanks!
I’ve attempted this and it doesn’t work. Also, Captivate says your downloadable file is corrupt.
It seems that the full quotation marks might be the problem – I tried it first and it wouldn’t work, I just got a input box with the value of 20 inside when I viewed the html file. However, deleting and re-adding full quotation marks seemed to correct this.
You can see below that in the original post the wrong quotation marks are used. I have included the version with full quotation marks below so you don’t have to re-edit manually!
<div class=”slidecontainer”>
<input type=”range” min=”1″ max=”100″ value=”20″ class=”slider” id=”myRange”>
This worked for me and hopefully it will work for you
Updated html:
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<style>
.slidecontainer {
width: 100%;
}
.slider {
-webkit-appearance: none;
appearance: none;
height: 8px;
width: 100%;
border-radius: 10px;
background: lightgrey;
outline: none;
opacity: .5;
-webkit-transition: .2s;
transition: opacity .2s;
}
/* Mouse-over effects */
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
border-radius: 10px;
width: 25px;
height: 25px;
background: grey;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 25px;
background: grey;
cursor: pointer;
}
</style>
</head>
<div class=”slidecontainer”>
<input type=”range” min=”1″ max=”100″ value=”20″ class=”slider” id=”myRange”>
</div>
<body>
<script>
parent.slider = document.getElementById(‘myRange’).value
var slider = document.getElementById(“myRange”);
slider.oninput = function() {
parent.slider = slider.value
parent.slideFunction();
}
</script>
</body>
</html>
You must be logged in to post a comment.
