@fluentui/react-slider
TypeScript icon, indicating that this package has built-in type declarations

9.1.86 • Public • Published

@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:

  1. yarn start
  2. 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.

Readme

Keywords

none

Package Sidebar

Install

npm i @fluentui/react-slider

Weekly Downloads

92,082

Version

9.1.86

License

MIT

Unpacked Size

313 kB

Total Files

41

Last publish

Collaborators

  • sopranopillow
  • microsoft1es
  • justslone
  • chrisdholt
  • miroslavstastny
  • levithomason
  • uifabricteam
  • uifrnbot
  • dzearing
  • layershifter
  • ling1726
  • travisspomer