feat(slider): add range slider

[m4olivei]

Closes #14567

Enhancement to the current React Slider component, allowing for a range selection of two values.

Requirements: https://ibm.ent.box.com/notes/1252927738733?s=4s8h59gazpuxv0fyxb1xq1pcxx6qvcwl
Designs: https://www.figma.com/file/Jk3pWNBG6ZWIRoldq2tM1x/Range---Slider-Enhancement?type=design&node-id=425-22406&mode=design&t=7ah75PWKFPtNMLUj-0

Mostly done and ready for review. Things on my radar still to do:

• Rewrite Slider component to hooks, Will happen in a follow up PR
• Write tests against the two handle functionality
• How to internationalize announcement text for when a value is auto-corrected
• e2e tests
• Design review

Changelog

New

• ariaLabelInputUpper optional prop for the Slider component to use as the aria-label attribute for the upper input
• nameUpper optional prop for the Slider component that serves as the name attribute for the upper input
• valueUpper optional prop for the Slider component that serves as the default value for the upper value of the range
• twoHandles prop for the SliderSkeleton component which enhances the SliderSkeleton to be a range slider skeleton

Changed

• When the new valueUpper prop is set, all of value, name and ariaLabelInput props are applied to the lower bound.
• The onBlur callback function will provide a handlePosition: HandlePosition key in it's data argument to indicate which input / handle was changed to the given value.
• The onChange callback function will provide value and valueUpper for when the Slider has two handles. value refers to the lower handle value when the Slider has two handles.
• The onRelease callback function will provide value and valueUpper for when the Slider has two handles. value refers to the lower handle value when the Slider has two handles.

Testing / Reviewing

Extensive changes were made to the Slider component to accomodate this feature. Thourough regression testing should be done for the Slider with a single handle.

• Using the Slider > Default story, regression test comparing to the current version.
• Visit the Slider > Two Handle Slider story.
• Test dragging each handle. In particular:
  • The handle nearest to the users click/touch on the track should activate and be the handle manipulated
  • The corresponding input should react, updating the value as the user drags
  • The user should not be allowed to go beyond the opposite handle
• Manipulate the values of the inputs manually or via keyboard arrow keys. Values should update and corresponding handles should update appropriately
• Test keyboard navigation and focus states.
  • The user should be able to tab focus on each handle
  • When focused on a handle the arrow keys should work to manipulate the handle
  • Holding shift and using the arrow keys should apply a multiplier to move the handle by a greater amount each step
• Test with a screen reader
  • The screen reader should read each handle as a slider and speak the current value as the handle is moved just like the current single handle Slider.

The Slider > Playground story is the best place for testing various Slider configurations (single and two handle variations).

• Set a value for valueUpper. This effectively puts the slider in two handle mode.
• Turn on readOnly. Slider should hide the handles and show the inputs as Read Only. Compare the visual style of the inputs to the Text Input component.

Finally, the Slider Skeleton component has also been updated to support a twoHandles boolean prop.

• Visit Slider > Two Handle Skeleton
• Should show the skeleton with the range handles

[netlify]

✅ Deploy Preview for carbon-components-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	7d97253
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-components-react/deploys/64bece1f31d1ad0008fde58a
😎 Deploy Preview	https://deploy-preview-14297--carbon-components-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	7d97253
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/64bece1f988ecd0008f7d970
😎 Deploy Preview	https://deploy-preview-14297--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	d95b07c
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/652fd63b23a3520008aa5f53
😎 Deploy Preview	https://deploy-preview-14297--v11-carbon-react.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	8af20a3
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/652edc40104ded0008f7acee
😎 Deploy Preview	https://deploy-preview-14297--carbon-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[tay1orjones]

This is awesome! Playing around with it some I see a few nits but they're things already on your list to address (bound events).

If you think it would be helpful, this component is due to be converted from a class-based component to a functional component. If you're interested, this could be a big improvement to readability of the component being able to encapsulate some of the logic into useEffect and useLayoutEffect blocks. No sweat if not, but thought I'd mention it.

[m4olivei]

Thanks!

If you think it would be helpful, this component is due to be converted from a class-based component to a functional component. If you're interested, this could be a big improvement to readability of the component being able to encapsulate some of the logic into useEffect and useLayoutEffect blocks. No sweat if not, but thought I'd mention it.

I'm glad you brought that up! I wondered if you all had any such initiative. I'll try to include that as well here as time allows.

[KevinCamelo]

I think you're spot on with your suggestion of a background color @m4olivei, I think it might need a small tweak.

With the addition of a background-color on the entire icon, it leads to a middle indicator that hides and appears arbitrarily. In addition, the background on both sides creates a second line-segment.

Hide and show middle indicator	Second line segment

Instead, I think we could have the background-color only appear on the rail directly inside the icon area on the right-hand side. That way, the middle indicator will always be visible, the rail isn't split into two line-segments, and makes it easier to read what is actually being selected. The same treatment would be provided to the focus state. The color used here would likely be $layer-02 if I'm not mistaken.

Here's what that proposal looks like:

[m4olivei]

Yep, makes sense @KevinCamelo . I've implemented that. Take a look. Be sure as well to jump between themes and check RTL to make sure I covered us in those use cases.

[m4olivei]

Forgot to tag @laurenmrice . I think we've addressed the feedback from your last comment. Could you take a look as well? Let me know if you need any adjustments. If all is well Percy needs to be approved for the visual tweaks we've made with the last few commits.

[mbgower]

Looks good! I entered in a letter in an input just to see what would happen and got a placeholder error. Wasn't sure whether that gets resolved elsewhere or we need to have all error messages composed as part of this. I was looking at https://deploy-preview-14297--v11-carbon-react.netlify.app/?path=/story/components-slider--two-handle-slider#storybook-preview-wrapper

[mbgower]

Actually, one other thing I noticed. The slider label is coded as a label, but it doesn't look like it's associated with the two inputs.
I guess "for" is not great for us here, since the attributed can't take two values.... We need the inputs to expose that label as well as their "lower bound" and "upper bound" info so, if this was a slider on price, you'd want to hear something like "price lower bound" and "price upper bound".
I can think of a few of ways of doing this. I'm sure you can think of more. One would involve a group label (which may only announce on the first input, which I think is okay). The other is to concatenate the two strings. A third may be to use a description for part of the label, effectively getting something like "Upper value, price". And I guess a fourth would be to put a span around the label and reuse it that way.
BTW, the label here is "Slider Label", which at the least should be "Slider label" and better, a realistic text string, like "Price range" or whatever.
I see the more primitive APG 2-thumb slider example just hard-codes the concatenation in an aria-label, which is another way, although as a rule I avoid aria-label

[KevinCamelo]

Yep, makes sense @KevinCamelo . I've implemented that. Take a look. Be sure as well to jump between themes and check RTL to make sure I covered us in those use cases.

Looking great, Matthew. Went across all themes— just noting that the selected state seems to not have the correct color across themes. The selected rail should use the border-interactive color token to work across themes. The icon as well does not align with the color in the original slider component.

G10/White

G90/100 (incorrect color on rail and icon)

How it should appear:

To match the dark theme of the OG slider:

For the rail: border-interactive
For the icon: interactive upon click.

Additional info on the icon:

From what I can tell, in the base slider component instead of using theicon-interactive, they use the interactive token to achieve the desired recolor for the icon across themes. If you use icon-interactive the interactive state is white, which would not align with the OG slider.

[m4olivei]

Looks good!

Thanks @mbgower !

I entered in a letter in an input just to see what would happen and got a placeholder error. Wasn't sure whether that gets resolved elsewhere or we need to have all error messages composed as part of this. I was looking at https://deploy-preview-14297--v11-carbon-react.netlify.app/?path=/story/components-slider--two-handle-slider#storybook-preview-wrapper

That gets handled by the user passing a prop, invalidText. The Storybook for the two handle slider passes "Invalid text goes here", it can be customized, but is expected to be general enough to cover any invalid state, of which there are few, given the auto-correction built in.

Actually, one other thing I noticed. The slider label is coded as a label, but it doesn't look like it's associated with the two inputs. I guess "for" is not great for us here, since the attributed can't take two values.... We need the inputs to expose that label as well as their "lower bound" and "upper bound" info so, if this was a slider on price, you'd want to hear something like "price lower bound" and "price upper bound".

Yep. I struggled with this earlier in the development. What I settled on, was that since the single label can't pair to both inputs, I leave the label disconnected (I guess it could be swapped for a <span>). Then I use aria-label on each of the inputs, which is expected to be passed as props (ariaLabelInput and unstable_ariaLabelInputUpper), the Storybook example passes "Lower bound" and "Upper bound" respectively. Using VoiceOver + Chrome, focusing on the input announces "10, Lower bound, stepper", and on the upper input "90, Upper bound, stepper". To acheive your example, you'd simply pass "price upper bound" and "price lower bound".

BTW, the label here is "Slider Label", which at the least should be "Slider label" and better, a realistic text string, like "Price range" or whatever.

I've corrected the casing on that. I kind of want to avoid adopting price for the example, b/c of internationalization, but open to update if you like.

[m4olivei]

Looking great, Matthew. Went across all themes— just noting that the selected state seems to not have the correct color across themes. The selected rail should use the border-interactive color token to work across themes. The icon as well does not align with the color in the original slider component.

Thanks @KevinCamelo , nice catch. I've gone through and corrected those tokens.

[laurenmrice]

Looks good, thank you @m4olivei ⭐️