Building the new Utopia homepage | Trys Mudford
Trys has written up how he made that nifty little resizing widget on the Utopia homepage.
Link tags: slider
11
Nils Binder’s Website
The “Adjust CSS” slider on this delightful homepage is an effective (and cute) illustration of progressive enhancement in action.
Creating an Accessible Range Slider with CSS | a11y with Lindsey
If you want an accessible slider component, the trick isn’t to use a whole load of JavaScript. The trick is to use the native input type="range" and then figure out the CSS you need (which, alas, involves lots of vendor prefixes).
Slopes | Tinkersynth
Have fun with this little machine, tweaking the parameters for generating a Joy Division/Jocelyn Bell-Burnell data visualisation.
The interface is quite delightful!
Design Patterns on CodePen
This ever-growing curated collection of interface patterns on CodePen is a reliable source of inspiration.
A Content Slider
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.
User Interfaces for Variable Fonts · An A List Apart Article
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?
Designing The Perfect Slider – Smashing Magazine
If you thought Vitaly’s roundup of date pickers was in-depth, wait ‘till you get a load of this exhaustive examination of slider controls.
It pairs nicely with this link.
Implementing a slider well
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>
Introducing Multirange: A tiny polyfill for HTML5.1 two-handle sliders | Lea Verou
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.
Wallop Slider
I hate carousels, but if you’re going to have one, this progressively enhanced approach looks pretty good.