d3 v4 sliders

Slider1:Default slider
const slider1 = sliderFactory();
let slideholder1 = d3.select('#holder1').call(slider1);
Slider2: Adds a scale and sets .tick(30) so there are only two ticks
const slider2 = sliderFactory();
let slideholder2 = d3.select('#holder2').call(slider2.ticks(30).scale(true).range([0,30]) );
Slider3: Using the .step() parameter to increment the handle moves by to 0.1
let slideholder3 = d3.select('#holder3').call(slider3.ticks(1).scale(true).range([0,4]).step(0.1));
Slider4: Add labels and preset the value to 30
let slideholder4 = d3.select('#holder4').call(slider4.height(70).margin({top: 35, right: 15, bottom: 15, left: 15 }).value(30).ticks(10).scale(true).range([0,80]).step(1).label(true));
Slider5: Vertical slider
let slideholder5 = d3.select('#holder5').call(slider5.width(80).margin({top: 40, right: 15, bottom: 35, left: 15 }).height(300).scale(true).ticks(20).label(true).value(80).range([0,80]).orient("vertical").dragHandler(function(d) {test(d);}));

Calling functions and making responsive

Functions are managed using the .dragHandler() property, empty by default. The first time a slider is called it is drawn within an init function, after that each time the slider is called its geometry is handled by a reposition function.
Slider6: Calling functions
slider value
let slideholder6 = d3.select('#holder6').call(slider6.scale(true).step(1).dragHandler(function(d) {getValue(d);}));
function getValue(d) {
var parseNum = d3.format(".0f");
d3.select("#slideValue").text("Slider value "+parseNum(d.value())) }
Slider7: Responsive slider
To make a slider responsive craete a variable to hold the screnwidth and a function that is called each time the brwoser window is resized
let newWidth=document.getElementById('holder1').getBoundingClientRect().width;
window.addEventListener('resize', resize);
Update the screen within the function then call the slider passing the variable using the .width() parameter
function resize(){
newWidth=document.getElementById('holder1').getBoundingClientRect().width
slideholder7.call(slider7.width(newWidth));
slideholder8.call(slider8.width(newWidth))
}
Then create the slider
let slideholder7 = d3.select('#holder7').call(slider7.width(newWidth).scale(true).value(20).step(1));
Slider8: Responsive vertical slider
let slideholder5 = d3.select('#holder5').call(slider5.width(80).margin({top: 40, right: 15, bottom: 35, left: 15 }).height(300).scale(true).ticks(20).label(true).value(80).range([0,80]).orient("vertical").dragHandler(function(d) {test(d);}));