feat: add piecewise-filter

README.md

@@ -131,6 +131,7 @@ import vueSlider from 'vue-slider-component/src/vue2-slider.vue'
 | debug       | Boolean       | true | If you do not need to print errors in the production environment, can be set to `process.env.NODE_ENV !== 'production'` |
 | piecewise   | Boolean       | false    | Whether to display sub-values as as piecewise nodes |
 | piecewise-label*   | Boolean  | false  | Whether to display the label. [Example](https://nightcatsama.github.io/vue-slider-component/example/#demo2) |
+| piecewise-filter*   | Function  | null  | Used to filter piecewise, it works well when the data is large |
 | tooltip     | String, Boolean | always    | Control the tooltip, optional value: ['hover', 'always', false] |
 | tooltip-dir | String[,Array(in range model) | top(in horizontal)or left(in vertical) | Set the direction of the tooltip, optional value: ['top', 'bottom', 'left', 'right'] |
 | reverse     | Boolean       | false    | Whether the component reverse (such as Right to left, Top to bottom) |

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

@@ -110,20 +110,25 @@
         </div>
       </template>
       <ul class="vue-slider-piecewise">
-        <li v-for="(piecewiseObj, index) in piecewiseDotWrap" class="vue-slider-piecewise-item" :style="[piecewiseDotStyle, piecewiseObj.style]" :key="index">
+        <li 
+          v-for="(piecewiseObj, index) in piecewiseDotWrap" 
+          class="vue-slider-piecewise-item" 
+          :style="[piecewiseDotStyle, piecewiseObj.style]" 
+          :key="index"
+        >
           <slot
             name="piecewise"
             :value="val"
             :label="piecewiseObj.label"
             :index="index"
             :first="index === 0"
             :last="index === piecewiseDotWrap.length - 1"
-            :active="piecewiseObj.inRange"
+            :active="isActive(piecewiseObj.index)"
           >
             <span
               v-if="piecewise"
               class="vue-slider-piecewise-dot"
-              :style="[ piecewiseStyle, piecewiseObj.inRange ? piecewiseActiveStyle : null ]"
+              :style="[ piecewiseStyle, isActive(piecewiseObj.index) ? piecewiseActiveStyle : null ]"
             ></span>
           </slot>
 
@@ -134,12 +139,12 @@
             :index="index"
             :first="index === 0"
             :last="index === piecewiseDotWrap.length - 1"
-            :active="piecewiseObj.inRange"
+            :active="isActive(piecewiseObj.index)"
           >
             <span
               v-if="piecewiseLabel"
               class="vue-slider-piecewise-label"
-              :style="[ labelStyle, piecewiseObj.inRange ? labelActiveStyle : null ]"
+              :style="[ labelStyle, isActive(piecewiseObj.index) ? labelActiveStyle : null ]"
             >
               {{ piecewiseObj.label }}
             </span>
@@ -300,6 +305,9 @@
           return [(i) => i - 1, (i) => i + 1]
         }
       },
+      piecewiseFilter: {
+        type: Function
+      },
       tooltipMerge: {
         type: Boolean,
         default: true
@@ -586,10 +594,13 @@
           }
           const index = this.reverse ? (this.total - i) : i
           const label = this.data ? this.data[index] : (this.spacing * index) + this.min
+          if (this.piecewiseFilter && !this.piecewiseFilter({ index, label })) {
+            continue
+          }
           arr.push({
             style,
-            label: this.formatter ? this.formatting(label) : label,
-            inRange: index >= this.indexRange[0] && index <= this.indexRange[1]
+            index,
+            label: this.formatter ? this.formatting(label) : label
           })
         }
         return arr
@@ -1028,6 +1039,9 @@
           return inRange(val)
         }
       },
+      isActive (index) {
+        return index >= this.indexRange[0] && index <= this.indexRange[1]
+      },
       syncValue (noCb) {
         let val = this.isRange ? this.val.concat() : this.val
         this.$emit('input', val)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-slider-component",
-  "version": "2.8.2",
+  "version": "2.8.3",
   "description": "Can use the Slider component in vue1.x and vue2.x",
   "keywords": [
     "vue",

src/vue2-slider.vue

@@ -25,13 +25,13 @@
           @touchstart="moveStart($event, 0)"
         >
           <slot name="dot" :value="val[0]" :index="0" :disabled="disabledArray[0]">
-            <div 
+            <div
               class="vue-slider-dot-handle"
               :style="[
                 (!boolDisabled && disabledArray[0])
                 ? disabledDotStyles[0]
                 : null,
-                sliderStyles[0], 
+                sliderStyles[0],
                 focusFlag && focusSlider === 0 ? focusStyles[0]: null
               ]"
             ></div>
@@ -59,13 +59,13 @@
           @touchstart="moveStart($event, 1)"
         >
           <slot name="dot" :value="val[1]" :index="1" :disabled="disabledArray[1]">
-            <div 
+            <div
               class="vue-slider-dot-handle"
               :style="[
                 (!boolDisabled && disabledArray[1])
                 ? disabledDotStyles[1]
                 : null,
-                sliderStyles[1], 
+                sliderStyles[1],
                 focusFlag && focusSlider === 1 ? focusStyles[1]: null
               ]"
             ></div>
@@ -94,7 +94,7 @@
           @touchstart="moveStart"
         >
           <slot name="dot" :value="val" :disabled="boolDisabled">
-            <div 
+            <div
               class="vue-slider-dot-handle"
               :style="[
                 sliderStyles,
@@ -110,20 +110,25 @@
         </div>
       </template>
       <ul class="vue-slider-piecewise">
-        <li v-for="(piecewiseObj, index) in piecewiseDotWrap" class="vue-slider-piecewise-item" :style="[piecewiseDotStyle, piecewiseObj.style]" :key="index">
+        <li 
+          v-for="(piecewiseObj, index) in piecewiseDotWrap" 
+          class="vue-slider-piecewise-item" 
+          :style="[piecewiseDotStyle, piecewiseObj.style]" 
+          :key="index"
+        >
           <slot
             name="piecewise"
             :value="val"
             :label="piecewiseObj.label"
             :index="index"
             :first="index === 0"
             :last="index === piecewiseDotWrap.length - 1"
-            :active="piecewiseObj.inRange"
+            :active="isActive(piecewiseObj.index)"
           >
             <span
               v-if="piecewise"
               class="vue-slider-piecewise-dot"
-              :style="[ piecewiseStyle, piecewiseObj.inRange ? piecewiseActiveStyle : null ]"
+              :style="[ piecewiseStyle, isActive(piecewiseObj.index) ? piecewiseActiveStyle : null ]"
             ></span>
           </slot>
 
@@ -134,12 +139,12 @@
             :index="index"
             :first="index === 0"
             :last="index === piecewiseDotWrap.length - 1"
-            :active="piecewiseObj.inRange"
+            :active="isActive(piecewiseObj.index)"
           >
             <span
               v-if="piecewiseLabel"
               class="vue-slider-piecewise-label"
-              :style="[ labelStyle, piecewiseObj.inRange ? labelActiveStyle : null ]"
+              :style="[ labelStyle, isActive(piecewiseObj.index) ? labelActiveStyle : null ]"
             >
               {{ piecewiseObj.label }}
             </span>
@@ -300,6 +305,9 @@
           return [(i) => i - 1, (i) => i + 1]
         }
       },
+      piecewiseFilter: {
+        type: Function
+      },
       tooltipMerge: {
         type: Boolean,
         default: true
@@ -586,10 +594,13 @@
           }
           const index = this.reverse ? (this.total - i) : i
           const label = this.data ? this.data[index] : (this.spacing * index) + this.min
+          if (this.piecewiseFilter && !this.piecewiseFilter({ index, label })) {
+            continue
+          }
           arr.push({
             style,
-            label: this.formatter ? this.formatting(label) : label,
-            inRange: index >= this.indexRange[0] && index <= this.indexRange[1]
+            index,
+            label: this.formatter ? this.formatting(label) : label
           })
         }
         return arr
@@ -1028,6 +1039,9 @@
           return inRange(val)
         }
       },
+      isActive (index) {
+        return index >= this.indexRange[0] && index <= this.indexRange[1]
+      },
       syncValue (noCb) {
         let val = this.isRange ? this.val.concat() : this.val
         this.$emit('input', val)