fix(slider): adds padding inside of slider to fit the thumb

[robertmesserle]

Closes #1343

[robertmesserle]

@ThomasBurleson Please note that this will cause styles to change for some users. Basically, in order for this to work, I had to add padding inside the actual slider wrapper, which causes the slider to shrink. If this is not how we expect it to work, then comment here and we can discuss alternative solutions.

[ThomasBurleson]

Why are you creating a unused wrapper variable?

[robertmesserle]

Good question - I used it at one point while fixing this, but apparently, didn't end up needing it. Will remove.

[ThomasBurleson]

@robertmesserle - This effectively creates a left/right 24px padding around md-slider so the thumb shows properly at the start/end ranges.

• What about the ripple/focus indicators are those clipped?
• Have you tested with hsizing of the md-slider... does that still work ?

[robertmesserle]

@ThomasBurleson The 24px padding is the size needed for the focus/held state.

[sunny9240]

@robertmesserle This is not the right fix. size of slider became smaller because of padding.

[robertmesserle]

@sunnyshah01 @ThomasBurleson Updated this PR to include a safer method that should not impact the size at all.

[ThomasBurleson]

@robertmesserle - curl https://github.com/angular/material/pull/1391.patch | git am failed.
Can you update your PR with a git pull --rebase origin master first? Thx.