How to create slider

vkumar9136
Community Member Posts: 47 ☆ Roadie ☆
In my project, I need to create a slider and according to that selection, I have to move next page.
I followed the steps to create slider from a link I got on trivantis,
http://trivantis.com/blog/using-jquery-lectora-customize-e-learning-courses-part-3/
In their file it's working fine but In my responsive course it's not working. Can anyone let me know that where I am doing wrong?
I am attaching file here.
Thanks
I followed the steps to create slider from a link I got on trivantis,
http://trivantis.com/blog/using-jquery-lectora-customize-e-learning-courses-part-3/
In their file it's working fine but In my responsive course it's not working. Can anyone let me know that where I am doing wrong?
I am attaching file here.
Thanks
Comments
-
-
-
Ok, I know what the problem is. JQuery UI Draggable that I use does not work with Hammer JS 1.06 that Lectora 16 uses. I updated hammer.js to the latest version (2.06) from their website (http://hammerjs.github.io/) and it works! So just update one file (you can update it every time in the published output or once in the Program Files/Trivantis/Lectora folder, where the original is taken from for publishing).
I'd also like to ping Trivantis guys and ask them to update Hammer to the latest version. -
-
Hi Sergey,
Thanks for your tutorials. I was able to replicate them all and found them extremely helpful.
A question regarding the slider.. When moving the slider, how do we set a variable to change contents on a page depending on where the slider lands?
For example... Let's say the slider had a range of 4 with 1 step intervals. How do we set the variable for change contents if value equals a set number. Given the JS and CSS classes were all new to me, and having an external files, I wasn't sure how to achieve this?
Is it via lectora or do you have to do it in the my_functions.js file? -
Hi Nick,
you can use this code to change the Lectora variable value(In my case variable name is "slider1"), add Var to your variable when you are using in script. This is working perfect for me.
On the page that you want to add a slider….. create a HTML block and include the following html:
<div class="range-slider">
<input type="range" name="html-slider-example" id="html-slider-example" class="custom" min="1" max="5" value ="1" oninput="sldChange1(this.value)" onchange="sldChange1(this.value)">
</div>
<script>
function sldChange1(val){
if(val==1){
Varslider1.set("Always");
}
else
if(val==2){
Varslider1.set("Often");
}
else
if(val==3){
Varslider1.set("Generally");
}
else
if(val==4){
Varslider1.set("Sometimes");
}
else
if(val==5){
Varslider1.set("Never");
}
}
</script> -
Hi Nick, here is another option for you to show the objects on page, you can use this code:
This is working perfectly for me. you can give it a try.
<script>
function sldChange1(val){
if(val==1){
document.getElementById("image1111522").style.visibility = 'visible';
document.getElementById("text1111774").style.visibility = 'hidden';
document.getElementById("image1111602").style.visibility = 'visible';
}
}
</script> -
Hey all,
I'm also trying to create a slider that when it is dragged to a specific x coordinate range specific content will appear and hide other content. I have a total of 7 x coordinates:- if dragger is between 90-170, show content 1, hide everything else
- if dragger is between 193-291, show content 2, hide everything else
- if dragger is between 312-412, show content 3, hide everything else
- if dragger is between 432-532, show content 4, hide everything else
- if dragger is between 552-652. show content 5, hide everything else
- if dragger is between 672-772, show content 6, hide everything else
- if dragger is between 792-892, show content 7, hide everything else
Thanks, -
-
This range slider is all CSS and so far in my tests it seems to work with the non web standard RCD output.
Categories
- 35.8K All Categories
- 109 ✫ Announcements
- 33.1K Lectora®
- 31.1K Lectora Discussions
- 28.9K Lectora Desktop
- 2K Lectora Online
- 2K Lectora Feature Requests
- 71 Lectora User Groups
- 36 Lectora Accessibility User Group (LAUG)
- 22 ELB Learning Content
- 22 ELB Learning Content Discussions
- 323 CenarioVR®
- 190 CenarioVR Discussions
- 133 CenarioVR Feature Requests
- 41 Rockstar Learning Platform®
- 38 Rockstar Learning Platform Discussions
- 108 CourseMill®
- 108 CourseMill Discussions
- 47 ReviewLink®
- 47 ReviewLink Discussions
- 7 The Training Arcade®
- 7 The Training Arcade Discussions
- 934 All Things eLearning
- 36 eLearning Development
- 546 Learning Management System (LMS) Integration
- 332 Web Accessibility
- 1.2K ♪ The Green Room
- 9 Additional Learning Products