How to change the font size of Slider label

Online experiments
1

Hi everyone,

A problem when I use Slider is the Slider label’s font size was too large, but I did not find the way to change the font size or height in Builder. Can anybody give me a hint how to achieve this.

Thanks very much!

2

Hi @YuanboBQ, this is actually a parameter of Slider, but is not customizable from Builder. Instead, just paste the Slider component into a code component, and add the parameter labelHeight with a value. E.g.,

slider = visual.Slider(win=win, name='slider',
    size=(1.0, 0.1), pos=(0, -0.4),
    labels=['low', 'high'], ticks=(1, 2, 3, 4, 5),
    granularity=0, style=('rating',),
    color='LightGray', font='HelveticaBold',
    flip=False, labelHeight = .5)
3

Hi @dvbridges, the code works properly, thanks!

Sorry to ask another question about Slider here: is it possible to get the Slider value each frame like rating scale to present a text.

See the below link about this question:

4

No problem. Yes, getRating gives you the final rating i.e., after mouse have moved the scale. You could instead use the slider.markerPos param, this updates every frame. Just make sure it corresponds to your ratings and you will be fine.

5

Hi [@dvbridges]

I did what you suggested, but since I’m using the builder, every time I update, the label size information disappears.

How can I set the label size in a definitive way. I tried putting it in the “begin routine” but it did not work.

Thank you for your help
Rosane

1 Like
6

I have got the same problem here. Using the slider as a rating alternative for Pavlovia, the label size is just massive…

8

What worked for me was creating the slider, then creating a code component where I edited the slider in JS using fontSize rather than labelHeight. So create your slider, then create a custom code (which I placed on top of the slider in builder), where you write your code for the slider in the JS window in the Begin Routine section. Example:

  slider_name = new visual.Slider({
    win: psychoJS.window, name: 'slider_name',
    size: [1.0, 0.05], pos: [0, (- 0.1)], units: 'height',
    labels: ['Many times', 'A few times', 'Once', 'Never', "Not applicable",'Prefer not to answer'], ticks: [1, 2, 3, 4, 5, 6],
    granularity: 1, style: [visual.Slider.Style.RATING, visual.Slider.Style.TRIANGLE_MARKER],
    color: new util.Color('LightGray'), 
    fontFamily: 'Arial', bold: false, italic: false, 
    flip: false, fontSize: 0.02,
  });
1 Like
9

Hi @rebekkal,

I tried using this code. However, will this code override the properties of the slider component? I am not sure how this works?