Okay, so I saw the input range slider thingy when I made the first form.
I’ve seen these all around the web of course (as most probably have), but I haven’t given them much thought. I just wanted to try them out.
So for this project I was thinking about making tree of these inputs with a range type, and a button. And I wanted their function to be adjusting color light of a RGB value. I also wanted it to display a div with the visual result.
Colors in general are not my strong suit. I started with the wikipedia article on the RGB Color Model . And learned that:
The RGB color model is an additive color model in which red, green, and blue light are added together in various ways to reproduce a broad array of colors. The name of the model comes from the initials of the three additive primary colors, red, green, and blue.
Nice to know.
I found the input range attributes at the W3C wiki.
I want three input range sliders. One for each color in RGB.
A button to apply the result to a div.
The input range doesn’t show of the value you are selecting by default, so I need to do something about that.
I made a container div with the rest of the HTML inside. Easy peasy. I gave the input range elements the following attributes: id, name, type, min, max and value. I also ende up skipping the button. Instead I gave the input range sliders an onchange attribute (and also learned that you can put multiple functions inside it).
I was thinking about making a bubble to show the current value on the input range slider, and found this CSS-tricks article. But I figured it was a bit to complicated for this little project.
Instead I made a new input field under each slider. With a type of text. Found this on Stackoverflow. And with inspiration from this (also Stackoverflow), I made it so I could use the same function on all three of them.
Lazy as I am, I was quite happy when I found a site to style input ranges on CSSPORTAL. Initially, the slider wouldn’t show on mobile devices (at least not in the developer tools). But when I styled it some, it showed up.
One problem though. It seem you have to change all the range slides for the function to fire. I dont’t know why yet. Anyone?
Anyways. Onwards to the project!