Range

[jeffreylauwers]

We willen graag meer leren over het Range component. In welke vorm, of vormen, wordt deze momenteel ingezet en toegepast binnen jouw organisatie?

Deel hieronder een link naar Figma, Storybook of screenshots. Met deze informatie kunnen we bewijzen dat het component onderdeel moet worden van de NL Design System component library.

Daarnaast wordt het delen van onderzoek gewaardeerd. Dus heb je zelf onderzoek gedaan en zijn er inzichten voor dit component? Dan horen we dit ook graag!

Link naar bericht in Slack

---

Naam

Range

Doel

Invoerveld voor een getal dat je bij benadering kunt kiezen door te schuiven tussen een minimum en maximum.

Ook bekend als

Slider, Range Slider

Gerelateerde componenten

Number Input

Onderzoek

Slider Design: Rules of Thumb - Nielsen Norman Group
Artikel over het ontwerp van Range Sliders.

Balancing Exploration and Precision with Sliders - Nielsen Norman Group
Artikel over het gebruik van Range Sliders.

Overly incremented sliders: "Fun" tools that become obstacles - Nielsen Norman Group
Inzicht uit onderzoek waar een Range Slider werd toegepast.

5 Requirements for Slider Interfaces - Baymard Institute
Artikel met tips voor Range Sliders gebaseerd op onderzoek.

Sliders degrade UX (so do this instead) - Adam Silver
Artikel waarin wordt uitgelegd waarom slides problemen kunnen geven, en welke form controls je beter kunt inzetten.

[jeffreylauwers]

Amsterdam

• Figma
• 'Live' te bekijken op onderzoek.amsterdam.nl

---

Screenshots / Varianten

Figma

Default

---

Notities

• Onder de naam: Slider.
• Dubbele thumbs.
• Optie voor input functionaliteit.
• Inputfield onder Range.
• Thumb is rond en heeft dezelfde blauwe kleur als de fill en track. Thumb heeft een witte border.

[jeffreylauwers]

DUO

Documentatie website

---

Screenshots / Varianten

Documentatie website

---

Notities

• Onder de naam: Slider.
• Vaste input functionaliteit.
• Inputfield links van Range.
• Tijdens het schuiven wordt er boven de thumb een tooltip met waarde getoond.
• Thumb is rond en heeft dezelfde kleur als de fill.
• Fill is blauw.
• Track is lichtgrijs.

[jeffreylauwers]

Rotterdam

Niet meer van toepassing!

Rotterdam gaat dit component niet meer aanbieden.

---

Screenshots / Varianten

Figma

Default

Range slider

---

Notities

• Onder de naam: Sliders.
• Default is enkele thumb.
• Bij default mogelijkheid om waarde rechts van track te tonen.
• Range is 2 thumbs.
• Bij range worden waarden onder de thumb getoond.
• Thumb is vierkant en heeft 'grip' visualisatie.
• Fill is groen.
• Variant voor een disabled state.