Changing slider appearance in JS

Online experiments
1

I’ve been trying to change the appearance of the Slider component in an online study, using a custom code provided by @dvbridges in Slider Coding Questions

However, the large red marker still shows up behind the smaller custom triangle. I’ve made an experiment with just a slider component to show the problem: Pavlovia

Skjermbilde 2020-02-24 kl. 11.29.46
Skjermbilde 2020-02-24 kl. 11.29.46882×286 1.09 KB

Any ideas on how to solve this?

1 Like
2

@Andreas_Dahl, you will need to adjust the size of your white marker to cover the red marker.

3

Thanks, that works, but the marker is very large. There is no way to make the marker smaller without also making the slider smaller? In the python version I’m able to set slider.marker.size with a code component.

4

You can change the size of the marker by putting the following code into the Begin Routine tab of your code component:

slider.size[1] = slider.size[1] / 2;
slider._applyStyle();
markerSize = util.to_px(slider.size, 'height', psychoJS.window)[1];

There are a few things to note about this.

  1. Marker size is linked to tick size and you can’t adjust these independently. So, when your marker gets smaller, so will your ticks. This is because the ‘_applyStyle()’ method of visual.Slider takes the value of ‘size’ and uses it to set both variables, ‘_markerSize’ and ‘tickSize’ (https://github.com/psychopy/psychojs/blob/master/js/visual/Slider.js).

  2. As you already know, the only way to change the colour of the marker is draw over the original marker in a new colour, using some code in the Each Frame tab of the code component. You need to make sure that the newly drawn marker is the right size. It turns out that you can’t use the ‘size’ variable for this, because the units of the ‘size’ variable are whatever you set the units to be in your Slider component (probably ‘height’ for an online experiment), whereas the units required by the code you are using to redraw the marker (originally based on the ‘_buildSlider()’ method of visual.Slider) is pixels. So you need to convert from ‘height’ to pixels using the ‘util.to_px()’ method. This gives the right value of ‘markerSize’ for the code you are using in the Each Frame tab.

  3. You might find that ‘slider.size[1] = slider.size[1] / 2’ gives you a marker that is a bit too small, as you have to click quite close to the slider line to make it appear. For reference, the default marker size for the Builder Rating component, which does not work online but looks quite smart, can be obtained by using ‘slider.size[1] = slider.size[1] * 5 / 6’. However, because the tick line size is linked to the marker size, this gives quite large tick lines, which look a bit spidery. So, the optimal size is perhaps a trade-off between how the marker looks and how the ticks look.

For anybody else who might be reading this post, the code in the Each Frame tab is:

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) {}

‘slider’ is the name of the Slider component. Also, there is an additional line of code to define ‘col’, which can be either in the Begin Routine tab or the Start Experiment tab:

col = new util.Color('white')

4 Likes