如何在滑块下显示值？

Question

我正在从事一个信息可视化项目，目前正在尝试向滑块添加值。但是，到目前为止它还没有发挥作用。滑块本身工作正常，但网页中的滑块下似乎没有任何价值。我想在滑块下显示诸如 2021-12-15 之类的日期，如何实现？这是我到目前为止使用的代码，在此先感谢！

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

Answer 1

您的 HTML 中没有 ID 为 demo 的元素。你应该这样做：

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>

Answer 2

我们如何创建新元素并将 new_date 输出到该元素

<div class="slidecontainer">
    <input type="range" min="1" max="12" value="12" class="slider" 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>

Answer 3

如果你只需要输出滑块的值，你可以像这样添加一个div：

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

对于日期部分，您能否提供有关滑块需要做什么的更多信息？它必须改变整个日期？只有几个月？谢谢

如何在滑块下显示值？

How to show values under the slider?

javascript

html

css

slider

information-visualization