JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title>Pinion Gear</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>
  <div class="container">
    <div class="row">
      <div class="col-md-2">
        <div class="slidecontainer ">
          <input type="range" min="0" max="5" value="0" class="impSlider" id="impRange">
          <p>Importance: <span id="impOutput"></span></p>
        </div>
      </div>
      <div class="col-md-6">
        <div class="background">
         <svg width="220" height="220" viewBox="0 0 220 220" fill="none" xmlns="http://www.w3.org/2000/svg">
<path id="I5" d="M131.09 10L152.752 17.2953L148.108 57.9389C148.108 57.9389 137.487 51.3471 130.066 48.8479C122.645 46.3486 110.2 45.1722 110.2 45.1722L131.09 10Z" stroke="#454545" staroke-width="3.65"/>
<path id="S5" d="M67.2656 17.2926L88.9282 10L109.814 45.1748C109.814 45.1748 97.3685 46.3497 89.9473 48.848C82.5262 51.3463 71.9041 57.9369 71.9041 57.9369L67.2656 17.2926Z" stroke="#454545" stroke-width="3.65"/>
<path id="S4" d="M22.4805 58.7136L35.9529 40.249L73.3182 56.9014C73.3182 56.9014 63.8371 65.0483 59.2218 71.3739C54.6064 77.6995 49.7415 89.2145 49.7415 89.2145L22.4805 58.7136Z" stroke="#454545" stroke-width="3.65"/>
<path id="I4" d="M184.592 40.8447L197.917 59.4165L170.413 89.6985C170.413 89.6985 165.64 78.1449 161.075 71.7826C156.511 65.4203 147.095 57.1978 147.095 57.1978L184.592 40.8447Z" stroke="#454545" stroke-width="3.65"/>
<path id="S3" d="M10 119.851V96.9943L50 88.4229C50 88.4229 47.1429 100.592 47.1429 108.422C47.1429 116.253 50 128.422 50 128.422L10 119.851Z" stroke="#454545" stroke-width="3.65"/>
<path id="I3" d="M210 119.851V96.9943L170 88.4229C170 88.4229 172.857 100.592 172.857 108.422C172.857 116.253 170 128.422 170 128.422L210 119.851Z" stroke="#454545" stroke-width="3.65"/>
<path id="I2" d="M184.045 176.593L197.518 158.128L170.257...

CSS

body {
      padding: 0;
    }

    

    .gear {
      width: 400px;
      height: 400px;
      padding: 10px 0 0 10px;
    }

    .dia {
      fill: rgba(171,25,200, .86);
    }

    .imp::-webkit-slider-thumb {
      background: red;
    }

    .sup::-webkit-slider-thumb {
      background: blue;
    }

    .slidecontainer {
      width: 20%;
      padding-top: 0;
    }

    .impSlider {
      -webkit-appearance: none;
      width: 100%;
      height: 25px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }

      .impSlider:hover {
        opacity: 1;
      }

      .impSlider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 25px;
        height: 25px;
        cursor: pointer;
        background: red;
      }

    .supSlider {
      -webkit-appearance: none;
      width: 100%;
      height: 25px;
      background: #d3d3d3;
      outline: none;
      opacity: 0.7;
      -webkit-transition: .2s;
      transition: opacity .2s;
    }

      .supSlider:hover {
        opacity: 1;
      }

      .supSlider::-webkit-slider-thumb {
        -webkit-appearance: none;
        width: 25px;
        height: 25px;
        cursor: pointer;
        background: blue;
      }

    .impSlider[type="range"] {
      transform: rotate(270deg);
      position: absolute;
      top: 200%;
      width: 200px;
      height: 20px;
    }

    .supSlider[type="range"] {
      width: 200px;
      height: 20px;
    }

JavaScript

var scoreInt = 0;
    var score = document.getElementById("score");
    var impSlider = document.getElementById("impRange");
    var impOutput = document.getElementById("impOutput");
    impSlider.oninput = function () {
      impOutput.innerHTML = this.value;
      scoreInt = parseInt(impOutput.innerHTML) * parseInt(supOutput.innerHTML);
      score.innerHTML = scoreInt.toString();
      switch (this.value) {
        case "0":
          document.getElementById("I1").style.fill = "none";
          document.getElementById("I2").style.fill = "none";
          document.getElementById("I3").style.fill = "none";
          document.getElementById("I4").style.fill = "none";
          document.getElementById("I5").style.fill = "none";
          break;
        case "1":
          document.getElementById("I1").style.fill = "red";
          document.getElementById("I2").style.fill = "none";
          document.getElementById("I3").style.fill = "none";
          document.getElementById("I4").style.fill = "none";
          document.getElementById("I5").style.fill = "none";
          break;
        case "2":
          document.getElementById("I1").style.fill = "red";
          document.getElementById("I2").style.fill = "red";
          document.getElementById("I3").style.fill = "none";
          document.getElementById("I4").style.fill = "none";
          document.getElementById("I5").style.fill = "none";
          break;
        case "3":
          document.getElementById("I1").style.fill = "red";
          document.getElementById("I2").style.fill = "red";
          document.getElementById("I3").style.fill = "red";
          document.getElementById("I4").style.fill = "none";
          document.getElementById("I5").style.fill = "none";
          break;
        case "4":
          document.getElementById("I1").style.fill = "red";
          document.getElementById("I2").style.fill = "red";
          document.getElementById("I3").style.fill = "red";
         ...