feat(slider): resolve parity issue two handle feature

[sangeethababu9223]

Closes #17580

The two handle slider feature, available in React but missing in Web Components, is being added to Web Components.

Changelog

New

The two handle slider feature has been added.

Testing / Reviewing

Go to Slider stories in storybook and it should have a new Two handle slider story under it.

[netlify[bot]]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	6d7dfe4ec5d7d21d917759654ebdcfe8814d3dcd
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-web-components/deploys/67987c0aeda66c00083de443
😎 Deploy Preview	https://deploy-preview-18450--v11-carbon-web-components.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[bot]]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	6d7dfe4ec5d7d21d917759654ebdcfe8814d3dcd
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/67987c0a2913fd000825b87f
😎 Deploy Preview	https://deploy-preview-18450--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[bot]]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	6d7dfe4ec5d7d21d917759654ebdcfe8814d3dcd
🔍 Latest deploy log	https://app.netlify.com/sites/v11-carbon-react/deploys/67987c0a9836620009252590
😎 Deploy Preview	https://deploy-preview-18450--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[bot]]

✅ Deploy Preview for carbon-elements ready!

Name	Link
🔨 Latest commit	67999f80d65ef898c99e293bcb8975232a0e5aa4
🔍 Latest deploy log	https://app.netlify.com/sites/carbon-elements/deploys/67ebc20a7b1715000852f81d
😎 Deploy Preview	https://deploy-preview-18450--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[bot]]

✅ Deploy Preview for v11-carbon-web-components ready!

Name	Link
🔨 Latest commit	185d95dd574c235315d2de62207923fc09b3695b
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-web-components/deploys/684bf94b1ec17500089e2de5
😎 Deploy Preview	https://deploy-preview-18450--v11-carbon-web-components.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 project configuration.

[netlify[bot]]

✅ Deploy Preview for v11-carbon-react ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	185d95dd574c235315d2de62207923fc09b3695b
🔍 Latest deploy log	https://app.netlify.com/projects/v11-carbon-react/deploys/684bf94b70dac0000723269d
😎 Deploy Preview	https://deploy-preview-18450--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 project configuration.

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 84.69%. Comparing base (f9bd1ac) to head (185d95d). Report is 46 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #18450   +/-   ##
=======================================
  Coverage   84.69%   84.69%           
=======================================
  Files         373      373           
  Lines       14710    14710           
  Branches     4795     4845   +50     
=======================================
  Hits        12458    12458           
  Misses       2102     2102           
  Partials      150      150           

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• :package: JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[guidari]

Hey @sangeethababu9223 We can remove the Playground stories and add the controls to the Default stories instead.

[sangeethababu9223]

Hey @sangeethababu9223 We can remove the Playground stories and add the controls to the Default stories instead.

Hey @guidari, I've only worked on Two handle feature, that is why I've not removed the Playground story. For now I've added controls in Two handle story. I was thinking once the other missing features and complete parity check is done playground could be removed.

[sangeethababu9223]

Hey @ariellalgilmore , As per our discussion, I've updated the following:

• Updated the type of value to number.
• Removed the unused invalidActive prop.
• Removed the inline style for cds--slider__filled-track and moved that to the updated lifecycle function.

[sangeethababu9223]

Thanks for the udpates! Testing out the controls:

1. looks like i can still click on the carets when disabled
2. nothing happens on hideTextInput true
3. Once turning on the invalid control I can't turn it off
4. the step counter doesn't seem to be working for me?

Hey @ariellalgilmore , I've worked on first three issues mentioned. I also have added two extra stories for hidden inputs as it is there in react.

About the step counter issue, I couldn't recreate it. For me input and the handles were updating based on the step value.

[alisonjoseph]

@sangeethababu9223 what is the status of this PR?

[sangeethababu9223]

@sangeethababu9223 what is the status of this PR? Hi @alisonjoseph, I'm working on the latest feedback and will update the PR soon.

[sangeethababu9223]

@sangeethababu9223

Focus The focus on the triangle handles needs to be a 1px stroke and not have rounded corners. The focus border should be using color token $focus.

Read-only I can’t view this in React, so don’t know if this is only a WC problem, but for the read-only state, the handles should disappear and the track should be color token $border-subtle and the track:filled should be $border-inverse. You should not be able to interact with the track in the read-only state.

Two handle skeleton This story is missing from WC.

Hey @laurenmrice,

The following changes are done:

• Handles are hidden.
• Slider is no longer interactive when readonly is enabled.
• Track already had $border-subtle as background color, and track filled background is updated to $border-inverse

For Two handle Skelton there is a separate PR. For focus in slider handles two separate svgs are being used in the React version (one for focused and one for normal state), I've used the same in WC version too. Should we consider looking at other options here?

[sangeethababu9223]

@sangeethababu9223

Read-only state Looks like there is still some interactivity happening of the bar when read-only is set to true.

For focus in slider handles two separate svgs are being used in the React version (one for focused and one for normal state), I've used the same in WC version too. Should we consider looking at other options here?

Could you provide a link to the two different svgs assets that are being used for enabled and focus states? The handle svg should just be the icon asset in the svg, and different color tokens and focus borders should be added outside of the svg asset.

The svgs part part of the component. It can be found in the SliderHandles.tsx file.

I've fixed the dragging issue with readonly state now.

[tay1orjones]

Hey @sangeethababu9223, what is the status of this pr? If another visual review is needed could you re-request a review from Lauren and/or @mention her?

[sangeethababu9223]

Hey @laurenmrice, I've fixed the issue with readonly state. Also has shared the SVG above, could you please look into this and share your feedback. Thanks