| Reference | Downloads | Github

VESPR Demo Interactive Slider

I’ve just added a new demo to my online demos post.

Interactive Slider code | try it

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:


for label in slider.labelObjs:
    label.height = .03  # Or whatever size you want
    label.wrapWidth = .2


slider._markerColor = blue;
slider._markerSize = (.1,.1);

This seemed to work offline, but not online

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 requires making the changes on creation of the slider. I am trying to use a slider component.

1 Like

Hi There,

Hope this might help!

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 and flagged some of the reasons it’s hard to manipulate color BUG: slider.setFillColor is not a function · Issue #322 · psychopy/psychojs · GitHub to the team - they are on it :muscle:

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!

1 Like

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

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! :wink:


1 Like

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.

1 Like

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 :slight_smile:

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

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.

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