Slider Component Label Wrap Width in Pavlovia

URL of experiment: Readability Lab / Medical Readability Project · GitLab

Description of the problem: We are using slider components to create likert-type scales on Pavlovia. Our problem is that some of the tick labels (one of the options of questions, see attached image) are very long and overflow the horizontal length of the screen. This will be even more problematic for small screen sizes. I could not find a built-in psychoJS function related to Slider Component that allows using wrap width feature that is possible with Text Components. Did anyone encounter this issue and found a workaround other than not using slider components? I would appreciate your help.

I sometimes use a separate array of text components instead of the labels. However, I’m hoping that wrap width will be added to sliders in the future.

Have a look at my Interactive Slider demo

Thanks, much appreciated! I was planning to do the same - create bunch of text components to replace labels.

Hey there,

Following code works:

Each Frame Tab

labelCount = how many labels you have in your slider
wrapWidthText  = your text wrapping value in pixels
for (let i = 0; i < labelCount; i++) {
    yourSliderComponent._pixiLabels[i.toString()]._style._wordWrap = true
    yourSliderComponent._pixiLabels[i.toString()]._style._wordWrapWidth = wrapWidthText    
}

Basically, it loops over all labels and changes the wrap width property.