Slider add new prop: marks

src/components/slider/marker.js

@@ -0,0 +1,17 @@
+export default {
+    name: 'SliderMarker',
+    props: {
+        mark: {
+            type: [String, Object]
+        }
+    },
+    render (h) {
+        console.log(this.mark.label)
+        let label = typeof this.mark === 'string' ? this.mark : [this.mark.label];
+
+        return h('div', {
+            class: 'ivu-slider-marks-item',
+            style: this.mark.style || {}
+        }, label);
+    }
+};

src/components/slider/slider.vue

@@ -15,6 +15,10 @@
             ref="slider" @click.self="sliderClick"
         >
             <input type="hidden" :name="name" :value="exportValue">
+            <div
+                :class="[prefixCls + '-bar']"
+                :style="barStyle"
+                @click.self="sliderClick"></div>
             <template v-if="showStops">
                 <div
                     :class="[prefixCls + '-stop']"
@@ -23,10 +27,24 @@
                     @click.self="sliderClick"
                 ></div>
             </template>
-            <div
-                :class="[prefixCls + '-bar']"
-                :style="barStyle"
-                @click.self="sliderClick"></div>
+            <template v-if="markList.length > 0">
+                <div
+                    v-for="(item, key) in markList"
+                    :key="key"
+                    :class="[prefixCls + '-stop']"
+                    :style="{ 'left': item.position + '%' }"
+                    @click.self="sliderClick"
+                ></div>
+                <div class="ivu-slider-marks">
+                    <SliderMarker
+                        v-for="(item, key) in markList"
+                        :key="key"
+                        :mark="item.mark"
+                        :style="{ 'left': item.position + '%' }"
+                        @click.native="sliderClick"
+                    />
+                </div>
+            </template>
             <div
                 :class="[prefixCls + '-button-wrap']"
                 :style="{left: minPosition + '%'}"
@@ -83,6 +101,7 @@
 <script>
     import InputNumber from '../../components/input-number/input-number.vue';
     import Tooltip from '../../components/tooltip/tooltip.vue';
+    import SliderMarker from './marker';
     import { getStyle, oneOf } from '../../utils/assist';
     import { on, off } from '../../utils/dom';
     import Emitter from '../../mixins/emitter';
@@ -94,7 +113,7 @@
     export default {
         name: 'Slider',
         mixins: [ Emitter, mixinsForm ],
-        components: { InputNumber, Tooltip },
+        components: { InputNumber, Tooltip, SliderMarker },
         props: {
             min: {
                 type: Number,
@@ -155,6 +174,10 @@
             activeChange: {
                 type: Boolean,
                 default: true
+            },
+            // 4.0.0
+            marks: {
+                type: Object
             }
         },
         data () {
@@ -255,6 +278,19 @@
                 }
                 return result;
             },
+            markList() {
+                if (!this.marks) return [];
+
+                const marksKeys = Object.keys(this.marks);
+                return marksKeys.map(parseFloat)
+                    .sort((a, b) => a - b)
+                    .filter(point => point <= this.max && point >= this.min)
+                    .map(point => ({
+                        point,
+                        position: (point - this.min) * 100 / (this.max - this.min),
+                        mark: this.marks[point]
+                    }));
+            },
             tipDisabled () {
                 return this.tipFormat(this.currentValue[0]) === null || this.showTip === 'never';
             },

src/styles/components/slider.less

@@ -65,9 +65,24 @@
         position: absolute;
         .square(@slider-height);
         border-radius: 50%;
-        background-color: @slider-disabled-color;
+        background-color: #fff;
         transform: translateX(-50%);
     }
+
+    &-marks{
+        top: 0;
+        left: 12px;
+        width: 18px;
+        height: 100%;
+
+        &-item{
+            position: absolute;
+            transform: translateX(-50%);
+            font-size: @font-size-base;
+            color: @subsidiary-color;
+            margin-top: 15px;
+        }
+    }
 }
 
 .@{slider-prefix-cls}-disabled{