Het probleem van de rangeslider
De HTML range input is het vage broertje van de number input. Waar number bedoeld is om een specifieke waarde toe te kennen, is de range om een ‘niet zo’ specifieke waarde binnen een reeks of gebied aan te duiden.
<input type=range>
De user interface van de HTML range slider is geleend uit het echte leven: een rechte goot waarin je een schuif met enige weerstand op en neer kunt bewegen. Denk aan een mengpaneel in een geluidsstudio.
Maar wat is het probleem dan?
Tijdens het ontwikkelen van websites en webapplicaties heb ik wel eens op het punt gestaan om een range slider toe te passen. Omdat het kon EN omdat het vanzelfsprekend geschikt leek. Maar in elk scenario bleek na onderzoek een andere oplossing beter.
De range slider is volgens mij maar heel beperkt geschikt als user interface. Zelf heb ik het maar 1 keer toegepast. Dat was om een emotie aan te geven met directe feedback in de vorm van een heel boos gezicht tot een heel blij gezicht.
Okay, waarin faalt de range input mijns inziens?
Issue 1. range input in plaats van number input
Ik zie meer dan eens dat de range input wordt gebruikt om specifieke waardes aan te geven. Daar is die eigenlijk niet voor bedoeld. De W3C zegt hierover:
“The input range element represents a control for setting the element’s value to a string representing a number, but with the caveat that the exact value is not important, letting UAs provide a simpler interface than they do for the number state.”
Klinkt misschien wat vaag, maar kies je een exacte waarde tussen 1 en 10, dan gebruik je een number input. Maar een range tussen ‘langzaam’ en ‘snel’ is minder exact. Dan zou een range input de beste keus zijn.
Issue 2. Geen directe output
Een range input levert geen real-time output van de waarde. Er is geen standaard feedback optie ingebouwd. Chris Coyer van CSS Tricks heeft daar overigens wel iets op bedacht: Value bubbles, maar daar heb je wel extra HTML, CSS en JavaScript voor nodig.
Issue 3. Browser weergave en CSS misbruik
Elke moderne browser heeft zijn eigen versie van een range slider weergave waardoor er verwarring kan ontstaan bij gebruikers. De slider handle kan rond, rechthoekig of andersvormig zijn, de goot een enkele lijn, stippellijn of dubbele lijn en de stijl zwaait van het skeuomorfe naar het superplatte toe.
Je kunt CSS toepassen om een consistente weergave te krijgen in alle browsers, maar voor elke gebruiker die je daarmee helpt, breng je een andere ermee in verwarring.
Stijl een range slider niet te plat. Zo bekend – en daarmee herkenbaar – is deze input type niet bij het grote publiek.
Issue 4. De slider handle touch area is te klein
Op apparaten met aanraakschermen zoals smartphones en tablets zie je dat een gebruiker soms moeite heeft om de range handle goed op en neer te schuiven. Je verliest soms de ‘grip’ van de handle. Dat komt omdat de touch area te klein is voor je dikke duim (en wijsvinger). Je kunt de touch area vergroten met CSS, maar als een native control van zichzelf niet lekker werkt, faalt het naar mijn mening.
Issue 5. Duim of wijsvinger zit in de weg
Vooral bij kleinere touch screens zie je niet precies waar de handle zich bevindt als je die met je vinger bestuurt. Hier zijn 2 dingen aan de hand:
1. Soms staat er aan weerzijde van een range slider een min en een max waarde, al dan niet real time gestuurd. Jouw bijna altijd diagonaal op het scherm gepositioneerde vinger kan de min. of max. waarde bedekken, waardoor je niet precies ziet wat je positie is.
2. De handle is visueel verdwenen op het moment dat je vinger het scherm aanraakt. Het scherm geeft geen prikkels of feedback aan je vinger, het zijn jouw ogen die je vertellen waar je heen moet schuiven met je vinger. Het is daarom best ingewikkeld om een range slider subtiel te besturen op aanraakschermen.
Issue 6. Multi range sliders
Een multi range slider is geen standaard HTML5 input type, maar meestal een jQuery plugin. Of een plugin van een andere relatief zware JavaScript library.
Toepassing
Bijvoorbeeld, ik wil een filter toepassen op de aanschafwaarde van een auto. De range is van 0 tot 50.000 en ik schuif handle 1 naar 10.000 en handle 2 naar 15.000.
Mooi gefilterd toch? Maar je voert 2 handelingen uit met een niet optimale gebruikerservaring – zie mijn eerdere issues.
Waarom niet heel simpel 2 number inputs gebruiken voor je min en max waarde? Dan krijg je er op aanraakschermen ook nog een mooie gebruikersinterface bij!
Wat mij betreft is de multi range een onding.
Kortom
De HTML5 range input is maar zeer beperkt effectief inzetbaar. Je lost het vaak eenvoudiger op met andere input types. Wie kan mij voorbeelden geven van effectieve range sliders?
Ieder zijn mening.
Dit artikel is eerder verschenen op Heeftstijl - Online Webdesign Magazine