[channel-slider] First stab at working on #154

[DmitrySharabin]

• The channel range is moved to the right (to the channel label) and is hidden until the slider is hovered or some of its components have focus.
• The current slider value is at the right part of the slider label and is dimmed until the slider is hovered or the value is focused. The tooltip is removed (or do we need to have it too?)

It looks like this:

In the context of <color-picker>, it looks like this:

One thing that bothers me is that the spin buttons are outside of the slider (if we want the value is aligned to the right of the slider):

Or is it worth applying &::-webkit-textfield-decoration-container { flex-flow: row-reverse; } to place the spin buttons to the left of the number? I'm afraid it might confuse users, though. But I'm not sure.

Or simply don't align the value to the right:

Live preview: https://deploy-preview-160--color-elements.netlify.app/src/channel-slider/

[netlify[bot]]

✅ Deploy Preview for color-elements ready!

Name	Link
🔨 Latest commit	b66fb1dd153a17a0664c14e62fe03576269245f1
🔍 Latest deploy log	https://app.netlify.com/sites/color-elements/deploys/673a6b486450500008b3145b
😎 Deploy Preview	https://deploy-preview-160--color-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.