How to show values under the slider?

I'm working on an information visualisation project and currently trying to add values to the slider. However, it didn't function so far. The slider itself works fine, but there seems no value under the slider in the webpage. I want to have dates such as 2021-12-15 under the slider, how can make this work? Here's the code that I'd worked on so far, thanks in advance!

<div class="slidecontainer">
    <input type="range" min="1" max="12" value="12" class="slider" id="mySlider">
</div>

<script>
    var slider = document.getElementById("mySlider");
    var output = document.getElementById("demo");
    output.innerHTML = slider.value; // Display the default slider value

    // Update the current slider value (each time you drag the slider handle)
    slider.oninput = function() {
        output.innerHTML = this.value;
    }
</script>

function slider_Update(binNumber) {
    new_date = formatTime(new Date("2008-"+binNumber+"-01"));
      let checked_group = ".";
      let count = 1;
      // For each checkbox:
    d3.selectAll(".checkbox").each(function(d){
        const cb = d3.select(this);
        const grp = cb.property("value");
        //console.log(cb.property("checked")+" "+cb.property("value"));
      // If the box is check, add to checked_group, else hide
      if(cb.property("checked")){
        if(count===1){
          checked_group += grp;
          count++;
          //console.log(checked_group+"  count: "+count);
        }else{
          checked_group += ",."+grp;
          //count++;
          //console.log(checked_group+"  count: "+count);
        }
      }
    })
    //change opacity for created group
    update_Worldmap(checked_group);
    update_BarPlot();
  }

  //Slider source
  //https://www.d3-graph-gallery.com/graph/density_slider.html
  // Listen to the slider
  d3.select("#mySlider").on("change", function(d){
    selectedValue = this.value
      slider_Update(selectedValue)
    //console.log("from mySldier select: "+selectedValue)
  })

You don't have an element with id demo in your HTML. You should do something like this:

var slider = document.getElementById("mySlider");
var output = document.getElementById("demo");
output.innerHTML = slider.value; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
  output.innerHTML = this.value;
};

<div class="slidecontainer">
  <input type="range" min="1" max="12" value="12" class="slider" id="mySlider" />
  <div id="demo"></div>
</div>