# Circle marker on a line plot linked to a slider **URL:** \ **Category:** Help\ **Created:** [September 6, 2023, 4:04pm UTC](https://talk.observablehq.com/t/circle-marker-on-a-line-plot-linked-to-a-slider/8246 "2023-09-06T16:04:07Z")\ **Posts on this page:** 9\ **Page:** 1
**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:** [September 6, 2023, 4:04pm UTC](https://talk.observablehq.com/t/circle-marker-on-a-line-plot-linked-to-a-slider/8246/1 "2023-09-06T16:04:07Z")
I would like to have a marker on my line plot that is linked to a slider. As the slider is moved the circle marker should move along the line of the line plot. Is there a way to do this in Observable? ---
**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\ **Post date:** [September 7, 2023, 12:48am UTC](https://talk.observablehq.com/t/circle-marker-on-a-line-plot-linked-to-a-slider/8246/2 "2023-09-07T00:48:03Z")
The easiest approach would be to leverage Observable’s built in reactivity. Thus, you could create a slider named something like `viewof x`, like so: ``` viewof x = Inputs.range([-1, 12], { value: 1, step: 0.01 }) ``` Then, create a plot that depends on the parameter `x`. The plot should update whenever you change the value of `x` by moving the slider. The technique is illustrated in [this notebook], which produces the following: https://observablehq.com/embed/74d2a043ad2eaf57@latest?cells=viewof+i%2Cplot ---
**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:** [September 7, 2023, 8:18am UTC](https://talk.observablehq.com/t/circle-marker-on-a-line-plot-linked-to-a-slider/8246/3 "2023-09-07T08:18:01Z")
Thanks! That’s amazing. ---
**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:** [September 7, 2023, 8:33am UTC](https://talk.observablehq.com/t/circle-marker-on-a-line-plot-linked-to-a-slider/8246/4 "2023-09-07T08:33:45Z")
I just tried the solution and I’m still struggling. I have a data table with the columns being the x- and y-axis values. I made the x-axis the slider, but then it made a vertical line (that moves with the slider) instead of a dot on the line that’s already there. I.e. y is not a function of x, it is read from a data table. Any suggestions? I suppose one way of describing it is that I want a dot/circle to move like the tips move when a cursor moves across the plot, but linked to a slider instead of cursor movement. Does that make sense at all? ---
**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\ **Post date:** [September 7, 2023, 9:42am UTC](https://talk.observablehq.com/t/circle-marker-on-a-line-plot-linked-to-a-slider/8246/5 "2023-09-07T09:42:43Z")
> [@nico-dsq](#): > > I have a data table with the columns being the x- and y-axis values. I made the x-axis the slider, but then it made a vertical line (that moves with the slider) instead of a dot on the line that’s already there. I adjusted the example notebook so that the points are generated and the slider picks the _index_ of the point to plot, rather than the point itself. Of course, a notebook illustrating what you’ve got is always helpful. ---
**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:** [September 7, 2023, 9:46am UTC](https://talk.observablehq.com/t/circle-marker-on-a-line-plot-linked-to-a-slider/8246/6 "2023-09-07T09:46:56Z")
Thank you! Here is the notebook: > **[Test](https://observablehq.com/d/8e3da4cc8c6c6609)** I would essentially like the black dot to move along the red line (all lines would ultimately have their own dot moving to the same slider, but I can add those once I know how to do one) as the slider moves. I hope this helps. ---
**Author:** ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)\ **Post date:** [September 7, 2023, 11:37am UTC](https://talk.observablehq.com/t/circle-marker-on-a-line-plot-linked-to-a-slider/8246/7 "2023-09-07T11:37:19Z")
There are a few things that I’d do differently. Most importantly, I’d load the data once, store that result in a variable, and then refer to that variable when needed. We can address your question in a manner pretty similar to my previous response. That is, we set up a slider whose value indexes the data and then plot points by choosing the appropriate data point by index. The first argument to `Plot.dot` might represent the y-coordinate that you want to plot all the points in one step. I’ve sent [this suggestion](https://observablehq.com/compare/8e3da4cc8c6c6609...3bf53a0df75fdf31) to you that implements this. You can merge the changes into your notebook, if that helps. ---
**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:** [September 7, 2023, 12:04pm UTC](https://talk.observablehq.com/t/circle-marker-on-a-line-plot-linked-to-a-slider/8246/8 "2023-09-07T12:04:00Z")
Wonderful! Thank you very much. This is exactly what I needed. You are a superstar! ---
**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:** [September 7, 2023, 3:28pm UTC](https://talk.observablehq.com/t/circle-marker-on-a-line-plot-linked-to-a-slider/8246/9 "2023-09-07T15:28:16Z")
Apologies for asking another question on this thread, but it is related. I want to use the same graph again, but without the slider and just highlight a single threshold value with a dot. How would I go about doing that? I’ve tried something on the notebook below, but the dots do not stay on the line: > **[Test](https://observablehq.com/d/8e3da4cc8c6c6609)** > > Threshold: Spec I would like to make calculations using the slider inputs times the column values to create a new graph like the one above. I.e. if the sliders are changed, the curves will change. Calculations are as follows: fp\_cost = false\_positive...