How to show values under the slider?-CodePudding

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 >
    <input type="range" min="1" max="12" value="12"  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)
  })

CodePudding user response：

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 >
  <input type="range" min="1" max="12" value="12"  id="mySlider" />
  <div id="demo"></div>
</div>

CodePudding user response：

how about we create new element and output new_date to that element

<div >
    <input type="range" min="1" max="12" value="12"  id="mySlider">
    <div id="slideDate"></div>
</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;
    }


function slider_Update(binNumber) {
    var 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();
    $("#mySlider").html(new_date)
  }

  //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)
  })
</script>

CodePudding user response：

If you just need to output the value of the slider you can add a div like this:

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

console.log(output);

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

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)
  })

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

For the date part can you provide more information about what the slider needs to do? It has to change the whole date? Only the months? Thank you