The draggable thumb should be invisible, so we'll set that to transparent, and the cursor should change to ew-resize when hovering: This is to avoid "collisions" between the ranges. ![]() In CSS, we need to stack them all on top, using position: absolute, the range-height must be set to the lowest value possible ( 1px), while the draggable thumb must be the full height of the table. This is a bit more complex than the Accessible Image Compare you need an for all columns except the last.Įach will update two custom properties, holding the widths of the cells to the left and the right of the input. None of the ones I found supported resizing with arrow-keys (they must be out there, I just couldn't find any). You'll find plenty of examples and libraries out there - but they often lack accessibility. ![]() ![]() One obvious candidate is resizable table columns. It's an interactive control with touch-support, and you get accessibility baked-in for free!Īfter I finished the Accessible Image Compare a while ago, I thought about other use-cases.
0 Comments
Leave a Reply. |