Slider

Component Description

The Slider component allows users to quickly select a value by dragging an icon across a bar. It is often used when setting values with a relaxed precision such as audio volume and screen brightness.

Design Spec

Link to Design Spec in Figma

Engineering Spec

Inputs

• @attr size: "small" "medium" | "medium"
• @attr vertical: boolean | false
• @attr current-value: number
• @attr min: number
• @attr max: number
• @attr step: number | 1
  • If set, slider appearance has ticks for each step value
• @attr disabled: boolean | false

Outputs

None

Events

• @change: Fires whenever the slider's value is changed

Slots

• default: child elements such as SliderLabel will be placed in the default slot
• thumb: the draggable element of the slider
• track: the slider's base and used to display the min/max selectable values
• progress-track: the progress indicator when in range mode

CSS Variables

None

Interactions

track

• Clicking on the track moves the thumb to the location of mouse click

Accessibility

• Find the matching component through WCAG's patterns: https://www.w3.org/WAI/ARIA/apg/patterns/
  • https://www.w3.org/WAI/ARIA/apg/patterns/slider/
• Are there any accessibility elements unique to this component?
• List ARIA attributes
  • role="slider" in FAST
  • aria-valuenow in FAST
  • aria-valuemin in FAST
  • aria-valuemax in FAST
  • aria-orientation (if vertical) in FAST
• Does the component support 400% zoom?
• What keyboard behaviors does the component support?
  • Up / Right : Increments slider by Step amount
  • Down / Left: Decrements slider by Step amount
  • PageUp/Up/Right & Shift : Increments the value of the slider by 10 _ step.
  • PageDown /Down/Left & Shift : Decrements the value of the slider by 10 _ step.
  • Home : Sets value to the min prop.
  • End : Sets value to the max prop.

Preparation

• Find the base FAST Component this component will inherit from and document
  • FAST Slider Component
• Check the Fluent UI React V9 Component Spec for differences and document
  • Fluent Slider Spec
  • no defaultValue or value attributes, instead only current-value that specifies the selected range of the slider
  • rail is in Fluent React; track is in FAST Foundation
  • No value indicators to the left/right of slider in FAST Slider. These should be present in Fluent version. This will be handled through slotting in the the SliderLabel component.
• Fluent UI React V9 Storybook for implementation differences and document
  • Fluent React V9 Slider
• Open GitHub issues related to component
  • Slider
• (Optional) Draft implementation
  • [link to draft implementation, if applicable]
• Component Spec authored
  • And reviewed

Implementation

• Initial conformance and unit tests (validate basic functionality)
• Initial documentation
  • Storybook stories
  • README.md covering basic usage
• Uses design tokens for styling
• Renders correctly in High Contrast mode

Validation

• Add tests
  • Unit and conformance tests
  • Bundle size fixtures
  • Performance test scenario
  • Accessibility behavior tests
  • Create an issue and run manual accessibility tests: [link to issue]
• Validate with partners
• Finalize documentation
  • Review and add any missing Storybook stories
  • Finalize migration guide
  • In package.json: Remove the alpha/beta tag from the version number in package.json
  • In package.json: Change beachball's disallowedChangeTypes to "major", "prerelease"