I’ve got two sliders, and would like to be able to move the blue one up so it’s ‘under’ the red one, thereby achieving a poor man’s range slider. The two sliders are already coded to work in unison. The issue is purely one of visual presentation: Is there a way to set the blue slider background to transparent? If so I could make this work.
Here’s the current situation:
The desired visual presentation is:
The only thing I can think of using javascript is creating 2 sliders like you have but at the same height. Then grow them in width and shift the position so it always looks like they are 1 seamless line.
Sounds like a plan. I guess the pointer behaviour on the black background between them will still be an issue due to ambiguity. Is there any way I can override the default behaviour and not render the background and suppress background pointer events? Then pointer events would only arise when clicking on the thumb or valuebar area of each slider. Presumably I can draw a basic black line underneath both sliders to simulate the current background.
Hello @rjt just checking in, was your question answered?
Hi - the question wasn’t answered, but it doesn’t matter to me now as I’ve changed back to Flutter for the GUI as I don’t need 3D, and I’ve customised a range slider to get the result I need.