Added a range slider

[MarcMcIntosh]

Had to use slightly different implementations for gecko, webkit and edge.

I've tested on chromium and firefox, firefox looks the best as chromium has a very limited selection of pseudo elements for styling ranged inputs.

Kind of working blind with edge / internet explorer,
if any one could check that out it would be great :)

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.

---

• If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
• If you signed the CLA as a corporation, please let us know the company's name.

[MarcMcIntosh]

who's robot?

[googlebot]

CLAs look good, thanks!

[Garbee]

We shouldn't really need the type here. Not only does it break BEM (which you also should add a linting marker for) but it isn't really necessary. The docs will instruct people to use this against a range type only and that should be sufficient. This is increasing specificity which makes it more difficult for developers to modify styling if they wish to.

[MarcMcIntosh]

good point,

[Garbee]

As I recall from MDL 1.x feedback we were planning on not relying on the range input type with MCW due to some issues getting the MD styling just right.

@sgomes Do you recall what those issues were? If not I can go search the issue tracker.

[MarcMcIntosh]

@Garbee is it an issue with webkit having only one pseudo element for the whole track?

[sgomes]

Thanks, @MarcMcIntosh, this is a lot of work!

As @Garbee was mentioning though, I fear we'll quickly run into issues if we try to implement things on top of native controls. Here are some issues I remember off the top of my head:

• Some aspects of the controls aren't animatable in some browsers, so you get sudden jumps in size when scaling the thumb, for example
• The scaling thumb causes touch issues in some browsers, presumably because they get confused about the touch area size changing
• There are differences in behaviour between browsers with the same slider implementation (e.g., Chrome and Safari, which both use webkit prefixes
• There are differences in behaviour between browser versions
• Things get very difficult or impossible when going beyond the simple continuous slider

As such, we had decided against using the native control in MDC-Web.

@traviskaufman Any insights from your non-native prototype?

[MarcMcIntosh]

Thanks @sgomes I was making one figured may as well add it :) didn't even think about touch issues... , ran into a few of those inconsistencies. It probally have been easier to just to write inline an svg with min and max values applied to the view box.

[traviskaufman]

Hey @MarcMcIntosh

First off, thanks for taking the time to put all of this together, I really appreciate your willingness to contribute to our codebase!

That being said, all of @sgomes' points are valid. Besides just that, MD sliders require some very intricate treatments that are not present in the spec, and that most (if not all?) existing MD implementations haven't nailed down properly. Thus, I'm probably going to have to close this PR for now, since I don't think we'll be able to land it in our codebase.

That being said, we're tracking the slider issue at #25. If this is a component you're interested in undertaking, we'd be happy to help you out but ask that you follow the processes outlined within our authoring components doc.

Finally, if you'd rather release this as a standalone component built on top of MDC-Web, that's totally doable as well! You can simply depend on @material/typography and @material/theme and publish the component outside of MDC-Web proper, as a very lightweight MD wrapper around a native range slider.

[MarcMcIntosh]

@traviskaufman I was using the SCSS code base anyway and need a slider for a small project and figured may as-well make one. I've got a couple of projects I'd like to finish before making additional commitments.

Shouldn't take to long though so I've taken a look at the react Checkbox.js in the framework-examples to get an idea of how javascript components are intended to be used.... Might take a while to get my head around guessing user provides the elements id's and class names... mdc attaches listeners and classname modifiers to them?