# SyntaxError: Unexpected token

**URL:** <https://talk.observablehq.com/t/syntaxerror-unexpected-token/8211>\
**Category:** Help\
**Created:** [August 22, 2023, 8:52am UTC](https://talk.observablehq.com/t/syntaxerror-unexpected-token/8211 "2023-08-22T08:52:22Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nico-dsq](https://avatars.discourse-cdn.com/v4/letter/n/ba8739/32.png) [@nico-dsq](https://talk.observablehq.com/u/nico-dsq)\
**Post date:** [August 22, 2023, 8:52am UTC](https://talk.observablehq.com/t/syntaxerror-unexpected-token/8211/1 "2023-08-22T08:52:22Z")

</div>

I’m trying to create an area plot linked to a slider that reveals more of the area under the curve as the slider is moved from 0 to 1. When I use this code snippet:

const slider = document.getElementById(‘slider’);

I get a SyntaxError: Unexpected token with the problem being const (squiggly red line underneath).

How do I fix this? Are there libraries I need to import first? (I’m more familiar with Python, so please forgive me for possibly using the wrong phrases)

---

<div class="post-metadata">

**Author:** ![Fil](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/fil/32/207_2.png) [@Fil](https://talk.observablehq.com/u/Fil)\
**Post date:** [August 22, 2023, 9:44am UTC](https://talk.observablehq.com/t/syntaxerror-unexpected-token/8211/2 "2023-08-22T09:44:46Z")

</div>

Named cells in Observable are not vanilla JavaScript: you would simply write

`slider = document.getElementById(‘slider’)`

see [Observable JavaScript / Observable | Observable](https://observablehq.com/@observablehq/observable-javascript).

However what we recommend on Observable is to avoid document.getElementById, and name your slider directly when you create it. For example:

`slider = Inputs.range([0, 100], {label: "my value"})`

Even better, since the slider is a UI widget for a certain value, you can use the viewof operator:

`viewof parameter = Inputs.range([0, 100], {label: "adjust this parameter"})`

and in another cell:

`parameter` // this cell shows 50

You can then use this parameter in another computation, for example to create a chart:

`chart = Plot.rectY(penguins, Plot.binX({y: "count", thresholds: parameter}, {x: “body_mass_g"})).plot()`

See [Input + Chart / Observable | Observable](https://observablehq.com/@observablehq/input-chart)

---

<div class="post-metadata">

**Author:** ![nico-dsq](https://avatars.discourse-cdn.com/v4/letter/n/ba8739/32.png) [@nico-dsq](https://talk.observablehq.com/u/nico-dsq)\
**Post date:** [August 22, 2023, 9:58am UTC](https://talk.observablehq.com/t/syntaxerror-unexpected-token/8211/3 "2023-08-22T09:58:07Z")

</div>

Thank you very much.