javascript rgb slider

How we can create an RGB slider using JavaScript and HTML range input? Solution: See this JavaScript RGB Slider With HTML Range Input, Get HEX Value.

Previously I have shared a random color generator program that changes color randomly on click, but this is an RGB Slider. Basically, the RGB is color combination R stands for red, G stands for green, and the B stands for blue. And together these 3 colors make another color by increasing and decreasing their values.

Today you will learn to create a program for creating or get HEX value of colors. Basically, there are 3 range sliders for RGB values: first for R, second for G, and third for B. And we can generate a color by sliding them because after together merging these colors can create any color. When you will slide the range then the background color will also change according to slide values. Also, you can see the generated color’s HEX value downside of the sliders.

So, Today I am sharing JavaScript RGB Slider With HTML Range Input. There I have used HTML inputs and some other attribute to creating the range slider and labels, and functions are based on pure JavaScript. I did not use any library or framework for creating this program, if we use one of them then work will very easy and we can save some time.

If you are thinking now how this RGB slider actually is, then see the preview given below.

Preview Of Get Color’s HEX Value Program

See this video to getting an idea of how this program looks like.

Live Demo

Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

You May Also Like:

JavaScript RGB Slider With HTML Range Source Code

Before sharing source code, talk a little bit about it. First I have created 3 fields for 3 different sliders using HTML <fieldset> tag. Inside each fieldset tag I have placed an Input, an Output, and a label tag. The input tag is for range slider with <input type="range"> and the output tag is for show sliders value, and label for showing R, G, B.

Now using CSS I have placed all the elements in the right place, as you can see in the preview. With CSS I have managed the position, font-style, color, etc basic things. And also styled the HEX field for seeing properly values in any background color. There CSS has very less part because functions are powered by JS.

JavaScript handling here the main feature of the program. JS fetched the inputs and outputs values using document.querySelector command. And changing the values according to slides value using addEventListener command (info). For creating the hex value I have added all slides values with after converting the values using some commands.

Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created JavaScript RGB Slider With HTML Range Input, Get HEX Value Program. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

RELATED ARTICLESMORE FROM AUTHOR

5 COMMENTS

  2. I found a little bug in there – Your code contained
    outputR = document.querySelector(‘#outputR’),
    outputG = document.querySelector(‘#outputG’),
    b_out = document.querySelector(‘#b_out’),
    But the problem is, that it don’t show a value for blue, so i changed the .js code and here is what it should look like
    var body = document.body,
    r = document.querySelector(‘#r’),
    g = document.querySelector(‘#g’),
    b = document.querySelector(‘#b’),
    outputR = document.querySelector(‘#outputR’),
    outputG = document.querySelector(‘#outputG’),
    outputB = document.querySelector(‘#outputB’),
    hexVal_out = document.querySelector(‘#hexVal’);

    function setColor(){
    var r_hexVal = parseInt(r.value, 10).toString(16),
    g_hexVal = parseInt(g.value, 10).toString(16),
    b_hexVal = parseInt(b.value, 10).toString(16),
    hexVal = “#” + pad(r_hexVal) + pad(g_hexVal) + pad(b_hexVal);
    body.style.backgroundColor = hexVal;
    hexVal_out.value = hexVal;
    }

    function pad(n){
    return (n.length<2) ? "0"+n : n;
    }

    r.addEventListener('change', function() {
    setColor();
    outputR.value = r.value;
    }, false);

    r.addEventListener('input', function() {
    setColor();
    outputR.value = r.value;
    }, false);

    g.addEventListener('change', function() {
    setColor();
    outputG.value = g.value;
    }, false);

    g.addEventListener('input', function() {
    setColor();
    outputG.value = g.value;
    }, false);

    b.addEventListener('change', function() {
    setColor();
    outputB.value = b.value;
    }, false);

    b.addEventListener('input', function() {
    setColor();
    outputB.value = b.value;
    }, false);
    But anyways a nice little program 🙂

  3. if I want to add reset button in this code whose functionality is to reset all the rgb value and bring back the range slicer to zero how can I do that?

LEAVE A REPLY

Please enter your comment!
Please enter your name here