feat: add thumb limits

Author: wiidede

README.md

@@ -108,6 +108,7 @@ generic="T = any, U = number | RangeData\<T>"
 | addable              | boolean                            | Determines if new data can be added/deleted. You can specify the data to be added by `addData` prop                                                            | false              |
 | addData              | (value: number) => RangeData<T, U> | Data to be added. This will only effect while modelValue is RangeData[]. It will return { value } by default                                                   | undefined          |
 | limit                | number                             | the limit can be add                                                                                                                                           | undefined          |
+| thumbLimits          | [number, number]                   | Global limit for all thumbs' movement range. Individual thumb can override this with its own limits property                                                   | undefined          |
 | smooth               | boolean                            | Determines if the thumb(s) should only be displayed on the stop points or not                                                                                  | false              |
 | deduplicate          | boolean                            | Determines if the thumb(s) can be duplicated                                                                                                                   | true               |
 | rangeHighlight       | boolean                            | Determines if the range between the minimum and maximum values should be highlighted.                                                                          | false              |
@@ -144,6 +145,7 @@ export interface RangeData<T, U = RangeValueType<T>> {
   data?: T
   disabled?: boolean
   unremovable?: boolean
+  limits?: [number, number] // Min and max limits for this specific thumb
   renderTop?: RangeRenderFn<T, U>
   renderBottom?: RangeRenderFn<T, U>
 }

playground/src/ranges/05Vertical.vue

@@ -4,7 +4,7 @@ import { h, ref } from 'vue'
 
 const model = ref<RangeData<string>[]>([
   { data: 'disabled', value: 2, disabled: true },
-  { data: 'random1', value: 4 },
+  { data: 'random1', value: 4, limits: [2, 10] },
   { data: 'unremovable', value: 8, unremovable: true },
 ])
 function handleAddData(value: number) {
@@ -24,6 +24,7 @@ function handleAddData(value: number) {
       <span class="tag">vertical</span>
       <span class="tag">slot</span>
       <span class="tag">limit:5</span>
+      <span class="tag">thumb-limits:[1,9]</span>
     </div>
     <Range
       v-model="model"
@@ -33,6 +34,7 @@ function handleAddData(value: number) {
       vertical
       thumb-size="large"
       :limit="5"
+      :thumb-limits="[1, 9]"
       :render-bottom="(data) => h('div', data.value)"
       :add-data="handleAddData"
     >

src/Range.vue

@@ -6,11 +6,13 @@ import RangeThumb from './RangeThumb.vue'
 import { percentage2value, swap, value2percentage } from './utils'
 
 const props = withDefaults(defineProps<{
+  // eslint-disable-next-line vue/no-required-prop-with-default
   modelValue: RangeValue<T, U>
   min?: number
   max?: number
   step?: number
   vertical?: boolean
+  thumbLimits?: [number, number]
   addable?: boolean
   addData?: (value: number) => RangeData<T, U>
   limit?: number
@@ -175,6 +177,23 @@ function onUpdate(percentage: number) {
     return
   let index = indexMap.value[current.value]
   const oldValue = values[index]
+
+  // Apply limits if they exist
+  const thumbData = modelValue[index]
+
+  // Check individual thumb limits first, then global limits
+  const individualLimits = thumbData.limits
+  const globalLimits = props.thumbLimits
+
+  if (individualLimits) {
+    if (value < individualLimits[0] || value > individualLimits[1])
+      return
+  }
+  else if (globalLimits) {
+    if (value < globalLimits[0] || value > globalLimits[1])
+      return
+  }
+
   if (oldValue - value > 0 && index > 0) {
     for (let i = index; i > 0; i -= 1) {
       const prev = values[i - 1]
@@ -311,6 +330,7 @@ provide(RangeTrackRefKey, trackRef)
         :render-bottom-on-active="renderBottomOnActive"
         :vertical="vertical"
         :addable="addable"
+        :thumb-limits="thumbLimits"
         :thumb-type="thumbType || (size === 'large' ? 'rect' : 'circle')"
         :thumb-size="thumbSize"
         @move-done="current = -1"

src/RangeThumb.vue

@@ -13,6 +13,7 @@ const props = defineProps<{
   unremovable?: boolean
   vertical?: boolean
   addable?: boolean
+  thumbLimits?: [number, number]
   thumbType?: 'circle' | 'square' | 'rect'
   thumbSize?: 'small' | 'medium' | 'large'
   renderTop?: RangeRenderFn<T, U>

src/type.ts

@@ -6,6 +6,7 @@ export interface RangeData<T, U = RangeValueType<T>> {
   data?: T
   disabled?: boolean
   unremovable?: boolean
+  limits?: [number, number]
   renderTop?: RangeRenderFn<T, U>
   renderBottom?: RangeRenderFn<T, U>
 }