Let's take the table from the example before again. We now want to filter the data using a slider. This slider is defined quite simply in HTML:
<input type="range" min="0" max="30" value="5" id="sizeSlider" style="width: 300px">
We access the slider quite easily:
let slider = document.getElementById("sizeSlider");
Then we define an event listener that is always called when the slider is changed. This is to change the text under the slider, save the selected value in a variable and update the table:
slider.oninput = function() {
d3.select("#range").text("0 cm - " + this.value + " cm")
sliderValue = this.value
updateTable();
}
The easiest way to update the table is to simply remove the entire body of the table and create a new one. We do this with the help of the ID "bodyt" and in the new created function updateTable():
function updateTable() {
d3.select("#bodyt").remove()
let line = table.append("tbody").attr("id", "bodyt")
...
In the end it is important to filter the passed data by it's size, what we can do in the data-function:
.data(data.filter(d => d.size <= sliderValue))