No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Slider
import { Slider } from '@proton/atoms';
() => {
    const [value, setValue] = useState(25);

    return (
        <div className="p-7">
            <Slider value={value} onChange={setValue} />
        </div>
    );
}
Marks
You can use the slider with "marks" for the min & max values.
Color
All Theme colors are available to color the Slider with.
Size
The Slider comes in two sizes "small" & "medium", where "medium" is the default when omitted.
Steps
The Slider is configurable to only allow values that round to a nearest "step" via the step property. If set, the thumb of the Slider won't move until the pointer that is dragging it is closer to a different step-point than the one where it currently is. In this configuration, the slider displays the real internal value of the slider as opposed to defaulting to Math.round, formatted based on the number of decimals found in the specified step value.
Min & Max
The min & max properties allow specifying in which numeric interval the Slider should operate.
Although it doesn't fit the semantics of the concept of min & max, it is technically possible to have max be smaller than min if one wishes to invert the directionality of the Slider.
Custom value display format
The getDisplayedValue prop allows you to apply custom formatting to the real internal value of the slider. In the case where no step is specified, this value is a decimal as opposed to an integer value, however by default Math.round is used to format the real internal value for display.
Props
The Slider interface supports all additional html attributes of the <input /> element via rest spreading.
No inputs found for this component. Read the docs