HomeFoundationsComponents
AccordionAction IconBreadcrumbButtonButton GroupCardCheckboxChipContext Switcher
Data VisualizationComing Soon
Date PickerComing Soon
DialogEmpty State
Form LabelComing Soon
ImageInputLinkListLoaderMenuModalPopoutProgress BarRadioRange SliderScroll BarSelectStepperSwitch
TableComing Soon
TabsTileToastToggle ButtonTooltip
PatternsDevelopmentFAQ
Range Slider
Last Updated on Sep 29, 2022
Sliders allow users to select a value within a defined range.
View Figma ComponentView MAF Storybook

Design Principles

  • Range Sliders are a type of numerical input that allows users to quickly and visually choose from a range of options.
  • They are equivalent to an input(s) functionality, but can be a nicer way for the user to input their data.
  • Using a range slider encourages users to explore and experiment with their data.

Do's and Don'ts

Use if you have 2 numbers that filter the edges of a data set.
Don’t use if the range of numbers would be unknown to the user.
Table of Contents
Component VariantsDesign PrinciplesDo's and Don'ts
Related Components
InputSelect
Copyright © 2022 The Nielsen Company (US), LLC. All Rights Reserved.