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

**URL:** <https://talk.observablehq.com/t/finishing-touches-on-a-range-slider-d3-simple-slider/1584>\
**Category:** Help\
**Created:** [January 17, 2019, 9:00pm UTC](https://talk.observablehq.com/t/finishing-touches-on-a-range-slider-d3-simple-slider/1584 "2019-01-17T21:00:17Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [January 17, 2019, 9:00pm UTC](https://talk.observablehq.com/t/finishing-touches-on-a-range-slider-d3-simple-slider/1584/1 "2019-01-17T21:00:17Z")

</div>

Searching for a range slider (not available at Jeremy’s [input bazare](https://beta.observablehq.com/@jashkenas/inputs)) , I came across [d3-simple-slider](https://www.npmjs.com/package/d3-simple-slider), which I almost have working:

> **[D3 simple slider / Observable](https://beta.observablehq.com/d/a0fcf2ebe7e66dd2)**
>
> A better way to code.

The problem seems to be that the demo examples, as [hosted on bl.ocks](https://bl.ocks.org/johnwalley/e1d256b81e51da68f7feb632a53c3518) refers to both the `d3-simple-slider` module and `d3` as `d3`. I give the module an explicit name (`d3_slider`) and it appears in my notebook, but it’s doesn’t work.

I tried linking `d3` and the `d3-simple-slider` module as follows, but this doesn’t seem to ‘link’ both d3 and the module under the name d3:

```auto
d3 = {
  const d3 = await require('d3@5');
  await require('d3-simple-slider@1.4.1/build/d3-simple-slider.js');
  return d3;
}

```

Any ideas on what’s missing?

Thanks for your insights!

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [January 17, 2019, 9:39pm UTC](https://talk.observablehq.com/t/finishing-touches-on-a-range-slider-d3-simple-slider/1584/2 "2019-01-17T21:39:46Z")

</div>

I haven’t tried to make your notebook work yet, but I think the solution to the require question is just to use multiple parameters in `require` (see the discussion [here](https://beta.observablehq.com/@tmcw/introduction-to-require)):

```auto
d3 = require('d3@5', 'd3-simple-slider@1.4.1/build/d3-simple-slider.js')

```

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [January 17, 2019, 9:42pm UTC](https://talk.observablehq.com/t/finishing-touches-on-a-range-slider-d3-simple-slider/1584/3 "2019-01-17T21:42:20Z")

</div>

Thanks Bryan! That method of requiring does get around the linking of d3 and the module. The notebook still doesn’t work with this fix though ☹ not sure why.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [January 17, 2019, 9:46pm UTC](https://talk.observablehq.com/t/finishing-touches-on-a-range-slider-d3-simple-slider/1584/4 "2019-01-17T21:46:35Z")

</div>

> [@aaronkyle](#):
>
> not sure why

Likely because d3-simple-slider accesses d3.event in a different scope than the one used by d3. As a result, when d3 sets d3.event, d3Selection.event inside the slider scope is still null.

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [January 17, 2019, 9:49pm UTC](https://talk.observablehq.com/t/finishing-touches-on-a-range-slider-d3-simple-slider/1584/5 "2019-01-17T21:49:35Z")

</div>

Woah, @mootari - Perfect answer, and yet I’ll one I’ll have to research before I can pretend to understand 😉 Still - THANK YOU! I’ll see what I can do to figure out what this means… and why the behavior would differ in Observable vs. the HTML examples.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [January 17, 2019, 9:57pm UTC](https://talk.observablehq.com/t/finishing-touches-on-a-range-slider-d3-simple-slider/1584/6 "2019-01-17T21:57:06Z")

</div>

> [@aaronkyle](#):
>
> I’ll see what I can do to figure out what this means

All you need to do is to alias `d3-selection` to `d3`:

```js
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`.

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [January 17, 2019, 9:59pm UTC](https://talk.observablehq.com/t/finishing-touches-on-a-range-slider-d3-simple-slider/1584/7 "2019-01-17T21:59:27Z")

</div>

> [@mootari](#):
>
> d3 = require.alias({‘d3-selection’: ‘d3’})(‘d3@5’, ‘d3-simple-slider@1.4.1’)

Awesome! Thank you both @mootari & @bgchen !

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [January 17, 2019, 10:08pm UTC](https://talk.observablehq.com/t/finishing-touches-on-a-range-slider-d3-simple-slider/1584/8 "2019-01-17T22:08:20Z")

</div>

You’re very welcome! And remember that the `require` function is actually [d3-require](https://github.com/d3/d3-require) (in case you want to look up the documentation).

As for debugging issues like these, my strategy usually involves opening the dev tools and enabling “Pause on exceptions”. This will give you the opportunity to inspect the scope in which the error occured, as well as the function calls leading up to the error.

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [January 17, 2019, 10:09pm UTC](https://talk.observablehq.com/t/finishing-touches-on-a-range-slider-d3-simple-slider/1584/9 "2019-01-17T22:09:06Z")

</div>

… Too funny, but now that this is working, I still have to get past the hurdle of figuring out how to pass the values to another cell 😓

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [January 17, 2019, 10:09pm UTC](https://talk.observablehq.com/t/finishing-touches-on-a-range-slider-d3-simple-slider/1584/10 "2019-01-17T22:09:50Z")

</div>

Nice tip!

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [January 17, 2019, 10:20pm UTC](https://talk.observablehq.com/t/finishing-touches-on-a-range-slider-d3-simple-slider/1584/11 "2019-01-17T22:20:45Z")

</div>

I’d try this pattern (untested, and assuming that sliderBottom() returns a d3 selection):

```auto
viewof slider = {
  const slider = d3.sliderBottom();
  const view = slider.node();
  slider.on('onchange', val => {
    view.value = val;
    slider.dispatch('input');
 });
  return view;
}

```

You’ll also want to think about what kind of API you want to offer. That is, what arguments your slider factory function should receive.

---

<div class="post-metadata">

**Author:** ![aaronkyle](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/aaronkyle/32/8106_2.png) [@aaronkyle](https://talk.observablehq.com/u/aaronkyle)\
**Post date:** [January 18, 2019, 11:37am UTC](https://talk.observablehq.com/t/finishing-touches-on-a-range-slider-d3-simple-slider/1584/12 "2019-01-18T11:37:44Z")

</div>

> [@mootari](#):
>
> viewof slider = { const slider = d3.sliderBottom(); const view = slider.node(); slider.on(‘onchange’, val =\> { view.value = val; slider.dispatch(‘input’); }); return view; }

Thanks for the lead! I’ll play around and see what I can manage.