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,105 @@
  }
  }
 }
+
+// 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;
+ }
+}