docs(slider): add docs files

packages/slider/doc/basic-usage.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="block">
+    <span class="demonstration">默认</span>
+    <el-slider v-model="value1" />
+  </div>
+  <div class="block">
+    <span class="demonstration">自定义初始值</span>
+    <el-slider v-model="value2" />
+  </div>
+  <div class="block">
+    <span class="demonstration">隐藏 Tooltip</span>
+    <el-slider v-model="value3" :show-tooltip="false" />
+  </div>
+  <div class="block">
+    <span class="demonstration">格式化 Tooltip</span>
+    <el-slider v-model="value4" :format-tooltip="formatTooltip" />
+  </div>
+  <div class="block">
+    <span class="demonstration">禁用</span>
+    <el-slider v-model="value5" disabled />
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs } from 'vue'
+
+export default {
+  setup() {
+    const values = reactive({
+      value1: 30,
+      value2: 50,
+      value3: 36,
+      value4: 48,
+      value5: 42,
+    })
+    const formatTooltip = (val: number) => `当前: ${ val }`
+    return {
+      ...toRefs(values),
+      formatTooltip,
+    }
+  },
+}
+</script>
+<style>
+.block {
+  padding: 30px 24px;
+  overflow: hidden;
+  border-bottom: 1px solid #EFF2F6;
+}
+
+.demonstration {
+  font-size: 14px;
+  color: #8492A6;
+  line-height: 44px;
+}
+</style>

packages/slider/doc/discrete-values.vue

@@ -0,0 +1,40 @@
+<template>
+  <div class="block">
+    <span class="demonstration">Breakpoints not displayed</span>
+    <el-slider
+      v-model="value1"
+      :step="10"
+    />
+  </div>
+  <div class="block">
+    <span class="demonstration">Breakpoints displayed</span>
+    <el-slider
+      v-model="value2"
+      :step="10"
+      show-stops
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs } from 'vue'
+
+export default {
+  setup() {
+    const values = reactive({
+      value1: 0,
+      value2: 0,
+    })
+    return {
+      ...toRefs(values),
+    }
+  },
+}
+</script>
+<style>
+.demonstration {
+  font-size: 14px;
+  color: #8492A6;
+  line-height: 44px;
+}
+</style>

packages/slider/doc/index.stories.ts

@@ -0,0 +1,14 @@
+export default {
+  title: 'Slider',
+}
+
+export { default as BasicUsage } from './basic-usage.vue'
+
+export { default as DiscreteValues } from './discrete-values.vue'
+
+export { default as RangeSelection } from './range-selection.vue'
+
+export { default as VerticalMode } from './vertical-mode.vue'
+
+export { default as ShowMarks } from './show-marks.vue'
+

packages/slider/doc/range-selection.vue

@@ -0,0 +1,23 @@
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value"
+      range
+      show-stops
+      :max="10"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const value = ref([2, 5])
+    return {
+      value,
+    }
+  },
+}
+</script>

packages/slider/doc/show-marks.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value"
+      range
+      :marks="marks"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { h, ref } from 'vue'
+
+export default {
+  setup() {
+    const value = ref([30, 60])
+    const marks = {
+      0: '0°C',
+      8: '8°C',
+      37: '37°C',
+      50: {
+        style: {
+          color: '#1989FA',
+        },
+        label: h('strong', '50%'),
+      },
+    }
+    return {
+      value,
+      marks,
+    }
+  },
+}
+</script>

packages/slider/doc/vertical-mode.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="block">
+    <el-slider
+      v-model="value"
+      vertical
+      height="200px"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+import { ref } from 'vue'
+
+export default {
+  setup() {
+    const value = ref(0)
+    return {
+      value,
+    }
+  },
+}
+</script>