Skeuomorphic Range Sliders and Rotary Encoder

Audio UI styled components created in Sketch for use on my companies website; https://abstractly.io.

Outputted values behave like that of their physical counterparts; The range slider acts as a potentiometer and the rotary, a quadrature encoder.

I love this sort of design work. The reflection effect on the rotary dial was a pleasurable challenge in Sketch, but requires some complicated CSS to manage across browsers. Implemented *most* of this in HTML/CSS/JS, but cheated in some places *cough*SVG*cough* so that some smaller details could be preserved.

Not sure at all how I will go about animating the rotation of the dial and making it look real... Lots of room for improvement! Msg me if you do skeuomorph and are willing to drop some knowledge on me.