# Slider
Slider ermöglichen die Auswahl von Zahlenwerten innerhalb eines definierten Wertebereichs.
```tsx
import {
Label,
Slider,
} from "@mittwald/flow-react-components";
```
---
# 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)](/04-components/react-hook-form/form).
```tsx
import {
Label,
Section,
Slider,
} from "@mittwald/flow-react-components";
import { useForm } from "react-hook-form";
import {
Form,
SubmitButton,
typedField,
} from "@mittwald/flow-react-components/react-hook-form";
import { sleep } from "@/content/04-components/actions/action/examples/lib";
export default () => {
const form = useForm<{ storage: number }>();
const Field = typedField(form);
return (
);
}
```
---
# 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>` | - | 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. |
| `ref` | `Ref` | - | 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](https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom) |
| `key` | `Key` | - | - |
| `className` | `ClassNameOrFunction` | `'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. |
| `id` | `string` | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| `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). |
| `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` | - | 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 `