Yesterday, I updated you on my Pixel Art project for my Grow with Google Udacity class. Today, I added more features including a custom color picker. I only had 10 or so colors before. I wanted to provide an option to users to pick their own color.
Someone on our GwG class slack asked if there was a way for you to create a color picker without using a plugin. I told him that I was plannning on doing this already and I told him my plan. He asked if he can see an example. I didn’t have one yet but I wanted to challenge my self, so, I decided to build the color picker.
Luckily, it only took me less than an hour to do it. Having a plan for how you want to build something helps with the execution part.
Here’s what we’ll build.
The HTML
Let’s first set up the HTML. Since we are using RGB, let’s set up the 3 sliders. We are using sliders because it’s easier to control and it allows us to limit the range. We will have a range between 0 and 255 inclusive to correspond to 256. Here’s the HTML.
<html> <head> <title>Range Sliders</title> </head> <body> // This will be the div that we'll display the color picked. <div class="current-color-box"> <p>Current color</p><div class="current-color"></div> </div> // The range sliders from top to bottom - red, green, blue <div class="range-slider"> <div class="range-colors"> <span class="range-slider-text">R</span> <input class="range-slider-range" id="slider-red" type="range" value="0" min="0" max="255"> <span class="range-slider-value">0</span> </div> <div class="range-colors"> <span class="range-slider-text">G</span> <input class="range-slider-range" id="slider-green" type="range" value="0" min="0" max="255"> <span class="range-slider-value">0</span> </div> <div class="range-colors"> <span class="range-slider-text">B</span> <input class="range-slider-range" id="slider-blue" type="range" value="0" min="0" max="255"> <span class="range-slider-value">0</span> </div>
We only really need the inputs here but we will us the spans with classes range-slider-text and range-slider-value as labels to help with user experience. range-slider-text will tell the user if he/she is changing Red, Green, or Blue. range-slider-text will show the current value from 0 to 255. We will change this using jQuery.
Inside the input, we have an id and a class. However, the most important things here are min="0" and max="255". These are the ranges for our sliders. We also set the value to 0. That’ll be our starting point. Basically, rgb(0, 0, 0) or black.
I won’t talk about what the ids and classes mean. We’ll deal with those once we go to our JS and CSS.
The JS
NOTE: To preview the code, scroll down and come back up here.
Now let’s get to the good stuff. JavaScript will help us grab the values from the slider inputs that we built on our HTML. We’ll use these values to format an RGB combination like this – rgb(RED, GREEN, BLUE).
Before we start, make sure that you add jQuery to your HTML. I suggest adding it right before the closing body tag to ensure that all DOM elements are loaded.
I used jQuery.com as my CDN. You can also use Google or even add the files and folders to your project. Here’s what I used.
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
Now, the first thing that we’ll do is to define our jQuery variables. It’s good practice to assign your jQuery selectors to variables because it’s expensive to use jQuery all the time. By assigning it, we are getting what we need just one time and then reuse it when needed.
The following are the variables that we need.
rangeColorsto select the div that contains all the sliderscurrentColorso that we can access that later on to change it’s backgroundsliderRedto target just the red slidersliderBlueto target just the blue slidersliderGreento target just the green slider
We also need to define variables that hold the values we will grab from the slider inputs – red, blue, and green.
Lastly, we’ll define a variable that will build the rgb combo – customColor.
After that, we are now ready to create the event listener that will allow us to create our own colors.
For this example, I am use jQuery’s change event. I want to be able to grab the values everytime the user slides one of the sliders. To listen to all of them, I have targeted the entire div that holds all the sliders.
After that, we define the callback function that will actually build the colors.
Inside the function, we will grab the values of each slider input and assign them to the appropriate variables. Here’s an example.
red = sliderRed.val();
Using the .val() method, we will grab the value of the input with id #slider-red. Remember that we assigned $('#slider-red') to the variable sliderRed .
We will do this for all 3 color variables.
As soon as any change is made (user slides the slider), the customColor variable will be assigned the rgb combo like so:
customColor = `rgb(${red}, ${green}, ${blue})`
NOTE: If you are wondering what the back ticks are, please check this out – Template Literals
To illustrate, if the user slides the red slider all the way to the right end, red will be 255. Since our initial value for all colors are 0 (defined on our HTML), the comboColor‘s value will become rgb(255, 0 ,0 which is red.
Now that we have our color, we can use this to change things on our code. For this example, we’ll just change a div‘s background color to indicate that it’s our current color.
To do this, we’ll be using some chaining. Here’s the code. I’ll explain it section by section.
currentColor.css({'background-color': `${gridColor}`});
currentColor– this is thedivwith classcurrent-colorthat we created on our HTML to indicate what color we have picked.css({'background-color': `${gridColor}`})– I’ll explain this in 2 parts.css()– this method will help us change a property within the selector that we chained this method to. In this case,currentColor{'background-color': `${gridColor}`}– this is the argument we pass on tocss(). This tells the method that we want to change the background color of the element to the color assigned to the variablegridColor
Another thing we’ll be doing is changing the numbers on the right side of our sliders. This number will display the current value for that slider. Here’s the code and I’ll break it down also.
$(this).find('.range-slider-value').html($(this).find('.range-slider-range').val());
$(this)–thisrefers to the selector that we were listening to. In this case, we were listening to thedivwith classrange-colors..find('.range-slider-value')– this looks for an element under therange-colorsdivwith class `range-slider-value`. This is the div that holds the number on the right of our slider..html($(this).find('.range-slider-range').val())– I will break this down furtherhtml()– This will change the value of what’s inside the element we are targeting with the argument we passed to it$(this).find('.range-slider-range').val()– this is the argument we will pass tohtml()$(this)– same as above.find('.range-slider-range')– this will find the an element with class `range-slider-range`. This is our input..val()– This grabs the value of the input
That’s basically it. Here’s the code.
let rangeColors = $('.range-colors');
let currentColor = $('.current-color');
let sliderRed = $('#slider-red');
let sliderGreen = $('#slider-green');
let sliderBlue = $('#slider-blue');
let customColor;
let red;
let blue;
let green;
rangeColors.on('change', function(){
red = sliderRed.val();
green = sliderGreen.val();
blue = sliderlue.val();
customColor = `rgb(${red}, ${green}, ${blue})`
$(this).find('.range-slider-value').html($(this).find('.range-slider-range').val());
currentColor.css({'background-color': `${gridColor}`});
});
I’m not going to talk about styling here. Otherwise, this post is going to even longer than it already is. However, I created a codepen for you so that you can see it in action and you can also see how I styled it.
https://codepen.io/jonmaldia/pen/GxXbex?editors=1010
Have fun!