Better slider UX

[ChasNelson1990]

See https://github.com/gliff-ai/annotate/pull/329

[joshuajames-smith]

Current annotation toolbox.

The toggle UX pattern of the transparency tool is different from the single click of other tools, is this needed? Do users need access to both brush size and transparency if the sliders disappear once the user clicks away anyways? So, I've wireframes some ideas on labelling these sliders and splitting the sliders up to their respective individual tools. The number box should allow the user to type to give them an extra level of control.

1. Icons (with hover over tool tip, without shortcut). Similar to how we present other tools but the meanings of the icons are not clear unless the user figures out to hover over the icon.

2. Text above Vertical Slider. Text could live above the slider the length of text would increase the space taken up by the sliders or the text could become too small to read.

3. Tooltips. Could a tooltip triggered as the user uses the slider help? It may not be obvious enough until the user actually uses a slider.

4. Vertical Slider and Text Description. Vertical text could allow us to keep the vertical styling but could be hard to read the labels?

5. Horizontal Slider and Text Description. Horizontal is a better size for placing and reading text. It may take up a little more visual space from the horizontal positioning but could be the clearer labelling?

[joshuajames-smith]

Taking on feedback, I've created some higher fidelity mockups with two ideas.

1. Vertical Slider and Text Description.

2.1. Horizontal Slider and Text Description.

2.2. Horizontal Slider with Labels and Text Description.