Irregular slider in D3

Question

I'm trying to build a slider in D3. I found a library for this https://github.com/johnwalley/d3-simple-slider which is perfect for the regular slider.

However, I need to slide by steps among irregularly spaced dates: [2002,2005,2012,2029] for example.

Do I need to build the slider by myself? Or do you know any other way?

Thank you,

Answer 1

The plugin you have chosen can work. See the example below. You need to add some customization.

 <script src="https://d3js.org/d3.v5.js"></script> <script src="https://unpkg.com/d3-simple-slider"></script> <p id="value"></p> <div id="slider"></div> <script> var data = [2002,2005,2012,2029]; var slider = d3.sliderHorizontal().min(d3.min(data)).max(d3.max(data)).width(500).displayValue(false).on('onchange', val => { d3.select('#value').text(val); }); slider.tickValues(data).marks(data); d3.select('#slider').append('svg').attr('width', 600).attr('height', 100).append('g').attr('transform', 'translate(30,30)').call(slider); </script>