add slider

[cpboyd]

I've been using this in my own project and felt I've gotten it to a point worth sharing.

I just updated the track markers portion to be more React-oriented. Previously, I just had the functions doing manual DOM manipulations, since I wasn't actually using discrete sliders in my project.

I still need to update the README, specifically in relation to the Props section.

[codecov-io]

Codecov Report

Merging #868 into rc0.15.0 will decrease coverage by 0.88%. The diff coverage is 70.42%.

@@             Coverage Diff              @@
##           rc0.15.0     #868      +/-   ##
============================================
- Coverage     94.13%   93.24%   -0.89%     
============================================
  Files            86       87       +1     
  Lines          3649     3791     +142     
  Branches        578      597      +19     
============================================
+ Hits           3435     3535     +100     
- Misses           90      124      +34     
- Partials        124      132       +8

Impacted Files	Coverage Δ
packages/slider/index.tsx	70.42% <70.42%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 4f36078...0e30a79. Read the comment docs.

[cpboyd]

@moog16 I just fixed some lint and typing issues.

I'm reading up on the screenshot tests at the moment.

[cpboyd]

@moog16 I added a screenshot test, but I'm still not completely clear on everything involved.

I saw the list in screenshot-test-urls.tsx, but adding 'slider' there didn't seem to add it to the test. Is that in the Docker image itself?

Also, switch and ripple screenshot tests don't seem to currently be running either. They're also not in the screenshot-test-urls.tsx.

Is there a way for me to view and validate the "golden" image? And where am I supposed to submit that, since the instructions seem to indicate that I can't upload them via the Docker.

[moog16]

@cpboyd I have to actually create the golden. I'll get around to this today. The instructions is for you to test everything out. I need to update the contribute doc though (as this might be where the confusion is coming from)

[cpboyd]

@moog16 Commit c431074 basically replicates a substantial portion of the mdc-slider/foundation.ts

Further, I left the registerBodyInteractionHandler as I'm not sure there's a more React-like way to add handlers to the document body.

[googlebot]

So there's good news and bad news.

:thumbsup: The good news is that everyone that needs to sign a CLA (the pull request submitter and all commit authors) have done so. Everything is all good there.

:confused: The bad news is that it appears that one or more commits were authored or co-authored by someone other than the pull request submitter. We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that here in the pull request.

Note to project maintainer: This is a terminal state, meaning the cla/google commit status will not change from this state. It's up to you to confirm consent of all the commit author(s), set the cla label to yes (if enabled on your project), and then merge this pull request when appropriate.

ℹ️ Googlers: Go here for more info.

[cpboyd]

I guess the rebase to master confused @googlebot.

Edit: It seems that GitHub's PR system counts the rebase commits as "new", hence the "216 files changed" now. I guess we'll want to make sure to squash commits when this PR gets merged.

[moog16]

Changed the base to rc0.14.0

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[cpboyd]

@moog16 How do you suggest I handle the onTransitionEnd within updateUIForCurrentValue_?

This gets called by setValue_, and thus most of the events.

[moog16]

@cpboyd I see what you're saying about updateUIForCurrentValue. What if you do implement [de]registerThumbContainerInteractionHandler. You can set a flag to true in the register and set the flag to false in the deregister. Then in this.onThumbEnd, say:

onThumbEnd: () => {
  if (!this.flag) return;
  // ...
}

[cpboyd]

@moog16 That's effectively what I tried to do in https://github.com/material-components/material-components-web-react/pull/868/commits/b333d05c08152eb700c4a6fd62d3e7e1881b783c

[moog16]

ah you're right...Sorry, it was a lot to sift through. But what you did makes sense.

[moog16]

Can you merge branch rc0.14.0 into this pr please.

[cpboyd]

@moog16 I rebased with rc0.14.0.

Should I also squash the slider commits down?

[moog16]

no need! We'll squash merge this puppy when its ready. I'll take anotehr look. Thanks!

[cpboyd]

@moog16 I think I've addressed all the new comments. I'll work on the unit tests.

[moog16]

Great! Let me know when its ready for review :)

[googlebot]

All (the pull request submitter and all commit authors) CLAs are signed, but one or more commits were authored or co-authored by someone other than the pull request submitter.

We need to confirm that all authors are ok with their commits being contributed to this project. Please have them confirm that by leaving a comment that contains only @googlebot I consent. in this pull request.

Note to project maintainer: There may be cases where the author cannot leave a comment, or the comment is not properly detected as consent. In those cases, you can manually confirm consent of the commit author(s), and set the cla label to yes (if enabled on your project).

ℹ️ Googlers: Go here for more info.

[cpboyd]

@moog16 I rebased to rc0.15 and added some unit tests.

Note: I'm currently using @material/slider 2.3.0. I'm not overly familiar with material-components-web versioning. Some of the React components are still using the mdc v1 versions. Should I downgrade (or optionally upgrade to v3)?