I apologize for no animation - couldn't get it right. Animations on thumbs doesn't seem to be possible.
Works on Chrome and should work on Safari (untested)
Works on MS Edge
Does not work on IE Explorer
Does not work correctly on Firefox
There is a white line circling the left of the thumb when pulled to the right - this is because to get the left highlighted, I needed to some hacky shadow business because chrome - Nothing worked to get rid of it, not polygons, radii, extra shadows, inset shadows, background colors applied conditionally, nothing. Will put in the todo pile.
Filter component
To Note
Using it
Output
Multiple in a container