PsychoJS Slider – does not rescale correctly with window size

URL of experiment: https://run.pavlovia.org/rdkirkden/slider_js_full_screen/html/?__pilotToken=c74d97b01eae257e44aa9d5bade97baf&__oauthToken=6950f7832174139b6b451dffdcf3aec0381098300714fa9090fa24f1a476fd18

Description of the problem: The PsychoJS slider component does not rescale correctly with window size. In Chrome, Edge and Firefox, it renders correctly only when the window is full size, not in ‘full-screen’ mode, or when the window size is reduced. This is regardless of whether Experiment Settings > Screen > Full-screen window is checked. In Opera, it renders correctly only in ‘full-screen’ mode when Experiment Settings > Screen > Full-screen window is checked; and only when the window is full size when Experiment Settings > Screen > Full-screen window is not checked. What I mean by ‘renders incorrectly’ is that the scale part of the slider has a fixed length regardless of window size, whereas the marker’s range of movement changes with the window size, so that the marker’s range of movement does not always match the length of the scale. In full-screen mode, the marker’s range is greater than the scale length (in Chrome, Edge and Firefox); and when the window is smaller than full size, the marker’s range is smaller than the scale length. Other components that may be used in conjunction with the Slider (e.g. a Text component used for marker labels, or a polygon component used for a button) behave in the same way as the marker.

In full-screen mode:

Reduced window size:

slider JS full-screen.psyexp (11.1 KB)

What is the unit for your window object? Also have you specified a unit for the visual objects?

It should work better if you choose a relative unit such as “norm” so it will be resized with the window.

1 Like

I’m using relative units throughout. In Builder Experiment Settings, the units are set to ‘height’ and in the slider and other visual objects the units are set to ‘from exp settings’. For the visual objects, if I instead set the units to ‘height’ (so that in the Coder View their units are explicitly declared as ‘height’ in the constructor call), the behaviour is unchanged.

When I change the units to ‘norm’, in Chrome, Edge and Firefox this improves the behaviour of the slider in full-screen mode (now the marker range matches scale length in full-screen mode as well as with a full-size window, but still not with a reduced size window). In Opera, the effect is oddly unpredictable: sometimes it impairs the behaviour of the slider in full-screen mode (now the marker range only matches scale length when the window is full size, not in full-screen mode or when window size is reduced) and sometimes improves it (i.e. the marker range matches scale length in full-screen mode and with a full-size window, but not with a reduced size window).

Although the Slider object seems to generally look better in full-screen mode with ‘norm’ units than ‘height’ units, this is because the marker range no longer rescales in the transition between full-screen mode and a full size window, not because the scale length has started to rescale.The other visual objects on the screen (text, polygon) continue to rescale completely differently from the Slider object when I change from full-screen mode to a full size window. So I’m not sure that switching from ‘height’ to ‘norm’ units has really helped. Also, ‘height’ units seem generally better than ‘norm’ units when rendering text and images online because it preserves the aspect ratio, so a switch to ‘norm’ units is undesirable for other reasons.