I'm trying to create a step slider in d3 (v5) with the years 2000 through 2021. (Using plugin d3-simple-slider)
const slider =
sliderBottom()
.min(new Date(2000, 1, 1))
.max(new Date(2020, 1, 1))
.tickFormat(d3.timeFormat('%Y'))
.tickValues(ar)
.default(new Date(2000, 10, 3))
.width(rectWidth - margin.right - 65)
.height(75)
.on("onchange", (value) => {
year = d3.timeFormat('%Y')(value);
})
const g = d3
.select("#slider")
.append('svg')
.attr('width', rectWidth - margin.right - 65)
.attr('height', 75)
.append('g')
.attr('transform', 'translate(20,20)')
The slider that is displayed however seems to enable the area in between the "steps" and the year also seems to move along.
1) Is there a way to have only the exact points at the steps enabled?
2) How to make the slider responsive ?
Thanks in advance!
What I have tried:
Tried adding
.step(1000 * 60 * 60 * 24 * 365)