diff --git a/src/components/modal/confirm.js b/src/components/modal/confirm.js
index d2c2b004..49d9291c 100644
--- a/src/components/modal/confirm.js
+++ b/src/components/modal/confirm.js
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 import Modal from './modal.vue';
 import Icon from '../icon/icon.vue';
-import Button from '../button/button.vue';
+import iButton from '../button/button.vue';
 import { camelcaseToHyphen } from '../../utils/assist';
 
 const prefixCls = 'ivu-modal-confirm';
@@ -26,8 +26,8 @@ Modal.newInstance = properties => {
                     {{{ body }}}
                 </div>
                 <div class="${prefixCls}-footer">
-                    <Button type="ghost" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</Button>
-                    <Button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</Button>
+                    <i-button type="ghost" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button>
+                    <i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
                 </div>
             </div>
         </Modal>
@@ -36,7 +36,7 @@ Modal.newInstance = properties => {
 
     const modal = new Vue({
         el: div,
-        components: { Modal, Button, Icon },
+        components: { Modal, iButton, Icon },
         data: Object.assign(_props, {
             visible: false,
             width: 416,
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index 85bb21bb..c7891941 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -12,8 +12,8 @@
                 <div :class="[prefixCls + '-body']"><slot></slot></div>
                 <div :class="[prefixCls + '-footer']" v-if="!footerHide">
                     <slot name="footer">
-                        <Button type="ghost" size="large" @click="cancel">{{ cancelText }}</Button>
-                        <Button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</Button>
+                        <i-button type="ghost" size="large" @click="cancel">{{ cancelText }}</i-button>
+                        <i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
                     </slot>
                 </div>
             </div>
@@ -22,13 +22,13 @@
 </template>
 <script>
     import Icon from '../icon';
-    import Button from '../button';
+    import iButton from '../button/button.vue';
     import { getScrollBarSize } from '../../utils/assist';
 
     const prefixCls = 'ivu-modal';
 
     export default {
-        components: { Icon, Button },
+        components: { Icon, iButton },
         props: {
             visible: {
                 type: Boolean,
diff --git a/src/components/page/page.vue b/src/components/page/page.vue
index 29d4ff54..9bb7e740 100644
--- a/src/components/page/page.vue
+++ b/src/components/page/page.vue
@@ -145,7 +145,7 @@
                 return [
                     `${prefixCls}-prev`,
                     {
-                        [`${prefixCls}-disabled`]: this.current == 1
+                        [`${prefixCls}-disabled`]: this.current === 1
                     }
                 ]
             },
@@ -153,7 +153,7 @@
                 return [
                     `${prefixCls}-next`,
                     {
-                        [`${prefixCls}-disabled`]: this.current == this.allPages
+                        [`${prefixCls}-disabled`]: this.current === this.allPages
                     }
                 ]
             },
@@ -161,7 +161,7 @@
                 return [
                     `${prefixCls}-item`,
                     {
-                        [`${prefixCls}-item-active`]: this.current == 1
+                        [`${prefixCls}-item-active`]: this.current === 1
                     }
                 ]
             },
@@ -169,7 +169,7 @@
                 return [
                     `${prefixCls}-item`,
                     {
-                        [`${prefixCls}-item-active`]: this.current == this.allPages
+                        [`${prefixCls}-item-active`]: this.current === this.allPages
                     }
                 ]
             }
diff --git a/src/components/poptip/poptip.vue b/src/components/poptip/poptip.vue
index 4b8ae000..5d0647f0 100644
--- a/src/components/poptip/poptip.vue
+++ b/src/components/poptip/poptip.vue
@@ -37,7 +37,7 @@
 </template>
 <script>
     import Popper from '../base/popper';
-    import Button from '../button/button.vue';
+    import iButton from '../button/button.vue';
     import clickoutside from '../../directives/clickoutside';
     import { oneOf } from '../../utils/assist';
 
@@ -46,7 +46,7 @@
     export default {
         mixins: [Popper],
         directives: { clickoutside },
-        components: { iButton: Button },
+        components: { iButton },
         props: {
             trigger: {
                 validator (value) {
@@ -92,9 +92,9 @@
         computed: {
             classes () {
                 return [
-                    prefixCls + '',
+                    `${prefixCls}`,
                     {
-                        [prefixCls + '-confirm']: this.confirm
+                        [`${prefixCls}-confirm`]: this.confirm
                     }
                 ]
             },
@@ -102,7 +102,7 @@
                 let style = {};
 
                 if (!!this.width) {
-                    style.width = '${this.width}px';
+                    style.width = `${this.width}px`;
                 }
                 return style;
             }
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 0c697278..d9a715ec 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -100,14 +100,14 @@
         computed: {
             classes () {
                 return [
-                    prefixCls + '',
+                    `${prefixCls}`,
                     {
-                        [prefixCls + '-visible']: this.visible,
-                        [prefixCls + '-disabled']: this.disabled,
-                        [prefixCls + '-multiple']: this.multiple,
-                        [prefixCls + '-single']: !this.multiple,
-                        [prefixCls + '-show-clear']: this.showCloseIcon,
-                        [prefixCls + '-${this.size}']: !!this.size
+                        [`${prefixCls}-visible`]: this.visible,
+                        [`${prefixCls}-disabled`]: this.disabled,
+                        [`${prefixCls}-multiple`]: this.multiple,
+                        [`${prefixCls}-single`]: !this.multiple,
+                        [`${prefixCls}-show-clear`]: this.showCloseIcon,
+                        [`${prefixCls}-${this.size}`]: !!this.size
                     }
                 ]
             },
@@ -136,7 +136,7 @@
                     if (this.showPlaceholder) {
                         style.width = '100%';
                     } else {
-                        style.width = '${this.inputLength}px';
+                        style.width = `${this.inputLength}px`;
                     }
                 }
 
diff --git a/src/components/slider/index.js b/src/components/slider/index.js
new file mode 100644
index 00000000..155c8ea1
--- /dev/null
+++ b/src/components/slider/index.js
@@ -0,0 +1,3 @@
+import Slider from './slider.vue';
+
+export default Slider;
\ No newline at end of file
diff --git a/src/components/slider/slider.vue b/src/components/slider/slider.vue
new file mode 100644
index 00000000..6c44f01a
--- /dev/null
+++ b/src/components/slider/slider.vue
@@ -0,0 +1,116 @@
+<template>
+    <div :class="classes">
+        <Input-number v-if="!range && showInput" :min="min" :max="max" :step="step" :value.sync="value" :disabled="disabled"></Input-number>
+        <div :class="[prefixCls + '-wrap']" @click="sliderClick">
+            <template v-if="showStops">
+                <div :class="[prefixCls + '-stop']" v-for="item in stops" :style="{ 'left': item + '%' }"></div>
+            </template>
+            <div :class="[prefixCls + '-bar']" :style="barStyle"></div>
+            <div :class="[prefixCls + '-button-wrap']" v-if="!range">
+                <Tooltip placement="top" :content="tipFormat(value)">
+                    <div :class="[prefixCls + '-button']"></div>
+                </Tooltip>
+            </div>
+
+        </div>
+    </div>
+</template>
+<script>
+    import InputNumber from '../../components/input-number/input-number.vue';
+    import Tooltip from '../../components/tooltip/tooltip.vue';
+
+    const prefixCls = 'ivu-slider';
+
+    export default {
+        components: { InputNumber, Tooltip },
+        props: {
+            min: {
+                type: Number,
+                default: 0
+            },
+            max: {
+                type: Number,
+                default: 100
+            },
+            step: {
+                type: Number,
+                default: 1
+            },
+            range: {
+                type: Boolean,
+                default: false
+            },
+            value: {
+                type: [Number, Array],
+                default: 0
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            },
+            showInput: {
+                type: Boolean,
+                default: false
+            },
+            showStops: {
+                type: Boolean,
+                default: false
+            },
+            tipFormat: {
+                type: Function,
+                default (val) {
+                    return val;
+                }
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-input`]: this.showInput,
+                        [`${prefixCls}-range`]: this.range,
+                        [`${prefixCls}-disabled`]: this.disabled
+                    }
+                ]
+            },
+            barStyle () {
+                let style;
+
+                if (this.range) {
+                    style = {
+                        width: (this.value[1] - this.value[0]) / (this.max - this.min) * 100 + '%',
+                        left: (this.value[0] - this.min) / (this.max - this.min) * 100 + '%'
+                    }
+                } else {
+                    style = {
+                        width: (this.value - this.min) / (this.max - this.min) * 100 + '%'
+                    }
+                }
+
+                return style;
+            },
+            stops() {
+                return this.max / this.step;
+            }
+        },
+        methods: {
+            sliderClick () {
+
+            }
+        },
+        ready () {
+            if (this.range) {
+                const isArray = Array.isArray(this.value);
+                if (!isArray || (isArray && this.value.length != 2) || (isArray && (!isNaN(this.value[0]) || !isNaN(this.value[1])))) {
+                    this.value = [0, 0];
+                }
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/src/components/tooltip/tooltip.vue b/src/components/tooltip/tooltip.vue
index 00ad9d7c..adba58f7 100644
--- a/src/components/tooltip/tooltip.vue
+++ b/src/components/tooltip/tooltip.vue
@@ -1,12 +1,12 @@
 <template>
-    <div :class="[prefix]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper">
-        <div :class="[prefix + '-rel']" v-el:reference>
+    <div :class="[prefixCls]" @mouseenter="handleShowPopper" @mouseleave="handleClosePopper">
+        <div :class="[prefixCls + '-rel']" v-el:reference>
             <slot></slot>
         </div>
-        <div :class="[prefix + '-popper']" transition="fade" v-el:popper v-show="!disabled && visible">
-            <div :class="[prefix + '-content']">
-                <div :class="[prefix + '-arrow']"></div>
-                <div :class="[prefix + '-inner']"><slot name="content">{{ content }}</slot></div>
+        <div :class="[prefixCls + '-popper']" transition="fade" v-el:popper v-show="!disabled && visible">
+            <div :class="[prefixCls + '-content']">
+                <div :class="[prefixCls + '-arrow']"></div>
+                <div :class="[prefixCls + '-inner']"><slot name="content">{{ content }}</slot></div>
             </div>
         </div>
     </div>
diff --git a/src/index.js b/src/index.js
index 25c99c90..459580f4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -27,9 +27,11 @@ import Modal from './components/modal';
 import { Select, Option, OptionGroup } from './components/select';
 import Tooltip from './components/tooltip';
 import Poptip from './components/poptip';
+import Slider from './components/slider';
 
 const iview = {
     Button,
+    iButton: Button,
     ButtonGroup: Button.Group,
     Icon,
     Input,
@@ -67,7 +69,8 @@ const iview = {
     iOption: Option,
     iOptionGroup: OptionGroup,
     Tooltip,
-    Poptip
+    Poptip,
+    Slider
 };
 
 module.exports = iview;
\ No newline at end of file
diff --git a/test/routers/tag.vue b/test/routers/tag.vue
index fce8efd7..72a3ee63 100644
--- a/test/routers/tag.vue
+++ b/test/routers/tag.vue
@@ -1,29 +1,25 @@
+<style>
+    body{
+        padding: 50px;
+    }
+</style>
 <template>
-    <Collapse active-key="1">
-        <Panel key="1">
-            史蒂夫·乔布斯
-            <p slot="content">史蒂夫·乔布斯（Steve Jobs），1955年2月24日生于美国加利福尼亚州旧金山，美国发明家、企业家、美国苹果公司联合创办人。</p>
-        </Panel>
-        <Panel key="2">
-            斯蒂夫·盖瑞·沃兹尼亚克
-            <p slot="content">斯蒂夫·盖瑞·沃兹尼亚克（Stephen Gary Wozniak），美国电脑工程师，曾与史蒂夫·乔布斯合伙创立苹果电脑（今之苹果公司）。斯蒂夫·盖瑞·沃兹尼亚克曾就读于美国科罗拉多大学，后转学入美国著名高等学府加州大学伯克利分校（UC Berkeley）并获得电机工程及计算机（EECS）本科学位（1987年）。</p>
-        </Panel>
-        <Panel key="3">
-            乔纳森·伊夫
-            <p slot="content">乔纳森·伊夫是一位工业设计师，现任Apple公司设计师兼资深副总裁，英国爵士。他曾参与设计了iPod，iMac，iPhone，iPad等众多苹果产品。除了乔布斯，他是对苹果那些著名的产品最有影响力的人。</p>
-        </Panel>
-    </Collapse>
-    <Input-number :max="10" :min="1" :value="1" @on-change="change"></Input-number>
-    <Input-number :max="10" :min="1" :step="1.2" :value="1"></Input-number>
+    <Slider :value="10" :tip-format="format">
+
+    </Slider>
 </template>
 <script>
-    import { Collapse, InputNumber } from 'iview';
-    const Panel = Collapse.Panel;
+    import { Slider } from 'iview';
     export default {
-        components: { Collapse, Panel, InputNumber },
+        components: { Slider },
+        data () {
+            return {
+
+            }
+        },
         methods: {
-            change (data) {
-                console.log(data);
+            format (val) {
+                return `进度：${val}%`
             }
         }
     }