Slider Coding Questions

Builder
1

Hello,

I have two questions regarding the slider function:
My first question is: how can I change the color of the marker to e.g. blue?
And secondly, how can I add the numbers ‘0’ and ‘40’ to the lower left corner/the lower right corner of the slider? (Similar to the older Psychopy version of a rating scale) in order to make it easier to locate the numbers for the participant?
Thank you in advance!

1 Like
2

I found out that you can easily solve the 2nd problem by typing the numbers in the field “Labels” in the range slider properties window.
But another problem I’m facing now is how to make the small vertical lines on the range slider dissappear so that the only thing left is a line. (Similar to the old version of a rating scale).

3

Hi @rebecca.shane, the easiest solution would be to use the “slider” style in the Appearance tab, and set your ticks to 0,1. Or, just keep the rating style slider and only set the tick locations as 0,1. This will give you ratings between 0 and 1, but you could also use 0, 40 which will give you ratings between 0 and 40.

Btw, for your first question about changing the marker color, is this for an online study?

4

Thanks for your reply! That solved all the problems!

5

Although I just realized I hadn’t fixed the problem with changing the color of the marker…
I know that I can type in:
slider.marker.color = ‘darkBlue’
,but whenever I upload it on Pavlovia, the color is still the same. I tried creating the equivalent Javascript code, but since I’m a beginner I have problem doing so.
Maybe you could help me one more time?

6

Yes it is doable, but involves changing private variables that should be hidden from users. That is, you’re not supposed to change them directly, but it works and does not cause any issues:

// Begin Experiment
col = new util.Color('green')  // Create your color once
newMarkerSize = 35  // in pixels

// Each Frame

try {
    if (slider._markerColor.int !== col.int) {
        slider._markerColor = col;
        slider._marker.lineStyle(1, col.int, 1, 0.5);
        slider._marker.beginFill(col.int, 1);
        slider._marker.drawCircle(0, 0, newMarkerSize / 2);
        slider._marker.endFill();
        slider._needUpdate = true;
        slider._updateIfNeeded();
     }
} catch (err) {}

This works by changing the color of the marker when it is created, i.e., when the slider is clicked. The color is only changed once, when the code checks on every frame (screen refresh) whether the original color of the marker matches your new color. If it does not match, it changes the color of the slider marker.

7

Thank you very much for your help! It worked on Pavlovia this time, but I forgot to mention that I’m using a triangle marker instead of a circular one. What does that mean for the JS code?

8

Ok, try this instead:

try {
    if (slider._markerColor.int !== col.int) {
        slider._markerColor = col;
        slider._marker.lineStyle(1, col.int, 1, 0.5);
        slider._marker.beginFill(col.int, 1);
        slider._marker.moveTo(0, 0);
        slider._marker.lineTo(markerSize, -markerSize);
        slider._marker.lineTo(-markerSize, -markerSize);
        slider._marker.endFill();
        slider._needUpdate = true;
        slider._updateIfNeeded();
     }
} catch (err) {}
9

I tried this code, but it didn’t change the color unfortunately.

10

Weird, that worked for me. Have you also set the color and markersize at the beginning of the experiment? Here is a working version https://run.pavlovia.org/dvbridges/sliderunits/html/ . The code:

# Begin Experiment
col = new util.Color('green')
markerSize = 35;

# Each Frame
try {
    if (slider._markerColor.int !== col.int) {
        slider._markerColor = col;
        slider._marker.lineStyle(1, col.int, 1, 0.5);
        slider._marker.beginFill(col.int, 1);
        
        // Triangle Marker
        slider._marker.moveTo(0, 0);
        slider._marker.lineTo(markerSize, -markerSize);
        slider._marker.lineTo(-markerSize, -markerSize);
        slider._marker.endFill();
        
        // Circle marker
        // slider._marker.drawCircle(0, 0, 35/2);
        // slider._marker.endFill();
        slider._needUpdate = true;
        slider._updateIfNeeded();

     }
} catch (err) {}
11

It worked this time! Thank you so much for your help, I really appreciate it!