I love using the <input type="range">. It's an interactive control with touch-support, and you get accessibility baked-in for free!

After I finished the Accessible Image Compare a while ago, I thought about other use-cases.

One obvious candidate is resizable table columns. You'll find plenty of examples and libraries out there — but they often lack accessibility. None of the ones I found supported resizing with arrow-keys (they must be out there, I just couldn't find any).

This is a bit more complex than the Accessible Image Compare; you need an <input type="range"> for all columns except the last.

Without styling, it looks like this:

Each <input type="range"> will update two custom properties, holding the widths of the cells to the left and the right of the input.

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 to avoid "collisions" between the ranges.

It now looks like this:

The draggable thumb should be invisible, so we'll set that to transparent, and the cursor should change to ew-resize when hovering:

Then, when using keyboard-navigation, :focus-visible is used to show the thumb, styled like this:

And because it's <input type="range">, you can use arrow-keys to de/increase the column widths! The widths are stored as CSS Custom Properties on the table:

--c0:23; --c1:26; --c2:25; --c3:26;

These are then used on the thead th-cells:

<th style="width: calc(1% * var(--c0));">ID</th>

I've made a JavaScript, you can add to any table — but beware(!) : I haven't used it in production yet - it might need tweaks and fixes.

You can grab both CSS and JS from this Pen.

NOTE: This is a proof-of-concept. It's to show how we get a lot "out-of-the-box" when using native HTML-controls vs. writing loads of JavaScript. If you refine the code / come up with ways to make it better, please fork the Pen, and paste the link in the comments below.

Thanks for reading!

UPDATE 02/05/2021: I've added styling for Firefox, as well as a small JavaScript-hack to run an event, that'll position the sliders correctly (only an issue in Firefox).