JSFiddle - React, Tailwind, and code Playground

by Евгений Дзюба

HTML

<div class="segment-wrapper">
  <div class="segment__container segment__first">
     <input class="segment__input" type="range" min="1" max="100" value="0">
  </div>
<div class="segment__second-third-container">
   <div class="segment__container segment__second">
       <input class="segment__input" type="range" min="1" max="100" value="0">
   </div>
  
  <div class="segment__container segment__third">
    <input class="segment__input" type="range" min="1" max="100" value="0">
  </div>
</div>
  
  <div class="segment__container segment__fourth">
     <input class="segment__input" type="range" min="1" max="100" value="0">
  </div>
  
  <div class="segment__fifth-sixth-container">
    <div class="segment__container segment__fifth">
       <input class="segment__input" type="range" min="1" max="100" value="0">
    </div>
    <div class="segment__container segment__sixth">
        <input class="segment__input" type="range" min="1" max="100" value="0">
    </div>
  </div>
  <div class="segment__container segment__seventh">
    <input class="segment__input" type="range" min="1" max="100" value="0">
  </div>
</div>

CSS

.segment__containe{
    position:relative;
}
.segment__first, .segment__fourth, .segment__seventh{
  margin:20px;
  height:30px;
  text-align:center;
}

.segment__fourth, .segment__seventh{
  margin-top:80px;
}

.segment__first .segment__input, .segment__fourth .segment__input, .segment__seventh .segment__input{
  width:75%;
}

.segment__second-third-container,.segment__fifth-sixth-container{
  position:relative;
  display: inline-block;
  height:90px;
  width:100%;
  text-align:center;  
}

.segment__second, .segment__third, .segment__fifth, .segment__sixth{
  transform: rotate(90deg);
  position: absolute;
  top:50%;
}

.segment__second .segment__input, .segment__third .segment__input,.segment__fifth .segment__input, .segment__sixth .segment__input {
  width:120%;
}

.segment__second, .segment__fifth{
  left:3%;
}

.segment__third, .segment__sixth{
  right:3%;
}

.margin-element{
  margin: 5% 5%;
  position:absolute;
}




input[type=range] {
  height: 28px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 20px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000;
  background: #E6E6E6;
  border-radius: 5px;
  border: 1px solid #000000;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 0px;
  background: #1D917A;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -1px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #E6E6E6;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 20px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 1px 1px 1px #000000;
  background: #E6E6E6;
  border-radius: 5px;
  border: 1px solid #000000;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 1px 1px 1px #000000;
  border: 1px solid #000000;
  height: 20px;
  width: 20px;
 ...