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	Default	Description
`children`	`ReactNode`	-	The children of the component. A function may be provided to alter the children based on component state.
`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.
`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`	`number`	100	The slider's maximum value.
`minValue`	`number`	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`	`Orientation`	'horizontal'	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`	`number`	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	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>`	-

Accessibility

Property	Type	Default	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