JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<input id="range" type="range" value="0" min="0" max="360">

<div class="result"></div>

CSS

input{
      background-image: linear-gradient( to right, #F00, #FF0, #0F0, #0FF, #00F, #F0F, #F00 );
        -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: currentColor;
    background-origin: content-box;
    background-repeat: no-repeat;
    border-radius: 2rem;
    display: block;
    color: inherit;
    height: 24px;
    margin: 0 0 16px;
    margin: 0 0 1rem;
    padding: 0;
    width: 100%;
}

.result{
  margin: 50px auto;
  width: 100px;
  height: 100px;
  border-radius: 10px;
}

JavaScript

r=document.querySelector('#range');
res=document.querySelector('.result');
/* l=document.querySelector('.logo');
t=document.querySelector('.name.swatch.set-header-bg');
m=document.querySelector('.custom-visitor-bubble.swatch.set-visitor-bubble-bg');
b1=document.querySelector('#ca-start-chat');
b2=document.querySelector('#ca-start-chat1'); */


function handleSliderChange(){
	if(r.value === r.prevValue){
  	return;
  }
  
  r.prevValue = r.value;
  var color = 'hsl('+(r.value )+', 60%, 50%)';
  
  
	console.log(color);
	res.style.backgroundColor = color;
  
/*   
    l.style.backgroundColor = color;
    t.style.backgroundColor = color;
  m.style.backgroundColor = color;
  b1.style.backgroundColor = color;
  b2.style.backgroundColor = color; */
}

r.onmousemove = handleSliderChange;
r.ontouchmove = handleSliderChange;