LookAndFeelV4::drawLinearSlider is incomplete

juce:LookAndFeelV4::drawLinearSlider paints the slider track and thumb with the same color for both isEnabled() states

That honestly didn’t look so good, especially compared with disabling other components like ComboBox. It even looked bad compared with the slider’s own textbox!

The fix is very simple though. Overriding drawLinearSlider and adding Colour::withMultipliedSaturation to these lines that sets the track color and thumb color works:

// track color
g.setColour (slider.findColour (Slider::trackColourId).withMultipliedSaturation(slider.isEnabled() ? 1.0f : 0.5f));

// thumb color
g.setColour (slider.findColour (Slider::thumbColourId).withMultipliedSaturation(slider.isEnabled() ? 1.0f : 0.5f));

Much more uniform and objectively better. I know this is such a simple fix and a two liner, but I feel like this should have worked out of the box. Especially if slider is the odd one out here. Thanks!

~hotland

An interesting fix, but you’ve still got issues with colour blind users with this scheme.

The difference in contrast is not great enough for colour blind folks to differentiate the state.

You can use this tool to evaluate your UI for colour blind folks, and if you have separate design folks working on your project, it’d be wise to get them to test against this tool on the regular:

https://www.color-blindness.com/coblis-color-blindness-simulator/

4 Likes

Great point. I feel like combining it with withMultipliedLightness and make it brighter can create a more inclusive muted look. Gotta play with good numbers for that. Thank you for pointing that out!

~hotland