Year slider displays area in between steps

[Abhi-ak]

I'm trying to create a year step slider in d3 (v5) with the years 2000 through 2021.
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 ?

@johnwalley

[Abhi-ak]

Can anyone help me out here?

[johnwalley]

Hi @Abhi-ak. Sorry for not getting back to you sooner. You could try to use the marks method which will restrict the values the slider is allowed to snap to.

Making SVGs responsive is a big topic. For this library you can see an example of dynamically changing the width at

d3-simple-slider/stories/extended-functionality.stories.js

Line 41 in f6479de

export const Transition = () => {

.

[Abhi-ak]

Hi @johnwalley. Tried giving marks but now the issue is that I cannot select odd years.

Marks: [2000, 2002, 2004, 2006......2022]

[johnwalley]

Do you an example somewhere I can test, for example on Codepen? I can't test this at the moment but I just wanted to check that you've tried setting tickValues to [2000, 2002, 2004, ...] and marks to [2000, 2001, 2002, ...]?