d3.js Slider: how to get value?

Question

I've been having trouble figuring this problem out from the examples I've seen. I have a d3 slider with a range of years. I'm trying to get it to console something along the lines of this.value(), or whatever its current value is.

However, I can't seem to get it to even console.log that the slider is working. How to get it to read the current value?

var timeSlider =  d3.select('#slider7').call(d3.slider().axis(true).min(1970).max(2000).step(1));
timeSlider.on("slide", function(evt, value) {
    console.log("slider is working!")
})

Answer 1

I'm assuming you're using the D3-Slider implemented by MasterMaps. If you are, my understanding is that d3.select('#documentID').call(d3.slider()) returns the HTML block that displays the slider along with all the necessary styling. However, the slider's HTML block does not include event handlers.

What you might need is something like this:

var timeSlider =  d3.select('#slider7').call(d3.slider().axis(true).min(1970).max(2000).step(1));
timeSlider.call(d3.slider().on("slide", function(evt, value) {
  // `value` is the percentage travelled on the slider
  // Selected year will therefore be value * (max - min) + min
  var year = value/100 * (2000-1970) + 1970;
  console.log("The slider's current value is:" + year);
}));