Estoy trabajando en un proyecto de visualización de información y actualmente intento agregar valores al control deslizante. Sin embargo, no funcionó hasta ahora. El control deslizante en sí funciona bien, pero parece que no tiene valor debajo del control deslizante en la página web. Quiero tener fechas como 2021-12-15 debajo del control deslizante, ¿cómo puedo hacer que esto funcione? Aquí está el código en el que he trabajado hasta ahora, ¡gracias de antemano!
<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) })No tiene un elemento con id de demo en su HTML. Deberías hacer algo como esto:
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>¿Qué tal si creamos un nuevo elemento y enviamos new_date a ese elemento?
<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>Si solo necesita generar el valor del control deslizante, puede agregar un div como este:
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>Para la parte de la fecha, ¿puede proporcionar más información sobre lo que debe hacer el control deslizante? Tiene que cambiar toda la fecha? Solo los meses? Gracias