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}
/>