| Reference | Downloads | Github

PsychoJS Slider: marker does not appear until mouse button released

The Slider component behaves differently in PsychoPy and PsychoJS. In PsychoPy, the marker appears as soon as you click on the scale; whereas in PsychoJS it does not appear until the mouse button has been released. I think the user feel of the Slider is much better in PsychoPy.

I have been trying to emulate the behaviour of the PsychoPy Slider component in PsychoJS by using code to alter the behaviour of the PsychoJS Slider component, but with very little success.

I was unable to make a Slider component show the marker as soon as the scale is clicked, whilst also repositioning the marker under the mouse button. One or the other is possible, but not both. (To get the marker to appear as soon as the mouse is clicked on the scale, but not in the right place, it is a simple matter of setting alpha = 1; but this no longer works when the marker is repositioned.) The best I could do was to make it show the marker when the mouse is used to click and drag: so the marker appears under the mouse not only when you click and release, but also when you click and drag. But still not when you just click.

I think the trouble is that the PsychoJS source code has a bunch of event listeners which carry out a fixed set of instructions. It does not seem possible to change a key aspect of their behaviour, which is to keep the marker hidden after the first mouse click. The best I could do was to implement what amounted to an event listener of my own, by creating a rectangular Polygon component with the same position and dimensions as the Slider component and, when it was clicked, carrying out a set of instructions that mimicked and slightly modified the behaviour of the existing event listeners. But the existing event listeners still work in the background and interfere with the desired behaviour. I do want them to take over once the marker has appeared, and I therefore turn off my own ‘listener’ at this point, but they intrude before this point, the main effect being to set alpha = 0 until a button release or drag event has occurred.

I attach a Builder file that shows 3 alternate bits of code: the first makes the marker appear as soon as the mouse is clicked on the scale; and the other two are alternate ways to reposition the marker under the mouse cursor when the mouse is clicked on the scale.

slider JS basic.psyexp (10.4 KB)

I wonder if there is a better approach that will do what I require? If not, would it be possible at some point when the forum is less busy for the PsychoJS Slider component source code to be modified to make this behaviour possible?