Im trying to make a "scrubber", like a bottom scroller u see when a webpage is too long, length-wise.

Except, its much smaller, and left side is "Small" right side is "Widescreen" and simply, when you mouse over it, a small animation plays of the scrubber moving from left to right, if you are already on "small", and vice-versa for large.

When you click on the Widescreen side (if you are on Small resolution already), it would switch to "Widescreen" (and in code, I have already made it so when they click Widescreen, it actually changes what you see on the site to widescreen for obviously widescreen users, and the same for Small)

I have built my own with Photoshop and HTML (It is so unprofessional though haha) I was just curious:
1. What would this technically be called? For me to possibly Google a solution?
2. Is there anyone who might possibly know how to code this with javascript/HTML/CSS?
3. Is there possibly a program I can download (Like WOWSlider is for making cool carousel for your site using JQuery), is there something like that I can download, but for scrubbers or whatever the technical term would be?
3. My form is pretty crappy... I used 2 images, and 2 gifs for the animations, is there possibly a better way that anyone may know of I can do this format in?

I am just curious, I thought it would be something that might look cool to fill that extra awkward empty space on my website.