feat(slider): Light variation (#818)

* feat(slider): Add light variation

* fix: Fix spelling error in all config files

src/components/button/button.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   default: 'primary',

src/components/card/card.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/code-snippet/code-snippet.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/combo-box/combo-box.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/content-switcher/content-switcher.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/detail-page-header/detail-page-header.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/dropdown/dropdown.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/form/form.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/interior-left-nav/interior-left-nav.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/list-box/list-box.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/list/list.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/loading/loading.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/modal/modal.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/multi-select/multi-select.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/number-input/number-input.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/order-summary/order-summary.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/pagination/pagination.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/search/search.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   default: 'large',

src/components/select/select.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/slider/slider.config.js

@@ -0,0 +1,21 @@
+'use strict';
+
+module.exports = {
+  variants: [
+    {
+      name: 'default',
+      label: 'Slider',
+      notes: `
+        A slider enables the user to specify a numeric value which must be no less than a given value, 
+        and no more than another given value. 
+      `,
+    },
+    {
+      name: 'light',
+      label: 'Light',
+      context: {
+        light: true,
+      },
+    },
+  ],
+};

src/components/slider/slider.hbs

@@ -10,6 +10,6 @@
       <input id="slider" class="bx--slider__input" type="range" step="1" min="0" max="100" value="50">
     </div>
     <span class="bx--slider__range-label">100</span>
-    <input id="slider-input-box" type="number" class="bx--text-input bx--slider-text-input" placeholder="0">
+    <input id="slider-input-box" type="number" class="bx--text-input bx--slider-text-input{{#if light}} bx--text-input--light{{/if}}" placeholder="0">
   </div>
 </div>

src/components/text-area/text-area.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [

src/components/text-input/text-input.config.js

@@ -1,4 +1,4 @@
-'use stirct';
+'use strict';
 
 module.exports = {
   variants: [