Slider

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

Grundlagen

Slider ermöglichen es Usern, einen Wert innerhalb eines definierten Zahlenbereichs auszuwählen. Die Bedienung wirkt intuitiv, da die Kombination aus Interaktivität und visuellem Feedback an vertraute physische Bedienelemente erinnert (z. B. Regler oder Schiebeschalter).

Slider eignen sich besonders, wenn ungefähre Werte ausreichend sind. Soll ein exakter Zahlenwert gewählt werden, ist ein NumberField die bessere Wahl.

Best Practices

Achte bei der Verwendung eines Sliders darauf, dass ...

Min-, Max- und Default-Werte logisch für die User gewählt sind.
die Schrittweite (step) sinnvoll gewählt wird und nicht zu viele kleine Schritte enthält.
das beschreibende Label (neben der Unit) kurz und verständlich ist.
bei Bedarf ein InitialMarker (durch showInitialMarker) gesetzt wird, damit User den Startwert erkennen können.

Verwendung

Verwende einen Slider, um ...

Werte eines definierten Bereichs schnell anzupassen.
Einstellungen zu justieren, die ein direktes Feedback erfordern, wie etwa Lautstärke, Helligkeit oder Zoomstufen.
einen Bereich darzustellen, der sich durch visuelles Ausprobieren leichter erfassen lässt als durch direkte Eingabe in ein NumberField.

Playground

Verwende <Slider />, um einen Slider darzustellen.

Dem Slider können optional ein Min-, Max- und Default-Wert sowie die Step-Größe mitgegeben werden. Der Default-Wert kann über das Property showInitialMarker auf dem Slider markiert werden. Außerdem werden diverse Formate und Einheiten unterstützt (s. Intel.NumberFormat ).

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>

Kombiniere mit ...

React Hook Form

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

Properties

Property	Type	Default	Description
`showInitialMarker`	`boolean`	-	Whether the marker for the initial value should be visible
`isReadOnly`	`boolean`	-	Whether the component is read only.
`isInvalid`	`boolean`	-	Whether the component is invalid.
`sliderOnly`	`boolean`	-	Hide Buttons, Label and Value
`wrapWith`	`ReactElement<unknown, string \| JSXElementConstructor<any>>`	-
`ref`	`Ref<HTMLSpanElement>`	-	Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see React Docs
`key`	`Key`	-
`className`	`ClassNameOrFunction<SliderRenderProps>`	'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.
`formatOptions`	`NumberFormatOptions`	-	The display format of the value label.
`minValue`	`number`	0	The slider's minimum value.
`maxValue`	`number`	100	The slider's maximum value.
`isDisabled`	`boolean`	-	Whether the whole Slider is disabled.
`value`	`TimeValue`	-	The current value (controlled).
`defaultValue`	`TimeValue`	-	The default value (uncontrolled).
`id`	`string`	-	The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
`step`	`number`	1	The slider's step value.
`orientation`	`Orientation`	'horizontal'	The orientation of the Slider.
`children`	`ReactNode`	-	The children of the component. A function may be provided to alter the children based on component state.
`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.
`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.
`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.
`dir`	`string`	-
`lang`	`string`	-
`hidden`	`boolean`	-
`inert`	`boolean`	-
`translate`	`"yes" \| "no"`	-
`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).

Events

Property	Type	Default	Description
`onChange`	`((value: TimeValue) => 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>`	-
`onClickCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onAuxClick`	`MouseEventHandler<HTMLDivElement>`	-
`onAuxClickCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenu`	`MouseEventHandler<HTMLDivElement>`	-
`onContextMenuCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClick`	`MouseEventHandler<HTMLDivElement>`	-
`onDoubleClickCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseDown`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseDownCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseEnter`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseLeave`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMove`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseMoveCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOut`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOutCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOver`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseOverCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUp`	`MouseEventHandler<HTMLDivElement>`	-
`onMouseUpCapture`	`MouseEventHandler<HTMLDivElement>`	-
`onTouchCancel`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchCancelCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEnd`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchEndCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMove`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchMoveCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStart`	`TouchEventHandler<HTMLDivElement>`	-
`onTouchStartCapture`	`TouchEventHandler<HTMLDivElement>`	-
`onPointerDown`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerDownCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMove`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerMoveCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUp`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerUpCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancel`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerCancelCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerEnter`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerLeave`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOver`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOverCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOut`	`PointerEventHandler<HTMLDivElement>`	-
`onPointerOutCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onGotPointerCaptureCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onLostPointerCaptureCapture`	`PointerEventHandler<HTMLDivElement>`	-
`onScroll`	`UIEventHandler<HTMLDivElement>`	-
`onScrollCapture`	`UIEventHandler<HTMLDivElement>`	-
`onWheel`	`WheelEventHandler<HTMLDivElement>`	-
`onWheelCapture`	`WheelEventHandler<HTMLDivElement>`	-
`onAnimationStart`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationStartCapture`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEnd`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationEndCapture`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIteration`	`AnimationEventHandler<HTMLDivElement>`	-
`onAnimationIterationCapture`	`AnimationEventHandler<HTMLDivElement>`	-
`onTransitionCancel`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionCancelCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEnd`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionEndCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRun`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionRunCapture`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStart`	`TransitionEventHandler<HTMLDivElement>`	-
`onTransitionStartCapture`	`TransitionEventHandler<HTMLDivElement>`	-

Accessibility

Property	Type	Default	Description
`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.
`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.