Replace polymer paper-slider

[silamon]

Proposed change

Replace polymer paper-slider and use the brand new material web components.

Type of change

• Dependency upgrade
• Bugfix (non-breaking change which fixes an issue)
• New feature (thank you!)
• Breaking change (fix/feature causing existing functionality to break)
• Code quality improvements to existing code or addition of tests

Example configuration

Additional information

• This PR fixes or closes issue: fixes #
• This PR is related to issue or discussion:
• Link to documentation pull request:

Checklist

• The code change is tested and works locally.
• There is no commented out code in this PR.
• Tests have been added to verify that the new code works.

If user exposed functionality or configuration variables are added/changed:

• Documentation added/updated for www.home-assistant.io

[bramkragten]

In the more info dialogs, the slider is very small and the tooltip is cutoff:

Expected:

Also the service is never called when the value is changed with the slider.

[silamon]

I got it fixed but the cutoff is due to the dialog. In other places there's no cutoff.
There are still more places where the value isn't picked up. It needs some more testing.

[bramkragten]

There are still more places where the value isn't picked up. It needs some more testing.

Marked as draft for now

[silamon]

There are still more places where the value isn't picked up. It needs some more testing.

Marked as draft for now

I've fixed all places yesterday. Now tested more, and the only thing I can still notice is the cutoff pin in the more info dialog.

[bramkragten]

Suggested change

	labeled=${this.labeled}
	.labeled=${this.labeled}

[silamon]

I think this one is incorrect. Labeled should be passed to ha-slider, it should be attached to the tag.

<ha-slider {}></ha-slider> => no pin on the slider
<ha-slider labeled {}></ha-slider => pin on the slider