Slider

Slider ermöglichen die Auswahl von Zahlenwerten innerhalb eines definierten Wertebereichs.

150 GB Speicherplatz(optional)

import {
  Label,
  Slider,
} from "@mittwald/flow-react-components";

<Slider
  formatOptions={{
    style: "unit",
    unit: "gigabyte",
  }}
  minValue={50}
  maxValue={750}
  defaultValue={150}
  step={50}
  showInitialMarker
>
  <Label>Speicherplatz</Label>
</Slider>

Best Practices

Wähle Min-, Max- und Default-Werte logisch für die User.
Wähle die Schrittweite (step) sinnvoll, ohne zu viele kleine Schritte.
Formuliere das beschreibende Label neben der Unit kurz und verständlich.
Setze bei Bedarf einen InitialMarker über showInitialMarker. So erkennen User den Startwert.

Kombiniere mit ...

React Hook Form

Weitere Details zur Formularlogik und -validierung findest du in der Component Form (React Hook Form)‍.

Properties

Property	Type	Description
`children`	ReactNode	The children of the component. A function may be provided to alter the children based on component state.
`className`	ClassNameOrFunction<SliderRenderProps>default: 'react-aria-Slider'	The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state.
`defaultValue`	TimeValue	The default value (uncontrolled).
`dir`	string
`formatOptions`	NumberFormatOptions	The display format of the value label.
`hidden`	boolean
`id`	string	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`inert`	boolean
`isDisabled`	boolean	Whether the whole Slider is disabled.
`isInvalid`	boolean	Whether the component is invalid.
`isReadOnly`	boolean	Whether the component is read only.
`lang`	string
`maxValue`	numberdefault: 100	The slider's maximum value.
`minValue`	numberdefault: 0	The slider's minimum value.
`name`	string	The name of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
`orientation`	horizontal (default) \| vertical	The orientation of the Slider.
`render`	DOMRenderFunction<"div", TooltipRenderProps>	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: - You must render the expected element type (e.g. if `<button>` is expected, you cannot render an `<a>`). - Only a single root DOM element can be rendered (no fragments). - You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
`showInitialMarker`	boolean	Whether the marker for the initial value should be visible
`sliderOnly`	boolean	Hide Buttons, Label and Value
`slot`	string	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent.
`step`	numberdefault: 1	The slider's step value.
`style`	StyleOrFunction<TooltipRenderProps>	The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state.
`translate`	yes \| no
`value`	TimeValue	The current value (controlled).
`wrapWith`	ReactElement<unknown, string \| JSXElementConstructor<any>>	A React element the component is wrapped with. The element is cloned and receives the component as its only child — useful to render the component inside a link, a tooltip trigger or any other wrapper without changing the surrounding markup.

Events

Property	Type	Description
`onChange`	((value: TimeValue \| null) => void)	Handler that is called when the value changes.
`onChangeEnd`	((value: number \| number[]) => void)	Fired when the slider stops moving, due to being let go.
`onClick`	MouseEventHandler<HTMLDivElement>

Accessibility

Property	Type	Description
`aria-describedby`	string	Identifies the element (or elements) that describes the object.
`aria-details`	string	Identifies the element (or elements) that provide a detailed, extended description for the object.
`aria-label`	string	Defines a string value that labels the current element.
`aria-labelledby`	string	Identifies the element (or elements) that labels the current element.

Components

Integrations