Slider labels are not aligned correctly Online

I want to report a little bug in the slider component.

I noticed that the slider labels are not aligned with their ticks online (see the figure below).

Interestingly, this only happens when the slider is shown after the first time. And if I exit the full screen mode, the labels get aligned properly (see the figure below).

Right now, I use arrows to indicate that the labels should indicate the two ends. (Search unicode arrows)

But it’s not ideal. And I don’t want to encourage my subjects to exit the full screen during the experiment just in order to fix this label misalignment issue. So I hope this problem can be fixed soon.

I’ve come across this – including an instance where one slider was fine but another apparently identical slider was not.

In one instance I’ve put 10% and 90% to reflect where the labels actually appear, instead of 0% and 100% as desired, though I like your arrow solution too.

The alternative (which I’ve also used) is separate text components for the labels – a pain but it works.

Is this one a known issue @sotiri ?

See also Slider Label Position

See PR #276

So, I’ve done a bit of bug-hunting (and in the process submitted a pull request for an unrelated issue #274) and found the bug-causing sequence:

  1. User presses Ok on DlgFromDict
  2. This fires psychoJS.window.adjustScreenSize() which requests a fullscreen transition from the browser
  3. At the same time, experimentInit() sets up the Slider, and at some point, calls _estimateBoundingBox()
  4. In _estimateBoundingBox(), this._tickPositions_px is set using
  5. uses to_px() with a this._win argument
  6. BUG OCCURS HERE: to_px() uses this._win.size to convert tickPositions from PsychoPy dimension units to browser pixel units
  7. Finally, the initial label positions, this._labelPositions_px, are set from this._tickPositions_px

The problem at Step 6 is that this._win.size represents the current window size. At this point, this._win.size may still be the pre-fullscreen window size, so the labels are placed in the correct positions for the pre-fullscreen window. However, once post-fullscreen, the labels will be in the wrong positions.

The main issue is that Step 2 is async, so it cannot be guaranteed which state the window is in.

You can easily reproduce the bug by:

  • Option 1: Make your window very small before pressing Ok on DlgFromDict. Once fullscreen, the labels will be grouped in the center of the window. This is because this._win.size is small.

  • Option 2: Wait until fullscreen is achieved, and then fire experimentInit() again. This re-initializes the Sliders, and the labels will be in the correct positions.

  • Option 3: Manually fullscreen the window before pressing Ok on DlgFromDict. The labels will be in the correct positions because the window size has not changed

Possible fix:

  • Add a timeout between closing DlgFromDict and triggering Scheduler.Event.NEXT. In DlgFromDict > close: function() ...:
    Replace (line 288 on GitHub):
    self._dialogComponent.status = PsychoJS.Status.FINISHED;
if (self._psychoJS._window.fullscr) {
    setTimeout(() => self._dialogComponent.status = PsychoJS.Status.FINISHED, 2000);
  } else {
    self._dialogComponent.status = PsychoJS.Status.FINISHED;

This sets a timeout for 2000ms before continuing. In my quick testing, a minimum of around 500ms seemed to work too, but 2000ms hopefully gives some buffer space without making the experiment appear to be frozen.

(I tried a fix that listened for the fullscreenchange event, but at least in my quick testing, it still required a delay to guarantee the resize was complete)

1 Like

Hi @wakecarter, thanks for flagging, if I understand correctly PR#249 should help address the issue, x

I’ve tested @sijiazhao 's solution and added it to my crib sheet.

Does your link mean that it will be fixed in the next release?

1 Like

Cool, thanks, the next one not sure, a future release very likely, x

@sotiri @wakecarter @jon

I submitted a PR (#276) last week which includes the fix I described.


Thank you, I just used the fix in the crib sheet and it just saved me a ton of work.

1 Like

Hi, I have the same problem but can’t find the right part of code to change - could you help me with this?

Link to the experiment in piloting mode: Pavlovia