How to flip an image using a range slider in html5 css3 and javascript?

Question

I am working on a project and I want to rotate an image using a range to rotate the image 180 degrees.

I am having difficulty getting the range slider to operate the flip/ rotation- help needed. thank you.

I have tried many different variations, using the different technique by different people, but they use a div, I am using an image class instead. was wondering if it is possible to rotate/flip an image class?

'''

https://codepen.io/lukemersh/pen/EJREaJ

'''

Actual results don't happen. I can move the slider, but it doesn't rotate the image, please help.

Answer 1

Your id of the shoe image is wrong, change:

document.getElementById('img.shoe')

to

document.getElementById('shoe')

"img.shoe" is a selector for images with class shoe, its not an element identifier. To use such a selector you'd need to use "document.querySelector"