JSFiddle - React, Tailwind, and code Playground

by alexb

HTML

<div class="chart">

  <div class="dim dim-1" style="--size: 100%">
    <div class="label label-bg">
      <div class="segment">Mens</div>
      <div class="pc">65%</div>
    </div>
    <div class="bar">
      <div class="label label-fg">
        <div class="segment">Mens</div>
        <div class="pc">65%</div>
      </div>
    </div>
  </div>
  
  <div class="dim dim-2" style="--size: 28.8%">
    <div class="label label-bg">
      <div class="segment">Womens</div>
      <div class="pc">35%</div>
    </div>
    <div class="bar">
      <div class="label label-fg">
        <div class="segment">Womens</div>
        <div class="pc">35%</div>
      </div>
    </div>
  </div>
  
</div>

<input type="range" min="0" max="1" step="0.01" value="0.71">

CSS

body {
  font: 100% sans-serif;
  margin: 2em auto;
  max-width: 320px;
}

.chart {
  display: flex;
  height: 150px;
}

[type=range] {
  margin-top: 8em;
  width: 100%;
}

.dim {
  flex: 1;
  position: relative;
  text-transform: uppercase;
}

.bar {
  border-radius: 6px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 8px;
  right: 8px;
  height: var(--size);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.label {
  font-size: 1.5rem;
  text-align: center;
  width: 100%;
  padding-bottom: 8px;
}

.label-bg {
  position: absolute;
  bottom: 0;
  user-select: none;
}

.label-bg .pc {
  color: rgba(0, 0, 0, 0.3);
}

.label-fg .pc {
  color: rgba(255, 255, 255, 0.65);
}

.dim-1 .label-bg {
  color: #1e22aa;
}

.dim-1 .bar {
  background: #1e22aa;
  color: #fff;
}

.dim-2 .label-bg {
  color: #00b5e2;
}

.dim-2 .bar {
  background: #00b5e2;
  color: #fff;
}

JavaScript

const setSize = selector => ratio => {
  const el = document.querySelector(selector);
  const pc = ratio * 100;
	el.style.setProperty('--size', `${pc}%`);
  el.querySelectorAll('.pc').forEach(x => x.innerText = `${pc.toFixed(0)}%`);
}

const range = document.querySelector('[type=range]');
const update = () => {
  setSize('.dim-1')(range.value);
  setSize('.dim-2')(1 - range.value);
};
range.addEventListener('input', update);
update();