useSlider() and useSliderState() for a Slider component

I’d like to implement useSlider() for @react-aria and useSliderState() for @react-stately. I believe the first step is to draft an RFC?

Before I get started, though, if folks from the Spectrum team had already thought about what the API would look like, it’d be very helpful to get a brain dump first!

[chungwu]

Hi all! Finally got around to pulling together a draft PR for this 😄

You’ll find it in #809

I built the react-aria and react-stately hooks, and a few toy components using those hooks, and some Storybook stories, so we can get a feel for how the component interactions work, and what the DX is like in using these hooks.

[majornista]

@chungwu You’re close. I would use a label for the div with id="label" and have its for/htmlFor attribute point to the id attribute on the first input, which could be assigned on the React component, but if not be generated internally. Each input should have aria-labelledby="label THE-GENERATED-ID-FOR-THE-INPUT". So that the Min should announce as “label Minimum”, and the Max should announce as “label Maximum”.

Modified version:

<div role="group" aria-labelledby="range-input-label-0">
  <label id="range-input-label-0" for="range-input-0">Whatever I passed to label prop</label>
  <div className="thumbs">

    <div className="thumb">
      <input id="range-input-0" aria-labelledby="range-input-label-0 range-input-0" type="range" aria-label="Minimum" aria-valuemin/max/now=.../>
      <div className="thumb-knob"/>
    </div>

    <div className="thumb">
      <input id="range-input-1" aria-labelledby="range-input-label-0 range-input-1" type="range" aria-label="Maximum" aria-valuemin/max/now=.../>
      <div className="thumb-knob"/>
    </div>

  </div>
</div>

Small hint, put thumb-knob after the input so you can render the focused style using adjacent CSS selector.