input type="range" and then figure out the CSS you need (which, alas, involves lots of vendor prefixes).
Monday, May 11th, 2020
Wednesday, February 19th, 2020
Have fun with this little machine, tweaking the parameters for generating a Joy Division/Jocelyn Bell-Burnell data visualisation.
The interface is quite delightful!
Thursday, May 31st, 2018
This ever-growing curated collection of interface patterns on CodePen is a reliable source of inspiration.
Thursday, November 23rd, 2017
Brad always said that carousels were way to stop people beating each other up in meetings. I like the way Heydon puts it:
Carousels (or ‘content sliders’) are like men. They are not literally all bad — some are even helpful and considerate. But I don’t trust anyone unwilling to acknowledge a glaring pattern of awfulness. Also like men, I appreciate that many of you would rather just avoid dealing with carousels, but often don’t have the choice. Hence this article.
Tuesday, August 29th, 2017
A good introduction to variable fonts, and an exploration of the possible interface elements we might use to choose our settings: toggles? knobs? sliders? control pads?
Thursday, July 20th, 2017
Sunday, June 25th, 2017
A look at the feedback needed for a slider control that feels “right”.
You can get most of the behavioural (though not styling) suggestions in HTML by doing this:
<form> <input type="range" min="0" max="100" value="50" onchange="amount.value=this.value" onmousemove="amount.value=this.value"> <output name="amount">50</output> </form>
Wednesday, June 1st, 2016
You’re supposed to be able to create two-handled sliders with
input type="range" but the browser support isn’t there yet. In the meantime, Lea has created a nice lightweight polyfill.
Monday, November 4th, 2013
I hate carousels, but if you’re going to have one, this progressively enhanced approach looks pretty good.