feat: add minRange & maxRange

README.md

@@ -137,14 +137,16 @@ import vueSlider from 'vue-slider-component/src/vue2-slider.vue'
 | value       | Number, String, Array, Object  | 0        | Initial value (if the value for the array open range model) |
 | data        | Array         | null     | The custom data. |
 | clickable   | Boolean       | true     | Whether or not the slider is clickable as well as drag-able |
-| enable-cross   | Boolean    | true     | Whether to allow crossover in range mode |
-| start-animation | Boolean    | false    | Whether to enable the initial animation |
+| enable-cross*   | Boolean    | true     | Whether to allow crossover in range mode |
+| start-animation* | Boolean    | false    | Whether to enable the initial animation |
 | tooltip-merge* | Boolean       | true    | Whether to merge with tooltip overlap |
 | merge-formatter* | String, Function  | null    | Formatting of the merged value, for example: `merge-formatter="¥{value1} ~ ¥{value2}"` or `` merge-formatter: (v1, v2) => `¥${v1} ~ ¥${v2}` ``. |
 | stop-propagation*  | Boolean       | false    | All events call `stopPropagation` |
 | real-time*  | Boolean       | false    | Whether the real-time computing the layout of the components |
 | lazy*       | Boolean       | false    | At the end of the drag and drop, to synchronization value (if each update to high consumption of operation (such as Ajax), it is more useful) [Example](https://nightcatsama.github.io/vue-slider-component/example/#demo1) |
 | fixed*  | Boolean       | false    | Fixed distance between two values (valid only in range mode). [Example]
+| minRange*  | Number       | null    | Minimum range in range mode
+| maxRange*  | Number       | null    | Maximum range in range mode
 | process-dragable*  | Boolean       | false    | Whether the process bar is draggable (valid only in range mode). [Example](https://nightcatsama.github.io/vue-slider-component/example/#demo9) |
 | formatter*        | String,Function | null   | Formatting of a tooltip's values, for example: `formatter='¥{value}'` or `` formatter: (v) => `¥${v}` ``. [Example](https://nightcatsama.github.io/vue-slider-component/example/#demo3) |
 | use-keyboard*        | Boolean | false   | Whether to open the keyboard control (Only support the arrow keys). [Example](https://nightcatsama.github.io/vue-slider-component/example/#demo3) |

example/src/demo.vue

@@ -148,7 +148,7 @@
         <vue-slider ref="slider7" id="custom-tootip" v-bind="demo.demo7" v-model="demo.demo7.value">
           <template slot="tooltip" scope="tooltip">
             <div class="custom-tooltip">
-              <img :src="tooltip.index === 1 ? black_cat : orange_cat" :width="tooltip.value"></img>
+              <img :src="tooltip.index === 1 ? blackCat : orangeCat" :width="tooltip.value"></img>
               {{ tooltip.value }}
             </div>
           </template>
@@ -224,8 +224,8 @@ export default {
   },
   data () {
     return {
-      black_cat: 'http://7xqnme.com1.z0.glb.clouddn.com/17-6-8/62223522.jpg',
-      orange_cat: 'http://7xqnme.com1.z0.glb.clouddn.com/17-6-8/88421800.jpg',
+      blackCat: require('./assets/blackCat.png'),
+      orangeCat: require('./assets/orangeCat.png'),
       demo: {
         default: {
           value: 0,
@@ -239,6 +239,10 @@ export default {
           interval: 1,
           startAnimation: false,
           tooltipMerge: true,
+          processDragable: false,
+          minRange: null,
+          maxRange: null,
+          fixed: false,
           debug: process && process.env && process.env.NODE_ENV !== 'production',
           disabled: false,
           show: true,
@@ -490,7 +494,9 @@ export default {
           focusStyle: '键盘控制时，算滑块获得焦点时样式',
           startAnimation: '是否开启初始动画',
           value: '值',
-          enableCross: '在范围模式中，是否允许交叉'
+          enableCross: '在范围模式中，是否允许交叉',
+          minRange: '最小范围',
+          maxRange: '最大范围'
         }
       },
       diy_tooltip: '',
@@ -539,7 +545,7 @@ export default {
     let code = `<!-- In vue2.5 above, please use slot-scope instead of scope -->
 <template slot="tooltip" scope="tooltip">
   <div class="custom-tooltip">
-    <img :src="tooltip.index === 1 ? black_cat : orange_cat" :width="tooltip.value"></img>
+    <img :src="tooltip.index === 1 ? blackCat : orangeCat" :width="tooltip.value"></img>
     {{ tooltip.value }}
   </div>
 </template>`

example/src/vue-slider/vue2-slider.vue

@@ -257,6 +257,12 @@
         type: Boolean,
         default: false
       },
+      minRange: {
+        type: Number
+      },
+      maxRange: {
+        type: Number
+      },
       processDragable: {
         type: Boolean,
         default: false
@@ -802,10 +808,11 @@
         let range = this.isRange ? this.limit[this.currentSlider] : this.limit
         let valueRange = this.isRange ? this.valueLimit[this.currentSlider] : this.valueLimit
         if (pos >= range[0] && pos <= range[1]) {
-          let v = this.getValueByIndex(Math.round(pos / this.gap))
+          let index = Math.round(pos / this.gap)
+          let v = this.getValueByIndex(index)
           this.setTransform(pos)
           this.setCurrentValue(v, isDrag)
-          if (this.isRange && this.fixed) {
+          if (this.isRange && (this.fixed || this.isLessRange(pos, index))) {
             this.setTransform(pos + ((this.fixedValue * this.gap) * (this.currentSlider === 0 ? 1 : -1)), true)
             this.setCurrentValue((v * this.multiple + (this.fixedValue * this.spacing * this.multiple * (this.currentSlider === 0 ? 1 : -1))) / this.multiple, isDrag, true)
           }
@@ -824,6 +831,22 @@
         }
         this.crossFlag = false
       },
+      isLessRange (pos, index) {
+        if (!this.isRange || (!this.minRange && !this.maxRange)) {
+          return false
+        }
+
+        const diff = this.currentSlider === 0 ? this.currentIndex[1] - index : index - this.currentIndex[0]
+        if (this.minRange && diff <= this.minRange) {
+          this.fixedValue = this.minRange
+          return true
+        }
+        if (this.maxRange && diff >= this.maxRange) {
+          this.fixedValue = this.maxRange
+          return true
+        }
+        return false
+      },
       isDiff (a, b) {
         if (Object.prototype.toString.call(a) !== Object.prototype.toString.call(b)) {
           return true

src/vue2-slider.vue

@@ -257,6 +257,12 @@
         type: Boolean,
         default: false
       },
+      minRange: {
+        type: Number
+      },
+      maxRange: {
+        type: Number
+      },
       processDragable: {
         type: Boolean,
         default: false
@@ -802,10 +808,11 @@
         let range = this.isRange ? this.limit[this.currentSlider] : this.limit
         let valueRange = this.isRange ? this.valueLimit[this.currentSlider] : this.valueLimit
         if (pos >= range[0] && pos <= range[1]) {
-          let v = this.getValueByIndex(Math.round(pos / this.gap))
+          let index = Math.round(pos / this.gap)
+          let v = this.getValueByIndex(index)
           this.setTransform(pos)
           this.setCurrentValue(v, isDrag)
-          if (this.isRange && this.fixed) {
+          if (this.isRange && (this.fixed || this.isLessRange(pos, index))) {
             this.setTransform(pos + ((this.fixedValue * this.gap) * (this.currentSlider === 0 ? 1 : -1)), true)
             this.setCurrentValue((v * this.multiple + (this.fixedValue * this.spacing * this.multiple * (this.currentSlider === 0 ? 1 : -1))) / this.multiple, isDrag, true)
           }
@@ -824,6 +831,22 @@
         }
         this.crossFlag = false
       },
+      isLessRange (pos, index) {
+        if (!this.isRange || (!this.minRange && !this.maxRange)) {
+          return false
+        }
+
+        const diff = this.currentSlider === 0 ? this.currentIndex[1] - index : index - this.currentIndex[0]
+        if (this.minRange && diff <= this.minRange) {
+          this.fixedValue = this.minRange
+          return true
+        }
+        if (this.maxRange && diff >= this.maxRange) {
+          this.fixedValue = this.maxRange
+          return true
+        }
+        return false
+      },
       isDiff (a, b) {
         if (Object.prototype.toString.call(a) !== Object.prototype.toString.call(b)) {
           return true