Skip to content

Commit e2a1bb2

Browse files
wiidedewiidede
committed
feat: support highlight range while array length > 2
1 parent 4be2cae commit e2a1bb2

File tree

2 files changed

+23
-23
lines changed

2 files changed

+23
-23
lines changed

‎README.md‎

Lines changed: 22 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -95,28 +95,28 @@ interface VueRangeMultiResolverOptions {
9595

9696
generic="T = any, U = number | RangeData\<T>"
9797

98-
| Name | Type | Description | Default |
99-
| -------------------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
100-
| v-model:modelValue\* | U \ U[] | Model value. It will automatically detect the type of model and show the corresponding thumb(s) | [] |
101-
| min | number | The minimum value allowed | 0 |
102-
| max | number | The maximum value allowed | 100 |
103-
| step | number | Step | 1 |
104-
| vertical | boolean | Determines if the range is vertical. Note that it will generate new classes like 'm-range-v-xxx' | false |
105-
| addable | boolean | Determines if new data can be added/deleted. You can specify the data to be added by `addData` prop | false |
106-
| 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 |
107-
| limit | number | the limit can be add | undefined |
108-
| smooth | boolean | Determines if the thumb(s) should only be displayed on the stop points or not | false |
109-
| deduplicate | boolean | Determines if the thumb(s) can be duplicated | true |
110-
| rangeHighlight | boolean | Determines if the range between the minimum and maximum values should be highlighted. This only has an effect when the modelValue is an array with a length of 2 | false |
111-
| showStops | boolean \| number | Determines if dots should be displayed on the track. When set to a number, dots will only be displayed if the number of stops is less than the specified value | 12 |
112-
| size | 'small' \| 'medium' \| 'large' | Track size | 'small' |
113-
| thumbType | 'circle' \| 'square' \| 'rect' | Thumb type(default 'rect' while size is 'large', otherwise 'small') | 'circle' \| 'rect' |
114-
| thumbSize | 'small' \| 'medium' \| 'large' | Thumb size | 'medium' |
115-
| renderTop | (data: U) => VNode | A render function for displaying content above the thumb | undefined |
116-
| renderTopOnActive | boolean | Specifies whether to render only while the thumb is active | false |
117-
| renderBottom | (data: U) => VNode | A render function for displaying content below the thumb | undefined |
118-
| renderBottomOnActive | boolean | Specifies whether to render only while the thumb is active | false |
119-
| marks | RangeMarks | Show marks under the track | undefined |
98+
| Name | Type | Description | Default |
99+
| -------------------- | ---------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ |
100+
| v-model:modelValue\* | U \ U[] | Model value. It will automatically detect the type of model and show the corresponding thumb(s) | [] |
101+
| min | number | The minimum value allowed | 0 |
102+
| max | number | The maximum value allowed | 100 |
103+
| step | number | Step | 1 |
104+
| vertical | boolean | Determines if the range is vertical. Note that it will generate new classes like 'm-range-v-xxx' | false |
105+
| addable | boolean | Determines if new data can be added/deleted. You can specify the data to be added by `addData` prop | false |
106+
| 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 |
107+
| limit | number | the limit can be add | undefined |
108+
| smooth | boolean | Determines if the thumb(s) should only be displayed on the stop points or not | false |
109+
| deduplicate | boolean | Determines if the thumb(s) can be duplicated | true |
110+
| rangeHighlight | boolean | Determines if the range between the minimum and maximum values should be highlighted. | false |
111+
| showStops | boolean \| number | Determines if dots should be displayed on the track. When set to a number, dots will only be displayed if the number of stops is less than the specified value | 12 |
112+
| size | 'small' \| 'medium' \| 'large' | Track size | 'small' |
113+
| thumbType | 'circle' \| 'square' \| 'rect' | Thumb type(default 'rect' while size is 'large', otherwise 'small') | 'circle' \| 'rect' |
114+
| thumbSize | 'small' \| 'medium' \| 'large' | Thumb size | 'medium' |
115+
| renderTop | (data: U) => VNode | A render function for displaying content above the thumb | undefined |
116+
| renderTopOnActive | boolean | Specifies whether to render only while the thumb is active | false |
117+
| renderBottom | (data: U) => VNode | A render function for displaying content below the thumb | undefined |
118+
| renderBottomOnActive | boolean | Specifies whether to render only while the thumb is active | false |
119+
| marks | RangeMarks | Show marks under the track | undefined |
120120

121121
## slots
122122

‎src/Range.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ provide(RangeTrackRefKey, trackRef)
245245
@pointerleave="addTiming = false"
246246
@pointerup.prevent="addThumb"
247247
>
248-
<div v-show="rangeHighlight && model.length === 2" class="m-range-highlight-container">
248+
<div v-show="rangeHighlight && model.length >= 2" class="m-range-highlight-container">
249249
<div
250250
:class="vertical ? 'm-range-v-highlight' : 'm-range-highlight'"
251251
:style="vertical

0 commit comments

Comments
 (0)