Altering width of slider line?

Simple question: Is there any way to alter the width of the slider line in an online experiment? I’m happy with the marker size, the size of the ticks etc., but I’d like the line itself to be thicker (it’s not rendering at all on some browsers, and I want to see whether this is because it’s quite thin).

@ps2, in the Slider component dialog, you can set the Slider style to “slider”, which provides a wider, slider-like scale, rather than a thin rating scale slider.

Thanks for the suggestion. Alas, though this makes the slider very clearly visible in PsychoPy, when running online the scale is very different, with a thin horizontal line and a red circular marker (as is the case with the style set to “rating”). I thought this might have been due to some manual change I had made to the code outside of Builder, but it’s also the case with a very minimal example that is entirely Builder-created (see the plaintively-named https://pavlovia.org/ps2/pleasework2).

Ok, the following works for Python, I have not tested online (online may require a bit more code), but just add a code component, and use the following:

# Begin Experiment
slider.line.size = (1.0, .1)  # This is the x,y size of your new line

Edit: @ps2, apologies you cannot use tuple (round brackets) with JS, you must use square brackets

Thanks again. Works like a charm in Python, but not online (I get an error message saying that there is no slider.line attribute).

Having just looked through the code at https://github.com/psychopy/psychojs/blob/master/docs/visual_Slider.js.html, I see that the “slider” style doesn’t seem to be implemented, which is presumably why changing the style in Builder doesn’t work. There also seem to be a bunch of commands there relating to various physical aspects of the sliders, so I’ll try to play around with them a bit and see if I can get anything happening. (I’m a relative js novice, but have always used the coder in PsychoPy before, so am even more of a novice when it comes to using Builder!)

I did not think it would work online, but worth a try. It will require more coding, something along the lines of this post, which shows how to change the marker size in JS. In the link you just posted, take a look at the _buildSlider function, and line 460 within that for the relevant code that needs to be added to a code component, so you can change the line size.

Thanks for the pointer!

After a lot of trial and error, I finally have something that works. I put the following code in the “Begin experiment” tab:

testCol = new util.Color('white');

And then the following code in the “Each frame” tab:

slider._barSize = [1, 0.01];
const barSize_px = util.to_px(slider._barSize, slider._units, slider._win).map(v => Math.max(1, v));
slider._body.beginFill(testCol.int, 1);
slider._body.drawRect(-barSize_px[0] / 2, -barSize_px[1] / 2, barSize_px[0], barSize_px[1]);
slider._body.endFill();

Manipulating the second value in slider._barSize then alters the thickness of the slider line.

1 Like

I am trying this code for my experiment to make slider line thicker using code componant. But auto->js is showing synatx error.
I need the slider line to be 2 times thicker without changing tick size and marher size.

Can anyone help?

The code that I posted above is already in javascript rather than Python, so if you’re using something similar you shouldn’t need to rely on the auto conversion—rather, just select “JS” as the code type, and enter it in.

ok, i tried that also but still no change in width of the slider…

thank you for reply
Aparna

Please could you show your slider component plus any code components that affect it.

Its working now. there was some spelling mistake.

Thankyou

Hello, thank you for this code and your effort. I have some questions for my, hopefully, soon to be online experiment. I hope that what I ask is not off-topic.

I have added your code as a code component within the routine, but when I compile, these lines are not in the code, thus; I cannot see the effects. Troubleshooting has revealed that only JS lines (as opposed to translated ones) do not get compiled.

What would you recommend in this case? Could I ask of a Python version of the code so that it gets translated, please? Or do you believe that I should debug from Pavlovia instead?

Thank you for your time.

Hi,

Please could you show your JS code component? It might not be complied if there’s a syntax error in it.

You probably need two code components (at least)…one for Auto translated code and one for JS online code.

Hello! Thank you in advance. If possible, I would like to apply this solution to every slider in my experiment.

‘Each Frame’ code component in the slider’s routine:

conf_rating_slider._barSize = [1, 0.1];
const barSize_px = util.to_px(conf_rating_slider._barSize, conf_rating_slider._units, conf_rating_slider._win).map(v => Math.max(1, v));
conf_rating_slider._body.beginFill(testCol.int, 1);
conf_rating_slider._body.drawRect(-barSize_px[0] / 2, -barSize_px[1] / 2, barSize_px[0], barSize_px[1]);
conf_rating_slider._body.endFill();

The relevant Properties screen:

Thank you!

With regard to there being a Python version of the code, it’s much easier to achieve the same effect in Python, as per @dvbridges’ post above. However, unless there have been substantial changes made since February, I suspect this will not auto-translate to javascript (this was why I had to use the fiddly solution in the first place).

I can’t see an obvious problem with the code you’ve posted. If I were trying to debug such an issue myself, my next step would probably be to put the code directly into the compiled program and see which (if any) lines give me errors when running in a browser. However, I have never tried to include code components which mix js code with code auto-translated from Python, so if that is the source of the issue then @wakecarter’s suggestion of using separate code components for translated and js code might be all that is required to resolve it.

Hello, thank you for your response!
Firstly, I would like to say that the JS code in PsychoPy “activates” in Pavlovia, so I did not have to debug in a browser yet. Secondly, the JS and Py codes are in seperate code components right now per @wakecarter and your advice.

However, I come across this error:
Type Error: Cannot read property 'beginFill' of undefined referring to conf_rating_slider._body.beginFill(testCol.int, 1);

Even though I did do some research, I am not experienced in JS at all and do not know to assign a value so that the experiment runs. Could you help, please?

Thanks again

Sorry, I’m not sure why that error would arise—everything you have there looks okay to me. If you post or link to the javascript code for the whole experiment I’d be happy to take a look though.

So I’ve been playing around with sliders in one of my experiments a little today, and I think I now know why you’ve been getting that error, @Deniz. Basically, the code that switches on the slider has to execute earlier in the “each frame” function than the code for modifying the slider’s width. This is easy to accomplish if editing the code directly in js, but I’m not sure how to go about it when including it as a code component (since the code for switching on the slider is automatically generated). One solution that occurs to me is to also include the code for switching on the slider in the code component; you’ll then have redundant code, but at least it should work. So, assuming your slider were simply called “slider”, the code block would then look like this:

if (t >= 0 && slider.status==PsychoJS.Status.NOT_STARTED){
  slider.tstart=t;
  slider.frameNStart=frameN;
  slider.setAutoDraw(true);
}
slider._barSize = [1, 0.01]; // Modify second value here to alter width of line
const barSize_px = util.to_px(slider._barSize, slider._units, slider._win).map(v => Math.max(1, v));
slider._body.beginFill(testCol.int, 1);
slider._body.drawRect(-barSize_px[0] / 2, -barSize_px[1] / 2, barSize_px[0], barSize_px[1]);
slider._body.endFill();

Assuming this works, perhaps someone who is better versed than I am in using Builder code components can find a more elegant solution.