# Inline input with variable referenced in same cell

**URL:** <https://talk.observablehq.com/t/inline-input-with-variable-referenced-in-same-cell/2367>\
**Category:** Help\
**Created:** [September 10, 2019, 10:23pm UTC](https://talk.observablehq.com/t/inline-input-with-variable-referenced-in-same-cell/2367 "2019-09-10T22:23:42Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nolanbjohnson](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/nolanbjohnson/32/2150_2.png) [@nolanbjohnson](https://talk.observablehq.com/u/nolanbjohnson)\
**Post date:** [September 10, 2019, 10:23pm UTC](https://talk.observablehq.com/t/inline-input-with-variable-referenced-in-same-cell/2367/1 "2019-09-10T22:23:42Z")

</div>

I was trying to use this inline input solution [https://observablehq.com/@mbostock/inline-inputs](https://observablehq.com/@mbostock/inline-inputs) which works great with one exception. I was trying to both bind the inline input and reference the viewof variable within the same cell. However, this makes the range slider stick. It seems to unfocus as soon as it makes a single step move.

Is this a limitation of the approach or Observable? I’d like understand what’s happening. Thank you, Observable Community!

This is a fork of @mbostock/inline-inputs to illustrate the issue:

> **[Inline Inputs](https://observablehq.com/d/cc5b42705551e9b3)**
>
> An Observable notebook by Nolan Johnson.

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/1/177bbad74fe328232afd964f4aa4f105acb9e529.png)

[https://recordit.co/YdHEjKfwnW](https://recordit.co/YdHEjKfwnW)

---

<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:** [September 10, 2019, 10:46pm UTC](https://talk.observablehq.com/t/inline-input-with-variable-referenced-in-same-cell/2367/2 "2019-09-10T22:46:02Z")

</div>

Welcome! Here’s what’s happening in your notebook: when you drag the slider, the value of `apples` changes, which forces all of its dependencies to re-render, including that markdown cell. So in fact, the range slider you were dragging is deleted and then recreated, explaining the loss of focus.

Here’s a fork that removes the `apples` dependency by replacing `apples` with a text element that has been bound to `viewof apples`:

> **[Comparing ‘Inline Inputs’ by Nolan Johnson to ‘Inline Inputs’ by Bryan Gin-ge...](https://observablehq.com/compare/cc5b42705551e9b3@163...066b7dc04c1a5570@168)**
>
> A comparison of two Observable notebooks.

---

<div class="post-metadata">

**Author:** ![mbostock](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mbostock/32/9_2.png) [@mbostock](https://talk.observablehq.com/u/mbostock)\
**Post date:** [September 10, 2019, 11:14pm UTC](https://talk.observablehq.com/t/inline-input-with-variable-referenced-in-same-cell/2367/3 "2019-09-10T23:14:31Z")

</div>

In addition to @bgchen’s solution, you can say:

```auto
bind(html`<output>`, viewof apples)

```

But yes, when using inline inputs (and outputs!) like this, you need to opt-out of Observable’s default reactivity, or else it will re-evaluate the cell and re-create the input, breaking interaction.

---

<div class="post-metadata">

**Author:** ![nolanbjohnson](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/nolanbjohnson/32/2150_2.png) [@nolanbjohnson](https://talk.observablehq.com/u/nolanbjohnson)\
**Post date:** [September 11, 2019, 12:25am UTC](https://talk.observablehq.com/t/inline-input-with-variable-referenced-in-same-cell/2367/4 "2019-09-11T00:25:49Z")

</div>

Amazing! Thank you both for the quick reply. That’s an easy fix!