How to create a visual range indicator for two slider values?

Hello all!

I am looking for a way to visually indicate the range between two slider values.

PsychoPy does not currently support range sliders, so I had to work around this by:

  • creating two separate sliders (rating sliders with Granularity set to 0)
  • replacing the markers (using “slider.marker = image”, “slider_2.marker = image_2” in a code component)
  • matching the color of the sliders to the background to hide them
  • adding a rectangular polygon to visually function as the new slider

This is how it looks:

This works really well, but now I would like to add the range between the two markers as well, like this:

The idea is that the range indicator changes as the two slider markers are moved. Is this even possible? Maybe there are some other creative solutions that can work instead? I have tried with polygons, but location and size must change as the markers are moved, and I have not found a way to do that. I do not need to store any information from the range indicator, and it will just be there for visual purposes.

Thank you so much!

Here are the sliders with a different background color so you can see how it is set up:

(Sorry for the double post. I was not allowed to add more than two attachments in the first post)