chaiNNer icon indicating copy to clipboard operation
chaiNNer copied to clipboard

Slider input appearance change

Open joeyballentine opened this issue 3 years ago • 2 comments
trafficstars

When looking at photoshop's sliders, I realized we could make our sliders a bit better.

hue-sat-properties-colorize png img

As you can see in Photoshop, the slider uses the full width, and the number input sits above it. The label is also left aligned. I think we should copy that design.

This will require a bit of a refactor though, because currently labels are applied the same way on every non-generic input. This will have to be changed to the input itself handling the label, or at least having a prop that allows you to turn off the existing default one.

joeyballentine avatar Oct 12 '22 15:10 joeyballentine

Will this actually look good in chainner though? Our number inputs are quite tall.

RunDevelopment avatar Oct 12 '22 18:10 RunDevelopment

194981119-bdd2df5f-e92c-44d4-84f9-67e2ea711816

I feel like theres easily enough room for it. If not, we can just make the input a bit taller overall. But this helps a little bit with too things: 1) the width of the slider number inputs is too small for some numbers, and 2) sliders are a bit too small. With this change, both could be wider without actually changing the width of the node

joeyballentine avatar Oct 12 '22 18:10 joeyballentine

Not needed

joeyballentine avatar Jul 27 '23 14:07 joeyballentine