Setting maxRange changes behavior when both dots are at max

[EdmundoDelGusto]

Without maxRange setted
When both dots are at max, and I pull the overlapping dots to the left, only the lower dot gets dragged to the left, while the upper dot stays at the right. This is to me the desired behavior.

When maxRange is setted
When both dots are at max, and I pull the overlapping dots to the left, both dots get dragged to the left. Not desired behavior

https://jsfiddle.net/EdmundoDelGusto/qLhkm96n/4/

[sinneren]

Same issue.
You can use computed class and styles, something like:

computed for class wrapper

const isMoreThanHalf = computed(() => {
return ((maxRange-minRange) / (maxRange - minValue)) > 2
})

And styles:

.you-computed-classname {
.vue-slider-dot:nth-child(even) {
      z-index: 6;
    }
}