JSFiddle - React, Tailwind, and code Playground

by Victor

HTML

<div class="label"></div>
<div class="lhscale">
</div>

SCSS

.lhscale {
  background: orange;
  display: flex;
  max-width: 300px;
  border-radius: 10px;
  overflow: hidden;
  margin: 1rem;

  &__bar {
    background: red;
    width: auto;
    flex: 1;
    height: 50px;
    /* box-shadow: inset 0 0 4px orange; */
    opacity: 0.5;
    
    &:hover {
      opacity: 1;
      background-color: blue !important;
    }
    
  }
}

JavaScript

const wrap = document.querySelector('.lhscale');
const count = 20;
const scale = 255 / count;
var current = 0;

for (var i = 0; i < count; i++) {

var thisElm = document.createElement('div');
thisElm.classList.add('lhscale__bar');
thisElm.dataset.iteration = i + 1;
thisElm.style.backgroundColor = "rgba("+ (scale * i) + ","  + (scale * i) + ","  + (scale * i) + ","  +"1)";
thisElm.style.backgroundColor = "rgba("+ (scale * i) + ",0,0,1)";
thisElm.addEventListener('click', function(){
current = this.dataset.iteration;
console.log(current);
$('.label').text(current);
})
 $('.lhscale').append(thisElm);
/* console.log(thisElm) */;

}