d3-simple-slider not responding

[braddv]

Hello, I am trying to get d3-simple-slider working in Observable, and am unable to get the slider to move.

You can see my attempt here: https://observablehq.com/@bradvoracek/d3-simple-slider

Worst case for my project I will use slider from @jashkenas/inputs, but I like the flexibility of d3-simple-slider.

I am very new to web development/js/d3/Observable, so I do not know if this is an issue that is worth pursuing. Thank you for your time.

If it helps, this is the error I receive when attempting to drag the slider:

[bgchen]

See this thread:

finishing touches on a range slider | d3-simple-slider

All you need to do is to alias d3-selection to d3: d3 = require.alias({'d3-selection': 'd3'})('d3@5', 'd3-simple-slider@1.4.1') and then access the slider via d3.sliderBottom. With the aliased require d3-simple-slider will be fed the d3 module instead of d3-selection.

I’ll send a “suggestion” to your notebook with this fix shortly.

[mbostock]

Here’s my take:

Hello, d3-simple-slider

The changes I made:

• The slider needs to dispatch an input event when its value changes (to be compatible with an Observable view).
• The slider needs to expose a value property with its current value (to be compatible with an Observable view).
• The require.alias needs to list all of d3-simple-slider’s dependencies (so that duplicate copies don’t get loaded).

[braddv]

Thank you!