feat(forms): allow multi-thumb range to allow track mouse interaction

[austingreendev]

Description

This PR adds the ability to interact with the MultiThumbRange through clicking the range track. It determines the closest thumb from the selection and updates the value along with focusing the thumb for additional keyboard interaction.

This also supports the step property by rounding new values.

Checklist

• 👌 design updates are Garden Designer approved (add the
  designer as a reviewer)
• 🌐 Styleguidist demo is up-to-date (yarn start)
• ⬅️ renders as expected with reversed (RTL) direction
• ♿ analyzed via axe and evaluated using VoiceOver
• 💂‍♂️ includes new unit tests
• 📝 tested in Chrome, Firefox, Safari, Edge, and IE11

[jzempel]

@Austin94 lookin' good. Please publish a demo and add selected designers as Reviewers. 🙏

[austingreendev]

@ginnywood @jzempel pre-published at https://austin-next.netlify.app/forms/#!/Basic/5

[jzempel]

Clicking in the spacing area (whenever the cursor changes to "pointer") of <Range> affects the thumb. However, the same is only effective on MultiThumbRange when the mouse is over the track.

[austingreendev]

@jzempel good catch. I've moved the onMouseDown event from the track to the parent slider element. This now matches the native <input /> interaction.

[ginnywood]

Awesome! 🙌Great improvement, thanks for doing this.

[ginnywood]

🎉

[coveralls]

Coverage decreased (-0.04%) to 97.878% when pulling 61b90e4 on agreen/range-click into 4b17136 on master.

[jzempel]

very nice.