Components: feat(slider): create a CDK slider component

[mmalerba]

It would be nice to have a CDK slider that allows for more user customization than mat-slider.

Things to support:

• Multiple thumbs (should follow a11y pattern here: http://oaa-accessibility.org/example/32/)
• Provides elements to style for things like thumb, filled track, non-filled track, etc, but leaves that styling up to the user
• Should be able to base mat-slider off of it

[arlowhite]

multiple thumbs would be a nice feature.
If you click the track, I think you'd want the closest thumb to move to the click position.

And if you drag one thumb into another there are two options:

• STOP - as done in your link: http://oaa-accessibility.org/example/32/
• PUSH - push the other thumb as you drag the other into it.

If two thumbs are on top of each other, it creates an awkward situation.
When you click and drag, which one does it pickup?
If you drag one direction, it could be pushing against the other (as in the oaa-accessibility demo)
So maybe the best solution would be to not "pickup" a thumb initially and wait to see which direction the user drags and then pickup the thumb open to that direction. But that may be difficult to code.

[demiro]

1. I would love to have multiple thumbs feature
2. But most importantly, I would like the feature for thumb to be always visible (and not just on focus)

One extra feature I would like:
if there is a max number set (let's say 100) I would like that if I slide to that number and hold on a bit.... the scale widens... to my desired number .... this is a nice to have.... but the number 2 on my list is a must imho

[JoshMLeslie]

Came across #4803 and since that was closed, going to post this here:

Figured out how to show the slider thumb label underneath the slider / didn't want to open a new issue / for posterity / didn't find this talked about elsewhere:

Just noticed @vsarathy mentioned it (almost a year ago, but).

::ng-deep {
  .mat-slider-horizontal .mat-slider-thumb-label{
    top: 10px !important;
    transform: translateY(-26px) scale(0.1) rotate(225deg) !important;
  }
  .mat-slider-horizontal.cdk-focused .mat-slider-thumb-label {
    transform: rotate(225deg) !important;
  }
  .mat-slider-thumb-label-text {
    transform: rotate(135deg) !important;
  }
}

[VagrantAI-c]

• STOP - as done in your link: http://oaa-accessibility.org/example/32/
• PUSH - push the other thumb as you drag the other into it.

I wonder if any thumb should be freely dragged from 0 to 100% without bumping into each other (I mean when thumb is blocked for further drag to specified side) and without linking that this one thumb is for left part and another is for right part. Min and max values would be reactively calculated depending on current thumbs positions. It might provide better UX for specified cases depending on user actual needs (just speculating though, I didn't do any research on this).

[philippklemmer]

Is this feature already available?