docs(MdSlider): add api table, examples

Author: Samuell1

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

@@ -1,18 +1,24 @@
 <example src="./examples/Example.vue" />
+<example src="./examples/WithLabel.vue" />
 
 <template>
   <page-container centered :title="$t('pages.slider.title')">
     <div class="page-container-section">
-      <p>Lorem ipsum</p>
+      <p>Sliders let users select from a range of values by moving the slider thumb. </p>
     </div>
 
     <div class="page-container-section">
       <h2>Slider</h2>
 
-      <code-example title="Example" :component="examples['example']" />
+      <code-example title="Slider" :component="examples['example']" />
+      <code-example title="Slider with label" :component="examples['with-label']" />
 
       <api-item title="API - md-slider">
-        <p>This component do not have any extra option.</p>
+        <p>The following options can be applied to all sliders:</p>
+
+        <api-table :headings="props.headings" :props="props.props" slot="props" />
+
+        <note-block tip>All other <code>&lt;input type=&quot;range&quot;&gt;</code> attributes, such as <strong>name</strong> and <strong>required</strong>, can be used on <code>md-slider</code>.</note-block>
       </api-item>
     </div>
   </page-container>
@@ -22,7 +28,38 @@
   import examples from 'docs-mixins/docsExample'
 
   export default {
-    name: 'Slider',
-    mixins: [examples]
+    name: 'DocSlider',
+    mixins: [examples],
+    data: () => ({
+      props: {
+        headings: ['Name', 'Description', 'Default'],
+        props: [
+          {
+            name: 'v-model',
+            type: 'Number',
+            description: 'The model variable to bind the selection value. If no value is assigned, then it will use default value.',
+            defaults: '0'
+          },
+          {
+            name: 'min',
+            type: 'Number',
+            description: 'Minimal value for slider.',
+            defaults: '0'
+          },
+          {
+            name: 'max',
+            type: 'Number',
+            description: 'Maximal value for slider.',
+            defaults: '100'
+          },
+          {
+            name: 'step',
+            type: 'Number, String',
+            description: 'Step value for slider.',
+            defaults: '1'
+          }
+        ]
+      }
+    })
   }
-</script>
+</script>

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

@@ -1,18 +1,8 @@
 <template>
   <div>
-    <md-slider v-model="test" :max="20">
-      Size
-    </md-slider>
-
-    <md-slider v-model="test2">
-      <md-icon>volume_up</md-icon>
-    </md-slider>
-
-    <md-slider v-model="test2"></md-slider>
-
-    <md-slider v-model="test2" disabled>
-      Disabled
-    </md-slider>
+    <md-slider v-model="slider"></md-slider>
+    Disabled
+    <md-slider disabled></md-slider>
   </div>
 </template>
 
@@ -21,8 +11,8 @@
     name: 'Example',
     data () {
       return {
-        test: 5,
-        test2: 0
+        sliderMax: 0,
+        slider: 0
       }
     }
   }

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

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <md-slider v-model="slider1">
+      Size
+    </md-slider>
+
+    <md-slider v-model="slider2">
+      <md-icon>volume_up</md-icon>
+    </md-slider>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'Example',
+    data () {
+      return {
+        slider1: 10,
+        slider2: 50
+      }
+    }
+  }
+</script>