@fluentui/react-slider
Slider components for Fluent UI React
Slider allows users to quickly select a value (or range) by dragging a thumb across a rail. It is often used when setting values with a relaxed precision such as audio volume and screen brightness.
Usage
To import Slider:
import { Slider } from '@fluentui/react-components';
Examples
<Slider />
<Slider defaultValue={3} />
<Slider value={sliderValue} onChange={sliderOnChange} />
<Slider min={0} max={10} />
<Slider vertical />
<Slider disabled />
<Slider step={10} />
<Slider size="small" />
See Fluent UI Storybook for more detailed usage examples.
Alternatively, run Storybook locally with:
yarn start
- Select
react-slider
from the list.
Specification
See SPEC.md.
Migration Guide
If you're upgrading to Fluent UI v9 see MIGRATION.md for guidance on updating to the latest Slider implementation.