diff --git a/devui/slider/__tests__/slider.spec.ts b/devui/slider/__tests__/slider.spec.ts
index 9f9d66806dfb0162d5cb95122cdbc10fc8b8df7e..146a319fc1aa214826bf92ea70ecb37621306b74 100644
--- a/devui/slider/__tests__/slider.spec.ts
+++ b/devui/slider/__tests__/slider.spec.ts
@@ -1,2 +1,56 @@
 import { mount } from '@vue/test-utils';
-import DSlider from '../src/slider'
\ No newline at end of file
+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');
+  });
+  it('slider v-model work', async () => {
+    const value = ref(5);
+    const wrapper = mount({
+      components: { DSlider },
+      template: `
+        <d-slider v-model:modelValue="modelValue" showInput />
+      `,
+      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);
+  });
+  it('slider showInput work', () => {
+    const wrapper = mount(DSlider, {
+      props: {
+        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');
+  });
+});
diff --git a/devui/slider/src/slider.scss b/devui/slider/src/slider.scss
index 998b18c053769a0fd45369602ae68b19d9fe1729..756f164a1f507a1fa5abe07262dd0a616d91c9f4 100644
--- a/devui/slider/src/slider.scss
+++ b/devui/slider/src/slider.scss
@@ -89,7 +89,8 @@
     color: $devui-text;
   }
 
-  .devui-input__wrap {
+  .devui-input__out-wrap {
+    font-size: $devui-font-size;
     position: absolute;
     right: -60px;
     top: -12px;
@@ -99,6 +100,7 @@
 
     input {
       width: 40px;
+      text-align: center;
     }
   }
 }
diff --git a/devui/slider/src/slider.tsx b/devui/slider/src/slider.tsx
index 46bc6d70760c7089023c2480b6d735d25b10743f..35975ec450eca20885d09ce36141b68b88e32320 100644
--- a/devui/slider/src/slider.tsx
+++ b/devui/slider/src/slider.tsx
@@ -22,7 +22,13 @@ export default defineComponent({
     //当前的位置以百分比显示
     const percentDispaly = ref<string>('');
     const renderShowInput = () => {
-      return props.showInput ? <d-input onInput={handleOnInput} value={inputValue.value + ''}></d-input> : '';
+      return props.showInput ? (
+        <div class='devui-input__out-wrap'>
+          <input onInput={handleOnInput} value={inputValue.value + ''}></input>
+        </div>
+      ) : (
+        ''
+      );
     };
 
     //当传入modelValue时用以定位button的位置
@@ -142,6 +148,7 @@ export default defineComponent({
         const re = /^(?:[1-9]?\d|100)$/;
         if (re.test(`${inputValue.value}`)) {
           percentDispaly.value = ((inputValue.value - props.min) * 100) / (props.max - props.min) + '%';
+          ctx.emit('update:modelValue', inputValue.value);
         }
       }
     }