add Slider component

add Slider component

src/components/slider/slider.vue

@@ -1,23 +1,53 @@
 <template>
     <div :class="classes">
-        <Input-number v-if="!range && showInput" :min="min" :max="max" :step="step" :value.sync="value" :disabled="disabled"></Input-number>
+        <Input-number
-        <div :class="[prefixCls + '-wrap']" @click="sliderClick">
+            v-if="!range && showInput"
+            :min="min"
+            :max="max"
+            :step="step"
+            :value="value"
+            :disabled="disabled"
+            @on-change="handleInputChange"></Input-number>
+        <div :class="[prefixCls + '-wrap']" v-el:slider @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">
+            <template v-if="range">
-                <Tooltip placement="top" :content="tipFormat(value)">
+                <div
-                    <div :class="[prefixCls + '-button']"></div>
+                    :class="[prefixCls + '-button-wrap']"
-                </Tooltip>
+                    :style="{left: firstPosition + '%'}"
-            </div>
+                    @mousedown="onFirstButtonDown">
-
+                    <Tooltip placement="top" :content="tipFormat(value[0])" v-ref:tooltip>
+                        <div :class="button1Classes"></div>
+                    </Tooltip>
+                </div>
+                <div
+                    :class="[prefixCls + '-button-wrap']"
+                    :style="{left: secondPosition + '%'}"
+                    @mousedown="onSecondButtonDown">
+                    <Tooltip placement="top" :content="tipFormat(value[1])" v-ref:tooltip2>
+                        <div :class="button2Classes"></div>
+                    </Tooltip>
+                </div>
+            </template>
+            <template v-else>
+                <div
+                    :class="[prefixCls + '-button-wrap']"
+                    :style="{left: singlePosition + '%'}"
+                    @mousedown="onSingleButtonDown">
+                    <Tooltip placement="top" :content="tipFormat(value)" v-ref:tooltip>
+                        <div :class="buttonClasses"></div>
+                    </Tooltip>
+                </div>
+            </template>
         </div>
     </div>
 </template>
 <script>
     import InputNumber from '../../components/input-number/input-number.vue';
     import Tooltip from '../../components/tooltip/tooltip.vue';
+    import { getStyle } from '../../utils/assist';
 
     const prefixCls = 'ivu-slider';
 
@@ -65,7 +95,20 @@
         },
         data () {
             return {
-                prefixCls: prefixCls
+                prefixCls: prefixCls,
+                dragging: false,
+                firstDragging: false,
+                secondDragging: false,
+                startX: 0,
+                currentX: 0,
+                startPos: 0,
+                newPos: null,
+                oldSingleValue: this.value,
+                oldFirstValue: this.value[0],
+                oldSecondValue: this.value[1],
+                singlePosition: (this.value - this.min) / (this.max - this.min) * 100,
+                firstPosition: (this.value[0] - this.min) / (this.max - this.min) * 100,
+                secondPosition: (this.value[1] - this.min) / (this.max - this.min) * 100
             }
         },
         computed: {
@@ -73,12 +116,36 @@
                 return [
                     `${prefixCls}`,
                     {
-                        [`${prefixCls}-input`]: this.showInput,
+                        [`${prefixCls}-input`]: this.showInput && !this.range,
                         [`${prefixCls}-range`]: this.range,
                         [`${prefixCls}-disabled`]: this.disabled
                     }
                 ]
             },
+            buttonClasses () {
+                return [
+                    `${prefixCls}-button`,
+                    {
+                        [`${prefixCls}-button-dragging`]: this.dragging
+                    }
+                ];
+            },
+            button1Classes () {
+                return [
+                    `${prefixCls}-button`,
+                    {
+                        [`${prefixCls}-button-dragging`]: this.firstDragging
+                    }
+                ];
+            },
+            button2Classes () {
+                return [
+                    `${prefixCls}-button`,
+                    {
+                        [`${prefixCls}-button-dragging`]: this.secondDragging
+                    }
+                ];
+            },
             barStyle () {
                 let style;
 
@@ -97,19 +164,249 @@
             },
             stops() {
                 return this.max / this.step;
+            },
+            sliderWidth () {
+                return parseInt(getStyle(this.$els.slider, 'width'), 10);
+            }
+        },
+        watch: {
+            value (val) {
+                this.$nextTick(() => {
+                    this.$refs.tooltip.updatePopper();
+                    if (this.range) {
+                        this.$refs.tooltip2.updatePopper();
+                    }
+                });
+                this.updateValue(val);
             }
         },
         methods: {
-            sliderClick () {
+            updateValue (val, init = false) {
+                if (this.range) {
+                    let value = [...val];
+                    if (init) {
+                        if (value[0] > value[1]) {
+                            value = [this.min, this.max];
+                        }
+                    } else {
+                        if (value[0] > value[1]) {
+                            value[0] = value[1];
+                        }
+                    }
+                    if (value[0] < this.min) {
+                        value[0] = this.min;
+                    }
+                    if (value[0] > this.max) {
+                        value[0] = this.max;
+                    }
+                    if (value[1] < this.min) {
+                        value[1] = this.min;
+                    }
+                    if (value[1] > this.max) {
+                        value[1] = this.max;
+                    }
+                    if (this.value[0] === value[0] && this.value[1] === value[1]) return;
 
+                    this.value = value;
+                    this.setFirstPosition(this.value[0]);
+                    this.setSecondPosition(this.value[1]);
+                } else {
+                    if (val < this.min) {
+                        this.value = this.min;
+                    }
+                    if (val > this.max) {
+                        this.value = this.max;
+                    }
+                    this.setSinglePosition(this.value);
+                }
+            },
+            sliderClick (event) {
+                if (this.disabled) return;
+                const currentX = event.clientX;
+                const sliderOffsetLeft = this.$els.slider.getBoundingClientRect().left;
+                const newPos = (currentX - sliderOffsetLeft) / this.sliderWidth * 100;
+
+                if (this.range) {
+                    let type = '';
+                    if (newPos <= this.firstPosition) {
+                        type = 'First';
+                    } else if (newPos >= this.secondPosition) {
+                        type = 'Second';
+                    } else {
+                        if ((newPos - this.firstPosition) <= (this.secondPosition - newPos)) {
+                            type = 'First';
+                        } else {
+                            type = 'Second';
+                        }
+                    }
+                    this[`change${type}Position`](newPos);
+                } else {
+                    this.changeSinglePosition(newPos);
+                }
+            },
+            // for single use
+            onSingleButtonDown (event) {
+                if (this.disabled) return;
+                this.onSingleDragStart(event);
+                window.addEventListener('mousemove', this.onSingleDragging);
+                window.addEventListener('mouseup', this.onSingleDragEnd);
+            },
+            onSingleDragStart (event) {
+                this.dragging = true;
+                this.startX = event.clientX;
+                this.startPos = parseInt(this.singlePosition, 10);
+            },
+            onSingleDragging (event) {
+                if (this.dragging) {
+                    this.$refs.tooltip.visible = true;
+                    this.currentX = event.clientX;
+                    const diff = (this.currentX - this.startX) / this.sliderWidth * 100;
+                    this.newPos = this.startPos + diff;
+                    this.changeSinglePosition(this.newPos);
+                }
+            },
+            onSingleDragEnd () {
+                if (this.dragging) {
+                    this.dragging = false;
+                    this.$refs.tooltip.visible = false;
+                    this.changeSinglePosition(this.newPos);
+                    window.removeEventListener('mousemove', this.onSingleDragging);
+                    window.removeEventListener('mouseup', this.onSingleDragEnd);
+                }
+            },
+            changeSinglePosition (newPos) {
+                if (newPos >= 0 && (newPos <= 100)) {
+                    const lengthPerStep = 100 / ((this.max - this.min) / this.step);
+                    const steps = Math.round(newPos / lengthPerStep);
+
+                    this.value = Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min);
+                    this.setSinglePosition(this.value);
+                    if (!this.dragging) {
+                        if (this.value !== this.oldSingleValue) {
+                            this.$emit('on-change', this.value);
+                            this.oldSingleValue = this.value;
+                        }
+                    }
+                }
+            },
+            setSinglePosition (val) {
+                this.singlePosition = (val - this.min) / (this.max - this.min) * 100;
+            },
+            handleInputChange (val) {
+                this.value = val;
+                this.setSinglePosition(val);
+                this.$emit('on-change', this.value);
+            },
+            // for range use first
+            onFirstButtonDown (event) {
+                if (this.disabled) return;
+                this.onFirstDragStart(event);
+                window.addEventListener('mousemove', this.onFirstDragging);
+                window.addEventListener('mouseup', this.onFirstDragEnd);
+            },
+            onFirstDragStart (event) {
+                this.firstDragging = true;
+                this.startX = event.clientX;
+                this.startPos = parseInt(this.firstPosition, 10);
+            },
+            onFirstDragging (event) {
+                if (this.firstDragging) {
+                    this.$refs.tooltip.visible = true;
+                    this.currentX = event.clientX;
+                    const diff = (this.currentX - this.startX) / this.sliderWidth * 100;
+                    this.newPos = this.startPos + diff;
+                    this.changeFirstPosition(this.newPos);
+                }
+            },
+            onFirstDragEnd () {
+                if (this.firstDragging) {
+                    this.firstDragging = false;
+                    this.$refs.tooltip.visible = false;
+                    this.changeFirstPosition(this.newPos);
+                    window.removeEventListener('mousemove', this.onFirstDragging);
+                    window.removeEventListener('mouseup', this.onFirstDragEnd);
+                }
+            },
+            changeFirstPosition (newPos) {
+                if (newPos >= 0 && (newPos <= this.secondPosition)) {
+                    const lengthPerStep = 100 / ((this.max - this.min) / this.step);
+                    const steps = Math.round(newPos / lengthPerStep);
+
+                    this.value = [Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min), this.value[1]];
+                    this.setFirstPosition(this.value[0]);
+                    if (!this.firstDragging) {
+                        if (this.value[0] !== this.oldFirstValue) {
+                            this.$emit('on-change', this.value);
+                            this.oldFirstValue = this.value[0];
+                        }
+                    }
+                }
+            },
+            setFirstPosition (val) {
+                this.firstPosition = (val - this.min) / (this.max - this.min) * 100;
+            },
+            // for range use second
+            onSecondButtonDown (event) {
+                if (this.disabled) return;
+                this.onSecondDragStart(event);
+                window.addEventListener('mousemove', this.onSecondDragging);
+                window.addEventListener('mouseup', this.onSecondDragEnd);
+            },
+            onSecondDragStart (event) {
+                this.secondDragging = true;
+                this.startX = event.clientX;
+                this.startPos = parseInt(this.secondPosition, 10);
+            },
+            onSecondDragging (event) {
+                if (this.secondDragging) {
+                    this.$refs.tooltip2.visible = true;
+                    this.currentX = event.clientX;
+                    const diff = (this.currentX - this.startX) / this.sliderWidth * 100;
+                    this.newPos = this.startPos + diff;
+                    this.changeSecondPosition(this.newPos);
+                }
+            },
+            onSecondDragEnd () {
+                if (this.secondDragging) {
+                    this.secondDragging = false;
+                    this.$refs.tooltip2.visible = false;
+                    this.changeSecondPosition(this.newPos);
+                    window.removeEventListener('mousemove', this.onSecondDragging);
+                    window.removeEventListener('mouseup', this.onSecondDragEnd);
+                }
+            },
+            changeSecondPosition (newPos) {
+                if (newPos >= this.firstPosition && (newPos <= 100)) {
+                    const lengthPerStep = 100 / ((this.max - this.min) / this.step);
+                    const steps = Math.round(newPos / lengthPerStep);
+
+                    this.value = [this.value[0], Math.round(steps * lengthPerStep * (this.max - this.min) * 0.01 + this.min)];
+                    this.setSecondPosition(this.value[1]);
+                    if (!this.secondDragging) {
+                        if (this.value[1] !== this.oldSecondValue) {
+                            this.$emit('on-change', this.value);
+                            this.oldSecondValue = this.value[1];
+                        }
+                    }
+                }
+            },
+            setSecondPosition (val) {
+                this.secondPosition = (val - this.min) / (this.max - this.min) * 100;
             }
         },
         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])))) {
+                if (!isArray || (isArray && this.value.length != 2) || (isArray && (isNaN(this.value[0]) || isNaN(this.value[1])))) {
-                    this.value = [0, 0];
+                    this.value = [this.min, this.max];
+                } else {
+                    this.updateValue(this.value, true);
                 }
+            } else {
+                if (typeof this.value !== 'number') {
+                    this.value = this.min;
+                }
+                this.updateValue(this.value);
             }
         }
     }

src/styles/components/index.less

@@ -25,3 +25,4 @@
 @import "tooltip";
 @import "poptip";
 @import "input";
+@import "slider";

src/styles/components/input-number.less

@@ -73,7 +73,7 @@
         line-height: 12px;
         font-size: 14px;
         color: #999;
-        user-select: none;
+        .user-select();
         position: absolute;
         right: 4px;
         .transition(all @transition-time linear);

src/styles/components/modal.less

@@ -9,7 +9,7 @@
     top: 100px;
 
     &-hidden {
-        display: none;
+        display: none !important;
     }
 
     &-wrap {

src/styles/components/page.less

@@ -19,7 +19,7 @@
         text-align: center;
         list-style: none;
         background-color: #fff;
-        user-select: none;
+        .user-select();
         cursor: pointer;
         font-family: Arial;
         border: 1px solid @border-color-base;

src/styles/components/select.less

@@ -15,7 +15,7 @@
         display: block;
         box-sizing: border-box;
         outline: none;
-        user-select: none;
+        .user-select();
         cursor: pointer;
 
         background-color: #fff;

src/styles/components/slider.less

@@ -0,0 +1,102 @@
+@slider-prefix-cls: ~"@{css-prefix}slider";
+
+.@{slider-prefix-cls} {
+    &-wrap{
+        width: 100%;
+        height: @slider-height;
+        margin: @slider-margin;
+        background-color: @border-color-split;
+        border-radius: @btn-border-radius-small;
+        vertical-align: middle;
+        position: relative;
+        cursor: pointer;
+    }
+
+    &-button-wrap{
+        .square(@slider-button-wrap-size);
+        text-align: center;
+        background-color: transparent;
+        position: absolute;
+        top: @slider-button-wrap-offset;
+        .transform(translateX(-50%));
+
+        .@{tooltip-prefix-cls} {
+            display: block;
+            .user-select();
+        }
+    }
+
+    &-button{
+        width: 12px;
+        height: 12px;
+        border: 2px solid @slider-color;
+        border-radius: 50%;
+        background-color: #fff;
+        .transition(all @transition-time linear);
+
+        &:hover,
+        &-dragging
+        {
+            border-color: @primary-color;
+            .transform(scale(1.5));
+        }
+
+        &:hover{
+            cursor: grab;
+        }
+        &-dragging,
+        &-dragging:hover
+        {
+            cursor: grabbing;
+        }
+    }
+
+    &-bar{
+        height: @slider-height;
+        background: @slider-color;
+        border-radius: @btn-border-radius-small;
+        position: absolute;
+    }
+}
+
+.@{slider-prefix-cls}-disabled{
+    cursor: @cursor-disabled;
+
+    .@{slider-prefix-cls}-wrap{
+        background-color: @slider-disabled-color;
+        cursor: @cursor-disabled;
+    }
+    .@{slider-prefix-cls}-bar{
+        background-color: @slider-disabled-color;
+    }
+
+    .@{slider-prefix-cls}-button{
+        border-color: @slider-disabled-color;
+
+        &:hover,
+        &-dragging
+        {
+            border-color: @slider-disabled-color;
+        }
+        &:hover{
+            cursor: @cursor-disabled;
+        }
+        &-dragging,
+        &-dragging:hover
+        {
+            cursor: @cursor-disabled;
+        }
+    }
+}
+
+.@{slider-prefix-cls}-input{
+    .@{slider-prefix-cls}-wrap{
+        width: auto;
+        margin-right: 100px;
+    }
+
+    .@{input-number-prefix-cls}{
+        float: right;
+        margin-top: -14px;
+    }
+}

src/styles/components/switch.less

@@ -11,7 +11,7 @@
     background-color: #ccc;
     position: relative;
     cursor: pointer;
-    user-select: none;
+    .user-select();
     .transition(all @transition-time @ease-in-out);
 
     &-inner {

src/styles/mixins/button.less

@@ -120,7 +120,7 @@
     border: 1px solid transparent;
     white-space: nowrap;
     line-height: @line-height-base;
-    user-select: none;
+    .user-select();
     .button-size(@btn-padding-base; @btn-font-size; @btn-border-radius);
     .transform(translate3d(0, 0, 0));
     //.transition(all @transition-time linear);

src/styles/mixins/common.less

@@ -13,3 +13,9 @@
         color: @color;
     }
 }
+
+.user-select(@type: none) {
+    -webkit-user-select: @type;
+    -moz-user-select: @type;
+    user-select: @type;
+}

src/styles/themes/default/custom.less

@@ -1,6 +1,7 @@
 // Prefix
 @css-prefix             : ivu-;
 @css-prefix-iconfont    : ivu-icon;
+
 // Color
 @primary-color          : #3399ff;
 @info-color             : #2db7f5;
@@ -120,3 +121,11 @@
 @animation-time         : .3s;
 @transition-time        : .2s;
 @ease-in-out            : ease-in-out;
+
+// Slider
+@slider-color              : fade(@primary-color, 80%);
+@slider-height             : 4px;
+@slider-margin             : 16px 0;
+@slider-button-wrap-size   : 18px;
+@slider-button-wrap-offset : -5px;
+@slider-disabled-color     : #ccc;

src/utils/assist.js

@@ -53,3 +53,26 @@ export function getScrollBarSize (fresh) {
 
 // watch DOM change
 export const MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver || false;
+
+const SPECIAL_CHARS_REGEXP = /([\:\-\_]+(.))/g;
+const MOZ_HACK_REGEXP = /^moz([A-Z])/;
+
+function camelCase(name) {
+    return name.replace(SPECIAL_CHARS_REGEXP, function(_, separator, letter, offset) {
+        return offset ? letter.toUpperCase() : letter;
+    }).replace(MOZ_HACK_REGEXP, 'Moz$1');
+}
+// getStyle
+export function getStyle (element, styleName) {
+    if (!element || !styleName) return null;
+    styleName = camelCase(styleName);
+    if (styleName === 'float') {
+        styleName = 'cssFloat';
+    }
+    try {
+        var computed = document.defaultView.getComputedStyle(element, '');
+        return element.style[styleName] || computed ? computed[styleName] : null;
+    } catch(e) {
+        return element.style[styleName];
+    }
+}

test/routers/slider.vue

@@ -1,7 +1,12 @@
 <template>
-    <Slider :value="10" :tip-format="format">
+    <div style="width: 400px;margin:100px;">
-
+        {{ value }}
-    </Slider>
+        <Slider @on-change="change" :step="10" show-stops></Slider>
+        <Slider :value.sync="value" show-input range @on-change="change" :step="13"></Slider>
+        <!--<Slider :max="10"></Slider>-->
+        <!--<Slider :step="13"></Slider>-->
+        <!--<Slider :step="13" :max="60"></Slider>-->
+    </div>
 </template>
 <script>
     import { Slider } from 'iview';
@@ -9,12 +14,15 @@
         components: { Slider },
         data () {
             return {
-
+                value: [20, 50]
             }
         },
         methods: {
             format (val) {
                 return `进度：${val}%`
+            },
+            change (data) {
+                console.log(data)
             }
         }
     }