material-components · MarcMcIntosh · Feb 7, 2017 · Feb 7, 2017 · Feb 7, 2017
diff --git a/demos/index.html b/demos/index.html
@@ -40,6 +40,7 @@
           <li><a href="simple-menu.html">Menu (simple)</a></li>
           <li><a href="switch.html">Switch</a></li>
           <li><a href="radio.html">Radio</a></li>
+          <li><a href="range-slider.html">Range Slider</a></li>
           <li><a href="ripple.html">Ripple</a></li>
           <li><a href="snackbar.html">Snackbar</a></li>
           <li><a href="textfield.html">Text Field</a></li>

diff --git a/demos/range-slider.html b/demos/range-slider.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<!--
+  Copyright 2016 Google Inc. All rights reserved.
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      https://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License
+-->
+<html class="mdc-typography">
+  <head>
+    <meta charset="utf-8">
+    <title>MDC Select Demo</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <script src="assets/material-components-web.css.js" charset="utf-8"></script>
+    <style type="text/css">
+
+      .mdc-theme--dark {
+        background-color: #303030;
+        color: #eee;
+      }
+
+      .container {
+        display: inline-block;
+        max-width: 100%;
+        margin: auto;
+        padding: 6px;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>MDC Range Slider</h1>
+      <hr />
+      <section class="container">
+
+        <legend>Standard</legend>
+        <input type="range" class="mdc-range-slider" value="5" min="0" max="10" step="1" />
+
+        <hr />
+
+        <legend>Disabled</legend>
+        <input type="range" class="mdc-range-slider" value="5" min="0" max="10" step="1" disabled="true" />
+
+        <hr />
+
+        <legend>Primary</legend>
+        <input type="range" value="5" min="0" max="10" step="1" class="mdc-range-slider mdc-range-slider--primary" />
+
+        <hr />
+
+        <legend>Accent</legend>
+        <input type="range" value="5" min="0" max="10" step="1" class="mdc-range-slider mdc-range-slider--accent" />
+
+      </section>
+
+      <section class="container mdc-theme--dark">
+
+        <legend>Standard<legend>
+        <input type="range" class="mdc-range-slider" value="5" min="0" max="10" step="1" />
+
+        <hr />
+
+        <legend>Disabled</legend>
+        <input type="range" class="mdc-range-slider mdc-range-slider--disabled" value="5" min="0" max="10" step="1" />
+
+        <hr />
+
+        <legend>Primary</legend>
+        <input type="range" value="5" min="0" max="10" step="1" class="mdc-range-slider mdc-range-slider--primary" />
+
+        <hr />
+
+        <legend>Accent</legend>
+        <input type="range" value="5" min="0" max="10" step="1" class="mdc-range-slider mdc-range-slider--accent" />
+
+      </section>
+    </main>
+  </body>
+</html>
diff --git a/packages/material-components-web/material-components-web.scss b/packages/material-components-web/material-components-web.scss
@@ -34,3 +34,4 @@
 @import "@material/textfield/mdc-textfield";
 @import "@material/theme/mdc-theme";
 @import "@material/typography/mdc-typography";
+@import "../mdc-range-slider/mdc-range-slider";
diff --git a/packages/mdc-range-slider/README.md b/packages/mdc-range-slider/README.md
@@ -0,0 +1,52 @@
+# MDC Range Slider
+
+MDC Range slider is a scss component to style ranged inputs implementing as much of [Material Design slider component guidelines](https://material.io/guidelines/components/sliders.html#) as possible with the non-standard pseudo-elements use to style ranged input selectors in Geko, Edge, Blink and WebKit layout engines.  
+
+
+
+## Installation
+
+```
+npm install --save @material/range-slider
+
+```
+
+## Usage
+
+Use exclusively on inputs with type set to range.
+
+
+```html
+<!-- standard -->
+<input type="range" value="5" min="0" max="10" step="1" class="mdc-range-slider" />
+
+<!-- primary -->
+<input type="range" value="5" min="0" max="10" step="1" class="mdc-range-slider mdc-range-slider--primary" />
+
+<!-- Accent -->
+<input type="range" value="5" min="0" max="10" step="1" class="mdc-range-slider mdc-range-slider--accent" />
+
+<!-- disabled -->
+<input type="range" class="mdc-range-slider" value="5" min="0" max="10" step="1" disabled="true" />
+
+```
+
+## Modifiers
+
+| Class | Description |
+| --- | --- |
+| mdc-range-slider | Base slider |
+| mdc-range-slider mdc-range-slider-primary | Colours the slider with the primary colour |
+| mdc-range-slider mdc-range-slider--accent | Colours the sloder with the accent colour |
+| mdc-range-slider mdc-range-slider--disabled | adds disabled colouring to the slider, can also be done by adding a disabled attribute |
+
+##### Disabled inputs
+Setting the disabled attribute will supersede class suffixes like primary and accent.
+
+```html
+<input type="range"  value="5" min="0" max="10" step="1" class="mdc-range-slider mdc-range-slider--accent" disabled="true" />
+<!-- Will Render the same as -->
+<input type="range"  value="5" min="0" max="10" step="1" class="mdc-range-slider mdc-range-slider--disabled" />
+<!-- And -->
+<input type="range"  value="5" min="0" max="10" step="1" class="mdc-range-slider" disabled />
+```
diff --git a/packages/mdc-range-slider/_mixins.scss b/packages/mdc-range-slider/_mixins.scss
@@ -0,0 +1,41 @@
+/* Copyright 2016 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. */
+@import "@material/elevation/mixins";
+@import "./variables";
+
+@mixin mdc-range-slider-thumb() {
+  @include mdc-elevation(2);
+  width: $mdc-range-slider-thumb-width;
+  height: $mdc-range-slider-thumb-height;
+  border: transparent;
+  border-width: $mdc-range-slider-thumb-boarder-width;
+  border-radius: $mdc-range-slider-thumb-radius;
+}
+
+@mixin mdc-range-slider-thumb-focus() {
+  @include mdc-elevation(4);
+  width: $mdc-range-slider-thumb-focus-width;
+  height: $mdc-range-slider-thumb-focus-height;
+  border-width: $mdc-range-slider-thumb-focus-border-width;
+  border-style: solid;
+}
+
+@mixin mdc-range-slider-track() {
+  @include mdc-elevation-transition($mdc-range-slider-track-transition-time, ease);
+  width: $mdc-range-slider-track-width;
+  height: $mdc-range-slider-track-height;
+  border: transparent;
+  border-radius: $mdc-range-slider-track-border-radius;
+  cursor: pointer;
+}
diff --git a/packages/mdc-range-slider/_variables.scss b/packages/mdc-range-slider/_variables.scss
@@ -0,0 +1,36 @@
+/* Copyright 2016 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. */
+
+/* Tracker */
+$mdc-range-slider-track-width: 100%;
+$mdc-range-slider-track-height: 4px;
+$mdc-range-slider-track-transition-time: 128ms;
+$mdc-range-slider-track-border-radius: $mdc-range-slider-track-height;
+
+/* Thumb */
+$mdc-range-slider-thumb-height: 16px;
+$mdc-range-slider-thumb-width: 16px;
+$mdc-range-slider-thumb-boarder-width: 1px;
+// Margin Top for webkit-slider-thumb
+$mdc-range-slider-thumb-margin-top: ($mdc-range-slider-track-height - $mdc-range-slider-thumb-height) / 2;
+
+/* Thumb focus */
+$mdc-range-slider-thumb-focus-height: $mdc-range-slider-thumb-height * 1.2;
+$mdc-range-slider-thumb-focus-width: $mdc-range-slider-thumb-width * 1.2;
+$mdc-range-slider-thumb-focus-border-width: ($mdc-range-slider-thumb-focus-height - $mdc-range-slider-thumb-height) * .5;
+$mdc-range-slider-thumb-focus-margin-top: ($mdc-range-slider-track-height - $mdc-range-slider-thumb-focus-height) / 2;
+
+$mdc-range-slider-thumb-radius: $mdc-range-slider-thumb-focus-height;
+
+$mdc-range-slider-input-height: $mdc-range-slider-thumb-focus-height;