Package Exports

@fluentui/react-slider
@fluentui/react-slider/lib-commonjs/Slider
@fluentui/react-slider/lib-commonjs/Slider.js
@fluentui/react-slider/lib-commonjs/index.js
@fluentui/react-slider/lib/Slider
@fluentui/react-slider/lib/Slider.js
@fluentui/react-slider/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@fluentui/react-slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@fluentui/react-slider

React Slider components for Fluent UI React

The Slider component 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.

STATUS: WIP 🚧

These are not production-ready components and should never be used in product. This space is useful for testing new components whose APIs might change before final release.

Usage

To import Slider:

import { Slider } from '@fluentui/react-slider';

Once the Slider component graduates to a production release, the component will be available at:

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 origin={2} />
<Slider step={10} keyboardStep={2} />
<Slider marks={true} max={10} />
<Slider marks={[30, 40, 80, 100]} />
<Slider marks={[2, { value: 50, label: "50" }]} />
<Slider marks={[2, { value: 50, mark: <MyComponent/>, label: <MyComponent/> }]} />
<Slider size="small" />