[Slider] Remove not needed mark in range Sliders

[SooriyanDSRC]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Whenever both the start and the end points have been dragged to the end of the slider an extra mark has been added at the end of the slider which is visible when both the drag points aren't at the end.

Expected behavior 🤔

The extra mark in the slider must be removed and retain the required marks that has been provided in the props.

Steps to reproduce 🕹

Steps:

1. Add marks to the range slider for both range start and end as follows.
   
2. Drag both the range points to the end of the slider.
   
3. Now drag both the range points from the end to another position.
   
4. Now we will be able to get three marks where the third one isn't a required one and must have been removed.

Context 🔦

We have been using the range slider for a requirement in our project, where the user needs to choose certain range and the user needs to be provided with the labels of their selections. Since the marks might overwrite one another we needed to keep the marks to the minimal amount, In this case its getting added up by one.

Your environment 🌎

`npx @mui/5.5.2`

  Chrome latest version
  Output from `npx @mui/5.5.2` goes here.

[michaldudak]

Hi @SooriyanDSRC, could you please provide a codesandbox showing the problem? It may be that a certain combination of props causes the problem.

[kkalvako]

I face the same issue. @michaldudak here is a codesandbox link in case it helps.

https://codesandbox.io/s/material-demo-forked-tlu40e?file=/demo.js

[michaldudak]

Right, definitely a bug. Would you like to contribute to the project and look for a fix?

[kskd1804]

@michaldudak Sure, I would be happy to work on the fix. The issue seems to be arising due to both marks having the same key as shown in the below image.

How does this look?

diff --git a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js
index 4536cbe2c1..5559e274d4 100644
--- a/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js
+++ b/packages/mui-base/src/SliderUnstyled/SliderUnstyled.js
@@ -210,7 +210,7 @@ const SliderUnstyled = React.forwardRef(function SliderUnstyled(props, ref) {
           }
 
           return (
-            <React.Fragment key={mark.value}>
+            <React.Fragment key={index}>
               <Mark
                 data-index={index}
                 {...markProps}

[michaldudak]

Looks good to me. Please create a PR with this change.

[kskd1804]

@michaldudak Created the PR #33526