JSFiddle - React, Tailwind, and code Playground

HTML

<nav id='control'>
  <section id='a' class='knob'>
    <img src='x.png' />
  </section>
  <section id='b'>
    <div id='x'></div>
    <div id='c'>background</div>
  </section>
  <section id='d' class='knob'>
    <img src='x.png' />
  </section>
</nav>

CSS

nav#control {
  display: flex;
  flex-basis: 50px;
  align-items: center;
  justify-content: center;
  background: #FFF;
  padding: 5px;
  width: 100%
}
.knob {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  cursor: pointer
}
#b {
  position: relative;
  flex-grow: 1;
  background: #EFEFEF;
  margin: 0 10px;
  height: 30px
}
#x {
  position: absolute;
  background: #4C8EFA;
  width: 100%;
  height: 30px;
  border-radius: 1px;
  z-index: 2
}
#c {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 30px;
}

JavaScript

var x = document.querySelector('#x');
var initialPercent = 100;

document.getElementById("a").onclick = function() {
    initialPercent = Math.max(0, initialPercent - 1);
    x.style.width = initialPercent + "%";
};

document.getElementById("d").onclick = function() {
    initialPercent = Math.min(100, initialPercent + 1);
    x.style.width = initialPercent + "%";
};