feat(range-slider): Add range-slider (double-slider) functionality slider component

[PhilippS93]

• Added range slider "two thumb" like shown in the material spec

• Added demo in the material demo-app.

See: #1331

[googlebot]

We found a Contributor License Agreement for you (the sender of this pull request), but were unable to find agreements for all the commit author(s) or Co-authors. If you authored these, maybe you used a different email address in the git commits than was used to sign the CLA (login here to double check)? If these were authored by someone else, then they will need to sign a CLA as well, and confirm that they're okay with these being contributed to Google.
In order to pass this check, please resolve this problem and have the pull request author add another comment and the bot will run again. If the bot doesn't comment, it means it doesn't think anything has changed.

[googlebot]

CLAs look good, thanks!

[ngbot]

Hi @PhilippS93! This PR has merge conflicts due to recent upstream merges.
Please help to unblock it by resolving these conflicts. Thanks!

[Journeycorner]

Any news on when this is going to land? Otherwise I need to hack a solution for ssr.

[MaximilianGraef]

Iam looking forward to this for ages. Please let it happen :)

[jelbourn]

Hey there- we really appreciate the enthusiasm for this feature. For the time being, we aren't going to add this to the mat-slider. While we know a many people want this feature, this is countered by:

• Range sliders aren't captured in the Material Design spec; we don't want to open up an interaction pattern to Google applications that the Material Design UX team doesn't approve of.
• We're working on a way to share some code with the Material Design team (MDC web), and they also don't support range sliders.
• Any implementation would have to have a solid a11y interaction pattern for screen-reader users. This would require a bit more work, since it would mean that a range slider would likely have to present itself as multiple role="range" elements.

We definitely encourage you to share your work as a standalone component, though!

[Journeycorner]

@jelbourm There is a range slider shown on the official material page, how can it be not in the spec? https://material.io/design/components/sliders.html#

[jelbourn]

Huh, I hadn't noticed that one image before. It's strange that exists there but isn't mentioned anywhere else on the page. I'll check with the Material Design UX team to see if it's intentional.

[jelbourn]

Following up: talking to someone from the Material Design team, they say that that one image in the spec really shouldn't be in there since the range slider isn't otherwise specified. There's an open bug now to remove it.

[odahcam]

Material Design spec always had range slider images but no text about it and no design alternatives for it. It would be nice to give us some alternative to range sliders if they aren't a good UI component. @jelbourn are currently there any components in this lib we can use as an alternative to range sliders?

I'm very excited to know that some code sharing with MDC web can happen.

[drenda]

Hi guys, any news about this new function?

[djtahl]

Hello guys, is there a way to access this "open bug" in Material Design project and have more visibility on wether there is a possibility to add the specs someday for such iteration on the slider component ?
We also need this type of slider with double inputs.

[AndreasDeNeve]

Any timeline available for resolving the merge conflicts + PR review?

[manuelarte]

really looking forward to this feature

[odahcam]

Anyone knows something about a standalone component compatible with Angular Material?

[vieira83]

Any updates on when this new function will be merged and added to the slider?

[preda7or]

Now that Flutter has double thumb slider too. Could we revive this PR?

[mmalerba]

The MDC team does plan to build a slider with multiple thumbs, and we plan to build one based on that once its done

[mohitvirli]

Any updates on this PR (looks stale) or is there another one tracking this? Thanks.

[jelbourn]

Closing this since we don't plan on adding range functionality to the current MatSlider. We will be making a new slider based on top of MDC Web's slider, which does already support range.

[odahcam]

Is there a ETA or roadmap for the new slider?

[jelbourn]

No ETA, but the MDC versions of the components are the team's main priority

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}