Style range slider.

This gets us closer, but not fully, to fixing #1523.

blocks/inspector-controls/range-control/style.scss

@@ -3,12 +3,75 @@
 	justify-content: center;
 }
 
+// creating mixin because we can't do multiline variables, and we can't comma-group the selectors for styling the range slider
+@mixin range-thumb() {
+	height: 18px;
+	width: 18px;
+	border-radius: 50%;
+	cursor: pointer;
+	background: $dark-gray-500;
+	border: 4px solid transparent;
+	background-clip: padding-box;
+}
+
+@mixin range-track() {
+	height: 3px;
+	cursor: pointer;
+	background: $light-gray-500;
+	border-radius: 1.5px;
+}
+
 .blocks-range-control__input {
 	width: 100%;
+	margin-top: -3px;
+	margin-left: $item-spacing;
+
+	-webkit-appearance: none;
+	background: transparent;
+
+
+	/**
+ 	 * Thumb
+ 	 */
+
+	&::-webkit-slider-thumb {
+		-webkit-appearance: none;
+	}
+
+	// webkit
+	&::-webkit-slider-thumb {
+		@include range-thumb();
+		margin-top: -7px;	// necessary for chrome
+	}
+
+	// moz
+	&::-moz-range-thumb {
+		@include range-thumb();
+	}
+
+	&:focus {
+		outline: none;
+	}
+
+	&:focus::-webkit-slider-thumb {
+		box-shadow: $button-focus-style;;
+	}
+
+	/**
+ 	 * Track
+ 	 */
+
+	&::-webkit-slider-runnable-track {
+		@include range-track();
+	}
+
+	&::-moz-range-track {
+		@include range-track();
+	}
 }
 
 .blocks-range-control__hint {
 	display: inline-block;
-	margin-left: 10px;
+	margin-left: $item-spacing;
 	font-weight: 500;
-}
+}