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.

Prepare

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.

There is also the RGBA, with  the A as the “Alpha Channel”. Which again is used for opacity. You could also read about that on CSS-tricks.

I found the input range attributes at the W3C wiki.

Plan

So, basically.

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.

A javascript function to collect the values, and then apply it to a RGB value.

Some styling.

Perform

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.

I had some problems getting the range values from the sliders, to the RGB value, but it was just me forgetting to correct concatenating in javascript. It’s funny how such small things eats up so much time.

Perfect

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!