Labs · Interface component In development
Split Slider.
A before and after slider with the control moved out of the picture. The split is a hairline seam; the handle sits on a clean rail beside it.
What it is
Most before and after sliders park a chunky grab handle in the middle of the image, directly over the thing you are trying to look at.
This one gets out of the way. The image is left whole, divided by a hairline seam, and the control lives on its own rail underneath: a single gorse circle on a teal line. Press it and the rail lights up from where you touched it, then ticks under your thumb at every quarter. It came out of the Onsite Blasting work, where the job is a surface before and the same surface after.
- Type
- Interface component
- Status
- In development
- Built with
- Astro · CSS · No deps
- Made by
- Andrew A. Stewart
Try it
Where the split falls.
This is the working component. Drag the circle along the rail, drag the picture itself, or tab to the handle and steer it with the arrow keys.
Stand-in surfaces rather than a real job, so the mechanics are the thing on show. Arrows nudge, shift jumps to the next stop, Home and End throw it fully open or closed. On a phone you will feel each quarter.
The detail
Small things, done properly.
The control leaves the picture
No grab handle sitting over the image. Just a hairline seam where the two sides meet, and a circle on a rail beneath it, so nothing covers the work you are showing.
Magnetic quarters
It pulls gently to 25, 50 and 75 per cent, so a fair side-by-side is easy to land on and hard to nudge off. Switch the magnets off if you want a free hand.
It ticks under your thumb
On a phone, every quarter the handle catches gives a 10ms tap through the Vibration API, so a fair split is something you feel rather than squint at. Silenced by Do Not Disturb, and switchable.
Horizontal or vertical
A wide shot splits left to right; a tall one splits top to bottom. The rail moves round to the side and the whole thing keeps working the same way, keyboard included.
Works from the keyboard
Arrows nudge a per cent at a time, shift jumps to the next stop, Home and End throw it fully open or closed. It reports as a slider, with its position read out as you go.
One property, no reflow
The whole split is a clip-path driven by a single custom property, so dragging never re-lays the page out. It stays smooth on a phone.
Still in development. Next up: dropping in a client's own pair of images, and the same per-project theming the rest of the Labs components use.
Got work where the change is the point?
Split Slider ships with sites where showing the difference matters.