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>how about we create new element and output new_date to that element
<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>
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 class="slidecontainer">
<input type="range" min="1" max="12" value="12" class="slider" 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