JSFiddle - React, Tailwind, and code Playground

by camindo

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>
<body>
    <div class="maincontainer">
        <div class="slider">
            <input type="range" min="0" max="255" value="50" id="r" >
            <!-- <p id="rangeValue">100</p> -->
            
        </div>
        <div class="slider">
            <input type="range" min="0" max="255" value="50" id="g" >
            <!-- <p id="rangeValue">100</p> -->
            
        </div>
        <div class="slider">
            <input type="range" min="0" max="255" value="50" id="b">
            <!-- <p id="rangeValue">100</p> -->
            
        </div>
        <div class="valuee" id="rangeValue">100</div>
    </div>
</body>
</html>

CSS

body{
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.maincontainer{
    width: 50%;
    height: 50%;
    border-radius: 20px;
    background: hsla(22, 100%, 78%, 1);
    background: linear-gradient(90deg, hsla(22, 100%, 78%, 1) 0%, hsla(19, 95%, 76%, 1) 13%, hsla(17, 94%, 75%, 1) 32%, hsla(2, 78%, 62%, 1) 100%);
    background: -moz-linear-gradient(90deg, hsla(22, 100%, 78%, 1) 0%, hsla(19, 95%, 76%, 1) 13%, hsla(17, 94%, 75%, 1) 32%, hsla(2, 78%, 62%, 1) 100%);
    background: -webkit-linear-gradient(90deg, hsla(22, 100%, 78%, 1) 0%, hsla(19, 95%, 76%, 1) 13%, hsla(17, 94%, 75%, 1) 32%, hsla(2, 78%, 62%, 1) 100%);
    
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    

}
.slider{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;

    width: 70%;
    height: 50px;
    background: white;

}
.slider input{
    width: 90%;
}
.valuee{
    position: absolute;
    width: 200px;
    height: 200px;
    top: 40px;
    left: 50px;
    /* background-color: rgba(43, 46, 43,0.5); */
    border: 2px solid black;
    border-radius: 10px;

    display: flex;
    justify-content: center;
    align-items: center;
}

JavaScript

var redslider = document.getElementById('r')
var greenslider = document.getElementById('g')
var blueslider = document.getElementById('b')

//the above will take slider and have them as variables
const changebg = document.getElementById('rangeValue')

var red = ''
var green =''
var blue = ''



redslider.addEventListener('input',(e)=>{
    console.log(`the value of red is ${redslider.value}`)
    redslider.value = red
    
})
greenslider.addEventListener('input',(e)=>{
    console.log(`the value of green is ${greenslider.value}`)
    greenslider.value = green
})
blueslider.addEventListener('input',(e)=>{
    console.log(`the value of blue is ${blueslider.value}`)
    blueslider.value = blue
})

changebg.style.backgroundColor = `rgb(${red}, ${green}, ${blue})`;