# VESPR Demo Interactive Slider

**URL:** <https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911>\
**Category:** Builder\
**Tags:** pavlovia, slider\
**Created:** [May 11, 2021, 8:57am UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911 "2021-05-11T08:57:38Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![wakecarter](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/wakecarter/32/5753_2.png) [@wakecarter](https://discourse.psychopy.org/u/wakecarter)\
**Post date:** [May 11, 2021, 8:57am UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/1 "2021-05-11T08:57:38Z")

</div>

I’ve just added a new demo to my [online demos post](https://discourse.psychopy.org/t/psychopy-online-demos/22319).

# Interactive Slider [code](https://gitlab.pavlovia.org/vespr/interactive-slider) | [try it](https://run.pavlovia.org/vespr/interactive-slider)

This shows a PsychoPy slider object which can be moved using the left and right arrow keys or hovering over the slider with the mouse. Responses are submitted with a mouse click or the return key. The position of the slider is also recorded every 3 frames and presented on the screen in addition to being saved to the console and the data file.

However, I still need some help with a couple of points.

I have tried unsuccessfully to change the colour of the marker and the wrap width of the labels online using the following code:

Python

```auto
for label in slider.labelObjs:
    label.height = .03 # Or whatever size you want
    label.wrapWidth = .2
    label.text=slider_labels.pop(0)
slider.marker.color=blue

```

JavaScript

```auto
slider.setLabels(slider_labels);
slider.setLabelHeight(.03);
//slider.setLabelWrapWidth(.2); 
slider._markerColor = blue;
slider._markerSize = (.1,.1);
//slider._onChange(true)();
//slider._setupSlider();

```

This seemed to work offline, but not online

> [@Refining scale markers](https://discourse.psychopy.org/t/refining-scale-markers/7523/6):
>
> That’s good, to change the label size requires a bit more code. I think label size will be implemented in the Builder component in the future, but for now you have to change the size of each label object using a loop. In the “Begin Routine” tab: for label in slider.labelObjs: label.height = .01 # Or whatever size you want

Suggestions welcome remembering that I want it to work in the same way both offline and online.

Links I’ve looked at:  
[Changing the slider marker size in Javascript - #9 by arkadiy](https://discourse.psychopy.org/t/changing-the-slider-marker-size-in-javascript/9600/9) requires making the changes on creation of the slider. I am trying to use a slider component.

---

<div class="post-metadata">

**Author:** ![Becca](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/becca/32/34260_2.png) [@Becca](https://discourse.psychopy.org/u/Becca)\
**Post date:** [May 12, 2021, 5:48pm UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/2 "2021-05-12T17:48:03Z")

</div>

Hi There,

Hope this might help! [https://run.pavlovia.org/lpxrh6/color\_slider\_demo](https://run.pavlovia.org/lpxrh6/color_slider_demo)

Note that for other reasons, I wrote in JS for this project, but the code is so small/simple you will easily be able to implement that locally!

I also hit a few snags when I was working on this project. As you pointed out, the attributes of the marker in slider are not simple to interact with online (color being one of them), I’ve added some methods to help interacting with them [add getMarkerPos for sliders by RebeccaHirst · Pull Request #324 · psychopy/psychojs · GitHub](https://github.com/psychopy/psychojs/pull/324) and flagged some of the reasons it’s hard to manipulate color [BUG: slider.setFillColor is not a function · Issue #322 · psychopy/psychojs · GitHub](https://github.com/psychopy/psychojs/issues/322) to the team - they are on it 💪

Because of the current bug with color I actually use a polygon overlaying the marker (the color of that is easy to change), and set the marker alpha to 0.

Hope this helps!  
Becca

---

<div class="post-metadata">

**Author:** ![wakecarter](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/wakecarter/32/5753_2.png) [@wakecarter](https://discourse.psychopy.org/u/wakecarter)\
**Post date:** [May 12, 2021, 6:02pm UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/3 "2021-05-12T18:02:49Z")

</div>

With a polygon for mouse interaction and a polygon for marker colour and having to save marker pos because get slider doesn’t work and having experimentInit to realign the labels which can’t be changed in number I feel like at the moment it would be easier for me to write a customisable slider from scratch

---

<div class="post-metadata">

**Author:** ![Becca](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/becca/32/34260_2.png) [@Becca](https://discourse.psychopy.org/u/Becca)\
**Post date:** [May 12, 2021, 6:13pm UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/4 "2021-05-12T18:13:21Z")

</div>

Fair play if that is your preference!

But there is already a pull request in place to getMarkerPos, an issue raised to fit setFillColor (both linked above) and a demo there to provide a work around until those are fixed.

Perhaps if you have any recommendations for bug fixes/issues you can ensure quickest development by flagging the team or making pull requests at the psychoJS github. Being quite new to JS myself I can say it is quite fun to help directly fix those bugs! 😉

Becca

---

<div class="post-metadata">

**Author:** ![wakecarter](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/wakecarter/32/5753_2.png) [@wakecarter](https://discourse.psychopy.org/u/wakecarter)\
**Post date:** [May 13, 2021, 12:16pm UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/5 "2021-05-13T12:16:24Z")

</div>

Over the summer when I have more time I should definitely to to learn how to make pull requests.

For now, I’ve updated my interactive slider demo with a custom slider that looks and behaves nearly identical to the standard slider offline and doesn’t change appearance online.

---

<div class="post-metadata">

**Author:** ![Becca](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/becca/32/34260_2.png) [@Becca](https://discourse.psychopy.org/u/Becca)\
**Post date:** [May 13, 2021, 12:31pm UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/6 "2021-05-13T12:31:21Z")

</div>

Fab! Had a little play and it’s looking good! might need to double check to poll for mouse up events to make it more “drag and drop” like 🙂

---

<div class="post-metadata">

**Author:** ![wakecarter](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/wakecarter/32/5753_2.png) [@wakecarter](https://discourse.psychopy.org/u/wakecarter)\
**Post date:** [May 13, 2021, 12:33pm UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/7 "2021-05-13T12:33:41Z")

</div>

Thanks. These slider are intended to submit on a mousedown, so it’s hover and click rather than drag and drop.

---

<div class="post-metadata">

**Author:** ![mengsili](https://avatars.discourse-cdn.com/v4/letter/m/71e660/32.png) [@mengsili](https://discourse.psychopy.org/u/mengsili)\
**Post date:** [June 4, 2021, 9:18am UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/8 "2021-06-04T09:18:21Z")

</div>

Hi, I find this code changed your interactive slider marker color online successfully if add to the each frame tab for JS, but somehow when I use it to change the color of the default slider without any code, the marker just becomes invisible.

```auto
// Each Frame
slider._skin.STANDARD.MARKER_COLOR = new util.Color([1, 1, 1]);

```

---

<div class="post-metadata">

**Author:** ![trishabhugra](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/trishabhugra/32/30448_2.png) [@trishabhugra](https://discourse.psychopy.org/u/trishabhugra)\
**Post date:** [July 27, 2021, 12:54pm UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/9 "2021-07-27T12:54:28Z")

</div>

@wakecarter i am using the interactive slider for one of my projects. How do i change the nametags/markers on the scale? i am a newbie at psychopy who is using the builder view and your help would be appreciated 🙂

---

<div class="post-metadata">

**Author:** ![jasbisch](https://avatars.discourse-cdn.com/v4/letter/j/3be4f8/32.png) [@jasbisch](https://discourse.psychopy.org/u/jasbisch)\
**Post date:** [July 11, 2022, 9:56am UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/10 "2022-07-11T09:56:33Z")

</div>

Hey there,

thank you very much for that nice demonstration of a an interactive slider!  
When trying the demo online it works smoothly and as expected.

Unfortunately however, when downloading the source code and trying it, the marker doesn’t stop moving, even though I am releasing the key, which is a problem that occured to me as well, when I was implementing my own interactive slider implementation. Would you have any idea, what could be the problem, when keys[-1].duration keep the value None, even though I am lifting the key?

Thank you very much for your time!

Best  
Jasper

---

<div class="post-metadata">

**Author:** ![jasbisch](https://avatars.discourse-cdn.com/v4/letter/j/3be4f8/32.png) [@jasbisch](https://discourse.psychopy.org/u/jasbisch)\
**Post date:** [July 15, 2022, 2:23pm UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/12 "2022-07-15T14:23:41Z")

</div>

Hey again,

I found the problem! I had to adjust the experiment settings and switch Keyboard Backend under Input to PsychToolbox (from ioHub):  
 ![grafik](https://us1.discourse-cdn.com/flex002/uploads/psychopy/original/3X/0/6/06ddd5b19acdf71b5d7fcef6aff97739d7d46b68.png)

Best regards  
Jasper

---

<div class="post-metadata">

**Author:** ![JAQuent](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/jaquent/32/37887_2.png) [@JAQuent](https://discourse.psychopy.org/u/JAQuent)\
**Post date:** [September 10, 2024, 9:54am UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/13 "2024-09-10T09:54:03Z")

</div>

Can you confirm that setting the marker size changes anything online? Following your demo, I’ve set my marker to

```auto
slider._markerColor = new util.Color("blue");
slider._markerSize = (.001,.001);

```

with this result:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/psychopy/original/3X/2/3/2363a432efac847d26dc5238c357054a8faab7a0.png)

While the colour is indeed blue, the size of the triangle is not height \* .001. The corresponding python code works as expected.

---

<div class="post-metadata">

**Author:** ![laske10](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/laske10/32/45077_2.png) [@laske10](https://discourse.psychopy.org/u/laske10)\
**Post date:** [April 30, 2025, 10:54pm UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/14 "2025-04-30T22:54:15Z")

</div>

Hi jasbisch,

I ran into the same issue as you. I changed the Keyboard Backend setting as you did, but I still had the issue of the marker not stopping.

What did you adjust in the experimental settings?

Respectfully,  
Laske

---

<div class="post-metadata">

**Author:** ![ssss](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@ssss](https://discourse.psychopy.org/u/ssss)\
**Post date:** [November 27, 2025, 12:32pm UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/15 "2025-11-27T12:32:55Z")

</div>

Thank you very much for your work. It has been of great help to me. I wonder if I could ask you a few related questions here: One is, is it only the “custom slider” that can change the number of tick points and labels? Was the original slider unable to achieve this? Secondly, it seems that there is a problem with the custom slider. That is, you have to move it first before you can click and submit. If you don’t move it at the beginning, you won’t be able to submit. I think this is quite annoying.  
The version of Psychopy that I am using is 2021.2.3. I would be extremely grateful if you could clarify my doubts!

---

<div class="post-metadata">

**Author:** ![JensBoelte](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/jensboelte/32/9060_2.png) [@JensBoelte](https://discourse.psychopy.org/u/JensBoelte)\
**Post date:** [November 27, 2025, 2:10pm UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/16 "2025-11-27T14:10:50Z")

</div>

Hello @ssss

It is not possible to change the label or the number of ticks on a given slider online. You need to use the custom slider instead.

Best wishes Jens

---

<div class="post-metadata">

**Author:** ![ssss](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@ssss](https://discourse.psychopy.org/u/ssss)\
**Post date:** [November 27, 2025, 2:13pm UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/18 "2025-11-27T14:13:34Z")

</div>

OK, thank you so much!

---

<div class="post-metadata">

**Author:** ![wakecarter](https://sea2.discourse-cdn.com/flex002/user_avatar/discourse.psychopy.org/wakecarter/32/5753_2.png) [@wakecarter](https://discourse.psychopy.org/u/wakecarter)\
**Post date:** [November 27, 2025, 2:36pm UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/19 "2025-11-27T14:36:11Z")

</div>

> [@ssss](#):
>
> That is, you have to move it first before you can click and submit. If you don’t move it at the beginning, you won’t be able to submit. I think this is quite annoying.

This is deliberate so you have to interact with the slider rather than submit your previous rating without thinking. It could be edited in the code.

---

<div class="post-metadata">

**Author:** ![ssss](https://avatars.discourse-cdn.com/v4/letter/s/9dc877/32.png) [@ssss](https://discourse.psychopy.org/u/ssss)\
**Post date:** [November 29, 2025, 6:37am UTC](https://discourse.psychopy.org/t/vespr-demo-interactive-slider/22911/21 "2025-11-29T06:37:37Z")

</div>

Thank you very much for your time!