logo

Lumina Design

ComponentsIcons
Installation
AccordionAppHeaderAutoCompleteAvatarBottomNavigationBreadcrumbButtonCarouselCheckboxChipColumnDataTableDatePickerDialogFloatingButtonFloatingMenuInputFieldLinkMenuDropdownNextToastProviderProgressRadioButtonRangeSliderResizablePanelSelectDropDownSideBarTabSelectTabsTagTextTextAreaThemeProviderToastProviderToggleInputToggleSwitchTooltip

RangeSlider

The RangeSlider component is a UI control that allows users to select a range of values by sliding a handle along a track. It's particularly useful for filtering options within a range, such as setting price limits in an e-commerce site, adjusting volume or brightness in media applications, or selecting a date range in a calendar app. The visual and interactive nature of the RangeSlider makes it a user-friendly alternative to traditional input fields for numerical ranges.

Code

import RangeSlider from "@lumina-design/core/RangeSlider";
    
<RangeSlider
  value={sliderVal}
  start={0}
  min={0}
  max={100}
  step={1}
  onChange={(val) => setSliderVal(val)}
  label={<span>LABEL</span>}
  showValue={true}
/>