V4.1: Custom range control

docs/4.0/components/forms.md

@@ -989,6 +989,20 @@ Custom `<select>` menus need only a custom class, `.custom-select` to trigger th
 </select>
 {% endexample %}
 
+### Range control
+
+Custom `<input type="range">` controls need only a custom class, `.custom-range` to trigger the custom styles.
+
+{% example html %}
+<input type="range" class="custom-range">
+{% endexample %}
+
+Additionally you can add steps by defining `min` and `max` attributes.
+
+{% example html %}
+<input type="range" class="custom-range" min="0" max="5">
+{% endexample %}
+
 ### File browser
 
 The file input is the most gnarly of the bunch and require additional JavaScript if you'd like to hook them up with functional *Choose file...* and selected file name text.

scss/_custom-forms.scss

@@ -253,3 +253,110 @@
     }
   }
 }
+
+// Range
+//
+// Replace the browser default range with a custom one.
+.custom-range {
+  width: 100%;
+  padding-left: 0;
+  background-color: transparent;
+  -webkit-appearance: none;
+
+  &:focus {
+    outline: none;
+
+    &::-webkit-slider-thumb, 
+    &::-moz-range-thumb, 
+    &::-ms-thumb {
+      box-shadow: $custom-control-indicator-focus-box-shadow;
+    }
+  }
+
+  &::-moz-focus-inner, 
+  &:-moz-focusring {
+    border: 0;
+    outline: none;
+  }
+
+  &:active {
+
+    &::-webkit-slider-thumb, 
+    &::-moz-range-thumb, 
+    &::-ms-thumb {
+      background-color: $custom-control-indicator-active-bg;
+    }
+  }
+
+  // 	webkit styling
+  &::-webkit-slider-thumb {
+    width: $custom-control-indicator-size;
+    height: $custom-control-indicator-size;
+    margin-top: -($custom-control-indicator-size * .25);
+    background-color: $custom-control-indicator-checked-bg;
+    border: 0;
+    border-radius: $custom-control-indicator-size;
+    -webkit-appearance: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    width: 100%;
+    height: $custom-control-indicator-size * .5;
+    color: transparent;
+    cursor: pointer;
+    background-color: $custom-control-indicator-bg;
+    border-color: transparent;
+    border-radius: $custom-control-indicator-size;
+  }
+
+  // 	firefox styling
+  &::-moz-range-thumb {
+    width: $custom-control-indicator-size;
+    height: $custom-control-indicator-size;
+    background-color: $custom-control-indicator-checked-bg;
+    border: 0;
+    border-radius: $custom-control-indicator-size;
+    -webkit-appearance: none;
+  }
+
+  &::-moz-range-track {
+    width: 100%;
+    height: $custom-control-indicator-size * .5;
+    color: transparent;
+    cursor: pointer;
+    background-color: $custom-control-indicator-bg;
+    border-color: transparent;
+    border-radius: $custom-control-indicator-size;
+  }
+
+  // 	IE styling
+  &::-ms-thumb {
+    width: $custom-control-indicator-size;
+    height: $custom-control-indicator-size;
+    background-color: $custom-control-indicator-checked-bg;
+    border: 0;
+    border-radius: $custom-control-indicator-size;
+    -webkit-appearance: none;
+  }
+
+  &::-ms-track {
+    width: 100%;
+    height: $custom-control-indicator-size * .5;
+    color: transparent;
+    cursor: pointer;
+    background-color: transparent;
+    border-color: transparent;
+    border-width: ($custom-control-indicator-size * .5);
+  }
+
+  &::-ms-fill-lower {
+    background-color: $custom-control-indicator-bg;
+    border-radius: $custom-control-indicator-size;
+  }
+
+  &::-ms-fill-upper {
+    margin-right: 15px;
+    background-color: $custom-control-indicator-bg;
+    border-radius: $custom-control-indicator-size;
+  }
+}