Implement Spectrum slider components

[devongovett]

🙋 Feature Request

Implement the Spectrum Slider and RangeSlider components using the existing useSlider and useSliderThumb hooks.

💁 Possible Solution

The API should look like this:

interface SpectrumBarSliderBase<T> extends BaseSliderProps, ValueBase<T> {
  orientation?: Orientation,
  labelPosition?: LabelPosition,
  /** Whether the value's label is displayed. True by default if there's a `label`, false by default if not. */
  showValueLabel?: boolean,
  /** The content to display as the value's label. Overrides default formatted number. */
  valueLabel?: ReactNode
}

interface SpectrumSliderTicksBase {
  // Enables tick marks if > 0.
  // Ticks will be evenly distributed between the min and max values.
  tickCount?: number,

  // Enables tick labels.
  // By default, labels are formatted using the slider's number formatter,
  // but you can use the tickLabels prop to override these with custom labels.
  showTickLabels?: boolean,
  tickLabels?: Array<ReactNode>
}

interface SpectrumSliderProps extends SpectrumBarSliderBase<number>, SpectrumSliderTicksBase {
  /** Whether a fill color is shown between the start of the slider and the current value. See https://spectrum.adobe.com/page/slider/#Fill */
  isFilled?: boolean,
  /** The offset from which to start the fill. See https://spectrum.adobe.com/page/slider/#Fill-start */
  fillOffset?: number,
  /** The background of the track, e.g. a CSS linear-gradient(). See https://spectrum.adobe.com/page/slider/#Gradient */ 
  trackBackground?: string
}

interface SpectrumRangeSlider extends SpectrumBarSliderBase<RangeValue<number>>, SpectrumSliderTicksBase {}

The existing useSlider and useSliderThumb hooks can be used to implement this. These hooks allow an arbitrary number of thumbs per slider, but Spectrum will be more restricted. The Slider component will support only one thumb with a value prop that is a single number, and the RangeSlider component will support two thumbs with a value prop that is a range object with a start and end property. This should be able to be normalized within the Spectrum components rather than creating new ARIA/Stately hooks, but we could move those out later if we find it a common shortcut people need.

Intl.NumberFormat should be used for number formatting. The option in Spectrum to show the +/- sign is available in the unitDisplay format option, but it is not yet implemented in Safari so we may need to polyfill it (TBD). Also the unit options don't include px, so we will potentially need to find an alternate solution to that later on.

💻 Examples

See https://spectrum.adobe.com/page/slider/ and contributions (internal) for design mocks, and https://opensource.adobe.com/spectrum-css/slider.html for the existing Spectrum CSS implementation.

🧢 Your Company/Team

RSP

[mischnic]

(unitDisplay signDisplay)