Fix native range thumb styles on Webkit (Chrome/Safari)

The range slider's thumb was not styling correctly on Chrome or Safari.
This was simply because the pseudo-element `::-webkit-slider-thumb`
had been incorrectly written as `::-wekit-slider-handle` in `scss/forms/_range.scss`.

This revision fixes it to correctly use `::-webkit-slider-thumb`.

Test Plan:
- Run `npm start`
 - View `slider.html` in the docs in Chrome and check the range
   slider's thumb is now styled correctly.
 - View the docs in Firefox and Edge and ensure they are still correct.
- Run `npm run test:sass` and ensure all the tests still pass

diff --git a/scss/forms/_range.scss b/scss/forms/_range.scss
index b5766419d5ac15a9b23336f8b197417c3cdac06e..96a720ad845ca37a038cd5833b15a025d187e569 100644 (file)
--- a/scss/forms/_range.scss
+++ b/scss/forms/_range.scss
@@ -73,7 +73,7 @@ $slider-radius: $global-radius !default;
       background: $slider-background;
     }
 
-    &::-webkit-slider-handle {
+    &::-webkit-slider-thumb {
       width: $slider-handle-width;
       height: $slider-handle-height;
       margin-top: -$margin;