How to add value indicating slider to my bar in HTML

I am trying to create a webpage where I show the value obtained (from an external link) on progress bar using some sort of slider/indicator. But since I am new to web development I have no idea how to do that can anyone help me out with this? I need to add a slider to my progress bar so that it automatically sets itself on the bar according to value obtained. Thank you Here is the progress I made so far:

var staticURL = "some link"
var table = document.getElementById('pollution')
var head2 = document.getElementById('aqi')
var head2s = document.getElementById('stname')
var prompolutant = document.getElementById('pp')
var healthimpact = document.getElementById('hi')
$.getJSON(staticURL, function(data) {
  console.log("Inside")
  var dat = data.data
  console.log(data)
  var aqi = data.aqi
  console.log(aqi)
  var h2 = data.aqi
  var h2s = data.stnname
  var prompl = data.prompol
  var heli = ''
  console.log(prompl)
  head2.innerHTML += h2
  head2s.innerHTML += h2s
  prompolutant.innerHTML += prompl
  if (aqi <= 50) {
    heli = 'Minimal Impact'
    healthimpact.innerHTML += heli
  } else if (aqi > 50 && aqi <= 100) {
    heli = 'Minimal breathing discomfort to sensitive people'
    healthimpact.innerHTML += heli
  } else if (aqi > 100 && aqi <= 200) {
    heli = 'Breathing discomfort to people with lung, heart diseases, children and older adults'
    healthimpact.innerHTML += heli
  } else if (aqi > 200 && aqi <= 300) {
    heli = 'Breathing discomfort to people on prolonged exposure'
    healthimpact.innerHTML += heli
  } else if (aqi > 300 && aqi <= 400) {
    heli = 'Respiratory illness to the people on prolonged exposure'
    healthimpact.innerHTML += heli
  } else {
    heli = 'Respiratory effects on healthy people'
    healthimpact.innerHTML += heli;
  }
  for (i in dat) {
    var useful_data = dat[i]
    // console.log(useful_data)
    // console.log(useful_data.pollutant)
    var row = `<tr>
                                    <td style="text-align: left">${useful_data.pollutant}</td>
                                    <td style="text-align: right">${useful_data.minval}</td>
                                    <td style="text-align: right">${useful_data.maxval}</td>
                                    <td style="text-align: right">${useful_data.avgval}</td>
                                </tr>`
    table.innerHTML += row
  }
});
h2 {
  text-align: center;
}

body {
  background-color: black;
  font: white;
  align-content: center;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

table {
  width: 50%;
  align-self: center;
  padding-top: 10px;
}

th {
  background: #7a7777;
  font-weight: bold;
  padding: 6px;
  color: white;
}

td {
  background: rgb(10, 10, 10);
  padding: 6px;
  color: white;
  text-align: center;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.bar {
  width: 100%;
  height: 30px;
  border-radius: 10px;
  background-color: #b3b3b3;
  color: white;
  text-align: center;
  vertical-align: middle;
}

.good {
  width: 10%;
  height: 100%;
  background-color: rgb(3, 77, 3);
  float: left;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.satisfactory {
  width: 10%;
  height: 100%;
  background-color: rgb(60, 255, 0);
  float: left;
}

.moderate {
  width: 20%;
  height: 100%;
  background-color: yellow;
  float: left;
}

.poor {
  width: 20%;
  height: 100%;
  background-color: orange;
  float: left;
}

.verypoor {
  width: 20%;
  height: 100%;
  background-color: red;
  float: left;
}

.severe {
  width: 20%;
  height: 100%;
  background-color: darkred;
  float: right;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>JSON Test</title>
</head>

<body>
  <div id="myData"></div>
  <h2 id="aqi" style="color: white;">AQI: </h2>
  <h2 id="stname" style="color: white;"></h2>
  <div class="bar" style="justify-content: center; margin-left: 10px; margin-right: 10px;">
    <div class="good">
    </div>
    <div class="satisfactory">
    </div>
    <div class="moderate">
    </div>
    <div class="poor">
    </div>
    <div class="verypoor">
    </div>
    <div class="severe">
    </div>
    <div class="progress-line" style="width: 2px; height: 30px; background-color: black; position: absolute; margin-top: 45px; left: 60;"></div>
  </div>
  <div class="value" style="color: white; margin-left: 10px; margin-right: 10px;">
    <div style="width: 10%; float: left;">
      <p>1</p>
    </div>
    <div style="width: 10%; float: left;">
      <p>50</p>
    </div>
    <div style="width: 20%; float: left;">
      <p>100</p>
    </div>
    <div style="width: 20%; float: left;">
      <p>200</p>
    </div>
    <div style="width: 20%; float: left;">
      <p>300</p>
    </div>
    <div style="width: 20%; float: left;">
      <p>400</p>
    </div>
    <div style="width: 0%; float: right;">
      <p>500</p>
    </div>
  </div>

  <br>
  <br>
  <div class="card" id="health" style="margin-left: 10px; margin-right: 10px; height: 50px; margin-top: 10px; color:whitesmoke; background-color: rgba(17, 15, 15, 0.616);; padding-bottom: 10px; align-items: center;">
    <div class="card-header" style="background-color: rgba(17, 15, 15, 0.616); text-align: center; height: 20px;">
      <h3 style="color: white; background-color: rgba(17, 15, 15, 0.616);">Health Impact</h3>
    </div>
    <div class="card-body" style="background-color: rgba(27, 26, 26, 0.527); text-align: center; margin-bottom: 50px;">
      <p class="card-text" id="hi" style="padding-bottom: 10px; background-color: rgba(17, 15, 15, 0.616);"></p>
    </div>
  </div>
  <br>
  <div class="card" id="prompol" style=" border-color: white; margin-left: 10px; margin-right: 10px; height: 50px; margin-top: 0px; color:whitesmoke; padding-bottom: 10px; background-color: rgba(17, 15, 15, 0.616);">
    <div class="card-header" style="background-color: rgba(17, 15, 15, 0.616); text-align: center;">
      <h3 style="color: white; background-color: rgba(17, 15, 15, 0.616);">Prominent Pollutant</h3>
    </div>
    <div class="card-body" style="background-color: rgba(27, 26, 26, 0.527); text-align: center;">
      <p class="card-text" style="padding-bottom: 10px; background-color: rgba(17, 15, 15, 0.616);" id="pp"></p>
    </div>
  </div>
  <table id="myTable" class="table table-stripped center" style="align-content: center;">
    <tr>
      <th>Pollutant</th>
      <th>Minimum Value</th>
      <th>Maximum Value</th>
      <th>Avg Value</th>
    </tr>
    <tbody id="pollution">

    </tbody>
  </table>

Answer

you can reference css position

below is a simple example

 //create a div element in your bar 
 <div class="bar">
    <div id="flag">

    </div>
 </div>

 //set flag style
 <style>
 #flag{
    width: 30px;
    height: 30px;
    position: absolute;
    z-index: 2;
    background-color: white;
    left:20px; /*decide flag in where*/
 }
 .bar {
    position: relative; /*add relative*/
    .......
 }
 </style>

so now you can use left decide the flag in where,change the value of left with js DOM operation

<script>
    let flag = document.getElementById("flag")
    flag.setAttribute("style", `left: ${value}`);
</script>