Add <input type=range> support

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 552b466100872ebe18957b44db3a047dcb17c661..6723e7de898c399eb0275f30f597ebdfcc3651e8 100644 (file)
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -12,6 +12,7 @@
 @import 'motion-ui';
 
 @include foundation-everything;
+@include foundation-range-input;
 @include motion-ui-transitions;
 
 @import 'foundation-docs';

diff --git a/docs/pages/slider.md b/docs/pages/slider.md
index 069165a361d47d1fbcf55726fe38486e5511cc67..a739907dcb45dcc6aa67bc851543b41dabc347d8 100644 (file)
--- a/docs/pages/slider.md
+++ b/docs/pages/slider.md
@@ -80,3 +80,27 @@ Wait, you want a visible input AND a slider? You're crazy, but ok. Change the va
   <input type="number" id="sliderOutput1">
 </div>
 ```
+
+---
+
+## Native Range Slider
+
+In Foundation 6.2, we introduced styles for `<input type="range">`, the native HTML element for range sliders. It's not supported in every browser, namely IE9 and some older mobile browsers. [View browser support for the range input type.](http://caniuse.com/#feat=input-range)
+
+```html_example
+<input type="range" min="1" max="100" step="1">
+```
+
+If you're using the Sass version of Foundation, add this line to your main Sass file:
+
+```scss
+@include foundation-range-input;
+```
+
+It's possible to use both the JavaScript slider and the native slider in the same codebase, as the CSS selectors used don't overlap. Here's what's different about the native slider:
+
+- Less markup: just write `<input type="range">` and you're good.
+- No JavaScript is needed, which guarantees it runs faster in most browsers.
+- To disable the slider, add `disabled` as an attribute, instead of a class.
+- No support for vertical orientation.
+- No support for two handles.

diff --git a/scss/components/_slider.scss b/scss/components/_slider.scss
index 3f2d7d3c423eb9c67534cf6ad6d43b7b2136f301..6952c32d6efe36c9f86dedeb554cfc7b64086332 100644 (file)
--- a/scss/components/_slider.scss
+++ b/scss/components/_slider.scss
@@ -9,43 +9,11 @@
 /// @group slider
 ////
 
-/// Default height of the slider.
-/// @type Number
-$slider-height: 0.5rem !default;
-
-/// Default slider width of a vertical slider.
+/// Default slider width of a vertical slider. (Doesn't apply to the native slider.)
 /// @type Number
 $slider-width-vertical: $slider-height !default;
 
-/// Default background color of the slider's track.
-/// @type Color
-$slider-background: $light-gray !default;
-
-/// Default color of the active fill color of the slider.
-/// @type Color
-$slider-fill-background: $medium-gray !default;
-
-/// Default height of the handle of the slider.
-/// @type Number
-$slider-handle-height: 1.4rem !default;
-
-/// Default width of the handle of the slider.
-/// @type Number
-$slider-handle-width: 1.4rem !default;
-
-/// Default color of the handle for the slider.
-/// @type Color
-$slider-handle-background: $primary-color !default;
-
-/// Default fade amount of a disabled slider.
-/// @type Number
-$slider-opacity-disabled: 0.25 !default;
-
-/// Default radius for slider.
-/// @type Number
-$slider-radius: $global-radius !default;
-
-/// Transition properties to apply to the slider handle and fill.
+/// Transition properties to apply to the slider handle and fill. (Doesn't apply to the native slider.)
 /// @type Transition
 $slider-transition: all 0.2s ease-in-out !default;
 

diff --git a/scss/forms/_forms.scss b/scss/forms/_forms.scss
index 0d9aa9706be6635767590e2b31dfaec075e8edf4..b0222cd5f97ce93780302fc60cbecc55f0a0a50d 100644 (file)
--- a/scss/forms/_forms.scss
+++ b/scss/forms/_forms.scss
@@ -18,6 +18,7 @@ $form-spacing: rem-calc(16) !default;
   'input-group',
   'fieldset',
   'select',
+  'range',
   'error';
 
 @mixin foundation-forms {

diff --git a/scss/forms/_range.scss b/scss/forms/_range.scss
new file mode 100644 (file)
index 0000000..c567075
--- /dev/null
+++ b/scss/forms/_range.scss
@@ -0,0 +1,143 @@
+/// Default height of the slider.
+/// @type Number
+$slider-height: 0.5rem !default;
+
+/// Default background color of the slider's track.
+/// @type Color
+$slider-background: $light-gray !default;
+
+/// Default color of the active fill color of the slider.
+/// @type Color
+$slider-fill-background: $medium-gray !default;
+
+/// Default height of the handle of the slider.
+/// @type Number
+$slider-handle-height: 1.4rem !default;
+
+/// Default width of the handle of the slider.
+/// @type Number
+$slider-handle-width: 1.4rem !default;
+
+/// Default color of the handle for the slider.
+/// @type Color
+$slider-handle-background: $primary-color !default;
+
+/// Default fade amount of a disabled slider.
+/// @type Number
+$slider-opacity-disabled: 0.25 !default;
+
+/// Default radius for slider.
+/// @type Number
+$slider-radius: $global-radius !default;
+
+@mixin foundation-range-input {
+  input[type="range"] {
+    $slider-background: $light-gray;
+    $slider-height: 0.5rem;
+    $slider-radius: 0px;
+    $slider-thumb-height: 1.4rem;
+    $slider-thumb-width: 1.4rem;
+    $slider-thumb-color: $primary-color;
+    $slider-opacity-disabled: 0.25;
+    $slider-fill-background: $medium-gray;
+
+    $margin: ($slider-thumb-height - $slider-height) / 2;
+
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    display: block;
+    width: 100%;
+    height: auto;
+    cursor: pointer;
+    margin-top: $margin;
+    margin-bottom: $margin;
+    border: 0;
+    line-height: 1;
+    margin-bottom: $global-margin;
+
+    @if has-value($slider-radius) {
+      border-radius: $slider-radius;
+    }
+
+    &:focus {
+      outline: 0;
+    }
+
+    &[disabled] {
+      opacity: $slider-opacity-disabled;
+    }
+
+    // Chrome/Safari
+    &::-webkit-slider-runnable-track {
+      height: $slider-height;
+      background: $slider-background;
+    }
+
+    &::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      background: $slider-thumb-color;
+      width: $slider-thumb-width;
+      height: $slider-thumb-height;
+      margin-top: -$margin;
+
+      @if has-value($slider-radius) {
+        border-radius: $slider-radius;
+      }
+    }
+    // Firefox
+    &::-moz-range-track {
+      -moz-appearance: none;
+      height: $slider-height;
+      background: #ccc;
+    }
+    &::-moz-range-thumb {
+      -moz-appearance: none;
+      background: $slider-thumb-color;
+      width: $slider-thumb-width;
+      height: $slider-thumb-height;
+      margin-top: -$margin;
+
+      @if has-value($slider-radius) {
+        border-radius: $slider-radius;
+      }
+    }
+
+    // Internet Explorer
+    &::-ms-track {
+      height: $slider-height;
+      background: $slider-background;
+      color: transparent;
+      border: 0;
+      overflow: visible;
+      border-top: $margin solid $body-background;
+      border-bottom: $margin solid $body-background;
+    }
+
+    &::-ms-thumb {
+      background: $slider-thumb-color;
+      width: $slider-thumb-width;
+      height: $slider-thumb-height;
+      border: 0;
+
+      @if has-value($slider-radius) {
+        border-radius: $slider-radius;
+      }
+    }
+
+    &::-ms-fill-lower {
+      background: $slider-fill-background;
+    }
+
+    &::-ms-fill-upper {
+      background: $slider-background;
+    }
+
+    @at-root {
+      output {
+        line-height: $slider-thumb-height;
+        vertical-align: middle;
+        margin-left: 0.5em;
+      }
+    }
+  }
+}