Add labels to flashlights and sliders (RGB screen)

[amanda-phet]

From https://github.com/phetsims/color-vision/issues/148 we decided to make the following updates to this sim:

• [x] Add intermediate tick marks (at 0, 25, 50, 100) but only label the ends 0% and 100%, above and below the track. (You might need to make the track slightly shorter so the thumb doesn't cover the labels)
• [x] Label the flashlights on the handles, on a semi-transparent white background. Label each one Red, Green, and Blue.

[Luisav1]

@amanda-phet I have updated the sim and this is what it looks like now: Could you review it to ensure everything is looking good? Thanks!

[amanda-phet]

The labels look good to me, although the Blue label background doesn't look "centered" on the handle. Can that be moved "down" slightly on the flashlight handle?

I'm also not sure about the tick marks.. they don't look connected to the slider track. Is there anything we can do about that? I'm not very familiar with sliders, but that's my first impression. I think it's because the slider track has a black stroke around it, so I would play with also giving the tick marks a black stroke if that's possible.

[Luisav1]

Thank you for the review! I moved the blue label down slightly:

On the customizing options for tick marks, they are unfortunately limited in the SliderTick class. Currently, you can only adjust the tick's length, width, and color.

I tested with setting the track stroke color to white:

Also, I tried making both the stroke color white and reducing the track width:

@amanda-phet, do you have any preference or suggestions?

[amanda-phet]

I got some feedback on this design and the consensus is we like the third one, which is all white and a thinner track.

[Luisav1]

Thanks @amanda-phet! I've applied those changes and this is how it looks like now: This issue is ready to be closed.