diff --git a/packages/devui-vue/devui/slider/__tests__/slider.spec.ts b/packages/devui-vue/devui/slider/__tests__/slider.spec.ts
index 146a319fc1aa214826bf92ea70ecb37621306b74..35fd4dea12ef59340d565244e7da6fbd837fcac7 100644
--- a/packages/devui-vue/devui/slider/__tests__/slider.spec.ts
+++ b/packages/devui-vue/devui/slider/__tests__/slider.spec.ts
@@ -1,22 +1,22 @@
-import { mount } from '@vue/test-utils';
-import { nextTick, ref } from 'vue';
-import DSlider from '../src/slider';
+import { mount } from '@vue/test-utils'
+import { nextTick, ref } from 'vue'
+import DSlider from '../src/slider'
 
 describe('d-slider', () => {
   it('slider maxValue && minValue work', () => {
     const wrapper = mount(DSlider, {
       props: {
         max: 50,
-        min: 2,
-      },
-    });
-    const max = wrapper.find('.devui-max_count');
-    const min = wrapper.find('.devui-min_count');
-    expect(min.text()).toBe('2');
-    expect(max.text()).toBe('50');
-  });
+        min: 2
+      }
+    })
+    const max = wrapper.find('.devui-max_count')
+    const min = wrapper.find('.devui-min_count')
+    expect(min.text()).toBe('2')
+    expect(max.text()).toBe('50')
+  })
   it('slider v-model work', async () => {
-    const value = ref(5);
+    const value = ref(5)
     const wrapper = mount({
       components: { DSlider },
       template: `
@@ -24,33 +24,54 @@ describe('d-slider', () => {
       `,
       setup() {
         return {
-          modelValue: value,
-        };
-      },
-    });
-    const input = wrapper.find('input');
-    expect(input.element.value).toBe('5');
-    input.setValue(10);
-    await nextTick();
-    expect(value.value).toBe(10);
-  });
+          modelValue: value
+        }
+      }
+    })
+    const input = wrapper.find('input')
+    expect(input.element.value).toBe('5')
+    input.setValue(10)
+    await nextTick()
+    expect(value.value).toBe(10)
+  })
   it('slider showInput work', () => {
     const wrapper = mount(DSlider, {
       props: {
-        showInput: true,
-      },
-    });
-    const dInput = wrapper.find('.devui-input__out-wrap');
-    expect(dInput.exists()).toBeTruthy();
-  });
+        showInput: true
+      }
+    })
+    const dInput = wrapper.find('.devui-input__out-wrap')
+    expect(dInput.exists()).toBeTruthy()
+  })
 
   it('slider disabled work', () => {
     const wrapper = mount(DSlider, {
       props: {
-        disabled: true,
-      },
-    });
-    const slider = wrapper.find('.devui-slider__runway');
-    expect(slider.classes()).toContain('disabled');
-  });
-});
+        disabled: true
+      }
+    })
+    const slider = wrapper.find('.devui-slider__runway')
+    expect(slider.classes()).toContain('disabled')
+  })
+
+  it('slider tipsRenderer work', () => {
+    const wrapper = mount(DSlider, {
+      props: {
+        tipsRenderer: 'null'
+      }
+    })
+    const slider = wrapper.find('.devui-slider_popover')
+    expect(slider.exists()).toBe(false)
+  })
+
+  it('slider popover work', () => {
+    const wrapper = mount(DSlider, {
+      props: {
+        tipsRenderer: 'bananas',
+        modelValue: 10
+      }
+    })
+    const slider = wrapper.find('.devui-slider_popover-content')
+    expect(slider.text()).toBe('10 bananas')
+  })
+})
diff --git a/packages/devui-vue/devui/slider/index.ts b/packages/devui-vue/devui/slider/index.ts
index f4596b7734eec02a4e6729d10d96a3013edc3f4b..e2cd5fe3d7b7b9c25cf1dda9cb92ff212ee45e51 100644
--- a/packages/devui-vue/devui/slider/index.ts
+++ b/packages/devui-vue/devui/slider/index.ts
@@ -1,7 +1,7 @@
 import type { App } from 'vue'
 import Slider from './src/slider'
 
-Slider.install = function(app: App): void {
+Slider.install = function (app: App): void {
   app.component(Slider.name, Slider)
 }
 
diff --git a/packages/devui-vue/docs/components/slider/index.md b/packages/devui-vue/docs/components/slider/index.md
index 641dd54ff920692ad85bb60e20fb471eeba66e31..ecc880ef355e028d1d608b1a58265b6402d88681 100644
--- a/packages/devui-vue/docs/components/slider/index.md
+++ b/packages/devui-vue/docs/components/slider/index.md
@@ -14,7 +14,6 @@
     <d-slider :min="minValue" :max="maxValue" v-model="inputValue"></d-slider>
   </div>
 </template>
-
 <script>
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
@@ -44,7 +43,7 @@ export default defineComponent({
     <d-slider :min="minValue" :max="maxValue" v-model="inputValue" :step="step"></d-slider>
   </div>
 </template>
-<script lang="ts">
+<script>
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
@@ -75,7 +74,7 @@ export default defineComponent({
     <d-slider :min="minValue" :max="maxValue" v-model="inputValue" showInput></d-slider>
   </div>
 </template>
-<script lang="ts">
+<script>
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
@@ -132,7 +131,7 @@ export default defineComponent({
 <template>
   <div>
     <div class="slider-wrapper" style="padding:20px">
-      <d-slider  :min="minValue" :max="maxValue" v-model="inputValue" tipsRenderer="apple"></d-slider>
+      <d-slider  :min="minValue" :max="maxValue" v-model="inputValue" tipsRenderer="apples"></d-slider>
       <br style="margin-bottom: 20px" />
       <d-slider :min="minValue" :max="maxValue"  v-model="inputValue" tipsRenderer="null" ></d-slider>
     </div>
@@ -168,4 +167,4 @@ d-slider 参数
 | step         | number  | 1     | 可选，滑动输入条的步长，取值必须大于等于 1，且必须可被(max-min)整除 | [基本用法](#可设置Step的滑动组件)    |
 | disabled     | boolean | false | 可选，值为 true 时禁止用户输入                                      | [基本用法](#禁止输入态)              |
 | showInput    | boolean | false | 可选，值为 true 显示输入框                                          | [基本用法](#带有输入框的滑动组件)    |
-| tipsRenderer | string  |       | 可选，渲染 Popover 内容的函数，传入 null 时不显示 Popover           | [基本用法](#异定制popover的显示内容) |
+| tipsRenderer | string  |       | 可选，渲染 Popover 内容的函数，传入'null'时不显示 Popover           | [基本用法](#定制popover的显示内容) |