D3 year slider displays area in between steps

See more:

Javascript

rendering

d3js

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)