feat(MdSlider): add editable option

Author: Samuell1

docs/app/pages/Components/Slider/Slider.vue

@@ -1,5 +1,6 @@
 <example src="./examples/Example.vue" />
 <example src="./examples/WithLabel.vue" />
+<example src="./examples/Editable.vue" />
 
 <template>
   <page-container centered :title="$t('pages.slider.title')">
@@ -13,6 +14,7 @@
       <code-example title="Slider" :component="examples['example']" />
       <code-example title="Slider with label" :component="examples['with-label']" />
 
+      <code-example title="Slider with editable field" :component="examples['editable']" />
       <api-item title="API - md-slider">
         <p>The following options can be applied to all sliders:</p>
 
@@ -40,11 +42,17 @@
             description: 'The model variable to bind the selection value. If no value is assigned, then it will use default value.',
             defaults: '0'
           },
+          {
+            name: 'md-editable',
+            type: 'Boolean',
+            description: 'Enables field for editable value of slider.',
+            defaults: 'false'
+          },
           {
             name: 'min',
             type: 'Number',
             description: 'Minimal value for slider.',
-            defaults: '0'
+            defaults: ''
           },
           {
             name: 'max',

docs/app/pages/Components/Slider/examples/Editable.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="slider-example">
+    <div class="slider-demo-box" :style="{ background: getRGB }"></div>
+    <div class="sliders-demo">
+      <md-slider v-model="r" :max="255" md-editable>
+        R
+      </md-slider>
+      <md-slider v-model="g" :max="255" md-editable>
+        G
+      </md-slider>
+      <md-slider v-model="b" :max="255" md-editable>
+        B
+      </md-slider>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Example',
+    data: () => ({
+      r: 178,
+      g: 255,
+      b: 89
+    }),
+    computed: {
+      getRGB () {
+        return `rgba(${this.r},${this.g},${this.b})`
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  .slider-example {
+    max-width: 240px;
+    border: 1px solid rgba(0,0,0,0.12);
+    .slider-demo-box {
+      height: 160px;
+      padding: 16px;
+    }
+    .sliders-demo {
+      padding: 16px 16px 0;
+    }
+  }
+</style>
+

src/components/MdSlider/MdSlider.vue

@@ -14,6 +14,11 @@
         <div class="md-slider-background-upper" :style="upperStyles"></div>
       </div>
     </div>
+    <div class="md-slider-editable" v-if="mdEditable">
+      <md-field>
+        <md-input v-model.number="editableField" v-bind="{ disabled }"></md-input>
+      </md-field>
+    </div>
   </div>
 </template>
 
@@ -41,9 +46,21 @@
       },
       name: String,
       required: Boolean,
-      disabled: Boolean
+      disabled: Boolean,
+      mdEditable: Boolean
     },
     computed: {
+      editableField: {
+        get () {
+          return this.value
+        },
+        set (newValue) {
+          const value = (newValue < this.min)
+            ? this.min
+            : newValue > this.max ? this.max : newValue
+          this.currentValue = value || this.min
+        },
+      },
       currentValue: {
         get () {
           return this.value
@@ -84,6 +101,18 @@
     label {
       white-space: nowrap;
     }
+    .md-slider-editable {
+      width: 30px;
+      .md-field {
+        padding: 0;
+        margin: 0;
+        min-height: 20px;
+        input {
+          max-width: 30px;
+          text-align: center;
+        }
+      }
+    }
   }
 
   .md-slider {