How to create "interactive" slider

kld1

New Member
#1
Hello everyone,


I've tried to look for some tutorial on how to create an interactive slider similar to the attached image but I couldn't find anything at all. Do you know how it was done?

image.jpg


As you can see from the image , once you hold and move the button on the left slider to different values, the arrows that represent the body heat on the figurine move accordingly.


Link to the website where I found the function: celliant dot com


I'd really appreciate it if you could give me a few pointers on how to do it...


Many thanks.
 

IamSam

Administrator
Staff member
Administrator
#2
Hello and welcome to PSG.

Since interactive slider animation is a function of the HTML/CSS/JavaScript of a web page.

Are you asking about how to code a slider or how to create the graphics used in the slider?
 

kld1

New Member
#3
Hello and welcome to PSG.

Since interactive slider animation is a function of the HTML/CSS/JavaScript of a web page.

Are you asking about how to code a slider or how to create the graphics used in the slider?
Hi IamSam,

Thank you for your reply. I'd like to know how to create a connection between the interactive slider and the figurine in (perhaps) Photoshop. Not sure if that's possible.

Sounds like it needs to be coded. Is it simple to do?

Thanks
 

IamSam

Administrator
Staff member
Administrator
#4
Hi IamSam,

Thank you for your reply. I'd like to know how to create a connection between the interactive slider and the figurine in (perhaps) Photoshop. Not sure if that's possible.

Sounds like it needs to be coded. Is it simple to do?

Thanks
Photoshop would be used for creating the graphics and NOT the actual interactive portion. Photoshop can create animations, but I think this is something different.

Is it simple to do? For me it wouldn't be simple at all! Your going to have to wait for someone else to explain that part!

This is the code used to create the animation..............
Screen Shot 2017-05-27 at 12.08.45 AM.png
 

kld1

New Member
#5
Photoshop would be used for creating the graphics and NOT the actual interactive portion. Photoshop can create animations, but I think this is something different.

Is it simple to do? For me it wouldn't be simple at all! Your going to have to wait for someone else to explain that part!

This is the code used to create the animation..............
View attachment 74706
I see. Thanks for looking into it for me, IamSam. Much appreciated!