How to create slider

Thanks sergey,

It's a nice idea to use slider in lectora..... when I found this blog , I got a hope that it can be done.

Since I am the author of that blog you are referring to, I guess I am to blame :) It was written before Lectora 16 was released so it might not be compatible. I'll check your sample and get back with any amendments to the code.

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.

So far I can confirm your source files work when published in Lectora 12, but not in Lectora 16. I have to dig into what's changed between 12 and 16 to cause this.

Thanks Sergey,

Hi Sergey,

Thanks for your tutorials. I was able to replicate them all and found them extremely helpful.

undefined

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, 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.

undefined

function sldChange1(val){

if(val==1){

document.getElementById("image1111522").style.visibility = 'visible';

document.getElementById("text1111774").style.visibility = 'hidden';

document.getElementById("image1111602").style.visibility = 'visible';

}

}

undefined

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.

undefinedinput 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)"undefined

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");

}

}

undefined

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:

1. if dragger is between 90-170, show content 1, hide everything else
2. if dragger is between 193-291, show content 2, hide everything else
3. if dragger is between 312-412, show content 3, hide everything else
4. if dragger is between 432-532, show content 4, hide everything else
5. if dragger is between 552-652. show content 5, hide everything else
6. if dragger is between 672-772, show content 6, hide everything else
7. if dragger is between 792-892, show content 7, hide everything else

I mimicked the coding from Sergey's tutorial and got the slider to work but I'm curious if I need to write an external script for the conditions above or it can be done with variables in Lectora. I'm struggling with where I could define the coordinates.

Thanks,

This range slider is all CSS and so far in my tests it seems to work with the non web standard RCD output.

undefined

Hey Vimal,

Thanks a tonne for the advice! Can you post a sample of this if possible?