naive-ui 2.20.2 → 2.21.2

package/es/slider/src/Slider.js

@@ -1,12 +1,14 @@
-import { h, ref, toRef, computed, watch, nextTick, defineComponent, Transition, onBeforeUnmount } from 'vue';
+import { h, ref, toRef, computed, watch, nextTick, defineComponent, Transition } from 'vue';
 import { VBinder, VTarget, VFollower } from 'vueuc';
 import { useIsMounted, useMergedState } from 'vooks';
 import { on, off } from 'evtd';
 import { useTheme, useFormItem, useConfig } from '../../_mixins';
-import { warn, call, useAdjustedTo } from '../../_utils';
+import { call, useAdjustedTo } from '../../_utils';
 import { sliderLight } from '../styles';
+import { isTouchEvent, useRefs } from './utils';
 import style from './styles/index.cssr';
-import { isTouchEvent } from './utils';
+// ref: https://developer.mozilla.org/zh-CN/docs/Web/API/MouseEvent/button
+const eventButtonLeft = 0;
 const sliderProps = Object.assign(Object.assign({}, useTheme.props), { to: useAdjustedTo.propTo, defaultValue: {
         type: [Number, Array],
         default: 0
@@ -20,150 +22,149 @@ const sliderProps = Object.assign(Object.assign({}, useTheme.props), { to: useAd
         type: Number,
         default: 100
     }, step: {
-        type: Number,
+        type: [Number, String],
         default: 1
-    }, range: Boolean, value: [Number, Array], placement: {
-        type: String,
-        default: 'top'
-    }, showTooltip: {
+    }, range: Boolean, value: [Number, Array], placement: String, showTooltip: {
         type: Boolean,
         default: undefined
     }, tooltip: {
         type: Boolean,
         default: true
-    }, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array], 
-    // deprecated
-    onChange: {
-        type: [Function, Array],
-        validator: () => {
-            if (process.env.NODE_ENV !== 'production') {
-                warn('slider', '`on-change` is deprecated, please use `on-update:value` instead.');
-            }
-            return true;
-        },
-        default: undefined
-    } });
+    }, vertical: Boolean, reverse: Boolean, 'onUpdate:value': [Function, Array], onUpdateValue: [Function, Array] });
 export default defineComponent({
     name: 'Slider',
     props: sliderProps,
     setup(props) {
         const { mergedClsPrefixRef, namespaceRef } = useConfig(props);
         const themeRef = useTheme('Slider', 'Slider', style, sliderLight, props, mergedClsPrefixRef);
+        // dom ref
+        const handleRailRef = ref(null);
+        const [handleRefs, setHandleRefs] = useRefs();
+        const [followerRefs, setFollowerRefs] = useRefs();
+        const followerEnabledIndexSetRef = ref(new Set());
+        // data ref
         const formItem = useFormItem(props);
         const { mergedDisabledRef } = formItem;
-        const handleRef1 = ref(null);
-        const handleRef2 = ref(null);
-        const railRef = ref(null);
-        const followerRef1 = ref(null);
-        const followerRef2 = ref(null);
         const precisionRef = computed(() => {
-            const precisions = [props.min, props.max, props.step].map((item) => {
-                const fraction = String(item).split('.')[1];
-                return fraction ? fraction.length : 0;
-            });
-            return Math.max(...precisions);
+            const { step } = props;
+            if (step <= 0 || step === 'mark')
+                return 0;
+            const stepString = step.toString();
+            let precision = 0;
+            if (stepString.includes('.')) {
+                precision = stepString.length - stepString.indexOf('.') - 1;
+            }
+            return precision;
         });
         const uncontrolledValueRef = ref(props.defaultValue);
         const controlledValueRef = toRef(props, 'value');
         const mergedValueRef = useMergedState(controlledValueRef, uncontrolledValueRef);
-        const memoziedOtherValueRef = ref(0);
-        const changeSourceRef = ref(null);
-        const handleActive1Ref = ref(false);
-        const handleActive2Ref = ref(false);
-        const handleClicked1Ref = ref(false);
-        const handleClicked2Ref = ref(false);
-        const controlledShowTooltipRef = toRef(props, 'showTooltip');
-        const mergedShowTooltip1Ref = useMergedState(controlledShowTooltipRef, handleActive1Ref);
-        const mergedShowTooltip2Ref = useMergedState(controlledShowTooltipRef, handleActive2Ref);
+        const arrifiedValueRef = computed(() => {
+            const { value: mergedValue } = mergedValueRef;
+            return (props.range ? mergedValue : [mergedValue]).map(clampValue);
+        });
+        const handleCountExceeds2Ref = computed(() => arrifiedValueRef.value.length > 2);
+        const mergedPlacementRef = computed(() => {
+            return props.placement === undefined
+                ? props.vertical
+                    ? 'right'
+                    : 'top'
+                : props.placement;
+        });
+        const markValuesRef = computed(() => {
+            const { marks } = props;
+            return marks ? Object.keys(marks).map(parseFloat) : null;
+        });
+        // status ref
+        const activeIndexRef = ref(-1);
+        const previousIndexRef = ref(-1);
+        const hoverIndexRef = ref(-1);
+        const draggingRef = ref(false);
+        // style ref
         const dotTransitionDisabledRef = ref(false);
-        const activeRef = computed(() => {
-            return handleActive1Ref.value || handleActive2Ref.value;
+        const styleDirectionRef = computed(() => {
+            const { vertical, reverse } = props;
+            const left = reverse ? 'right' : 'left';
+            const bottom = reverse ? 'top' : 'bottom';
+            return vertical ? bottom : left;
         });
-        const prevActiveRef = ref(activeRef.value);
-        const clickedRef = computed(() => {
-            return handleClicked1Ref.value || handleClicked2Ref.value;
+        const fillStyleRef = computed(() => {
+            if (handleCountExceeds2Ref.value)
+                return;
+            const values = arrifiedValueRef.value;
+            const start = valueToPercentage(props.range ? Math.min(...values) : props.min);
+            const end = valueToPercentage(props.range ? Math.max(...values) : values[0]);
+            const { value: styleDirection } = styleDirectionRef;
+            return props.vertical
+                ? {
+                    [styleDirection]: `${start}%`,
+                    height: `${end - start}%`
+                }
+                : {
+                    [styleDirection]: `${start}%`,
+                    width: `${end - start}%`
+                };
         });
         const markInfosRef = computed(() => {
             const mergedMarks = [];
-            const { marks, max, min } = props;
+            const { marks } = props;
             if (marks) {
-                const { value: mergedValue } = mergedValueRef;
+                const orderValues = arrifiedValueRef.value.slice();
+                orderValues.sort((a, b) => a - b);
+                const { value: styleDirection } = styleDirectionRef;
+                const { value: handleCountExceeds2 } = handleCountExceeds2Ref;
+                const { range } = props;
+                const isActive = handleCountExceeds2
+                    ? () => false
+                    : (num) => range
+                        ? num >= orderValues[0] &&
+                            num <= orderValues[orderValues.length - 1]
+                        : num <= orderValues[0];
                 for (const key of Object.keys(marks)) {
                     const num = Number(key);
                     mergedMarks.push({
-                        active: Array.isArray(mergedValue)
-                            ? mergedValue[0] <= num && mergedValue[1] >= num
-                            : mergedValue !== null
-                                ? mergedValue >= num
-                                : false,
+                        active: isActive(num),
                         label: marks[key],
                         style: {
-                            left: `${((num - min) / (max - min)) * 100}%`
+                            [styleDirection]: `${valueToPercentage(num)}%`
                         }
                     });
                 }
             }
             return mergedMarks;
         });
-        const fillStyleRef = computed(() => {
-            const { max, min, range } = props;
-            if (range) {
-                return {
-                    left: `${((handleValue1Ref.value - min) / (max - min)) * 100}%`,
-                    width: `${((handleValue2Ref.value - handleValue1Ref.value) / (max - min)) *
-                        100}%`
-                };
-            }
-            else {
-                return {
-                    left: 0,
-                    width: `${((handleValue1Ref.value - min) / (max - min)) * 100}%`
-                };
-            }
-        });
-        const handleValue1Ref = computed(() => {
-            const { value: mergedValue } = mergedValueRef;
-            if (Array.isArray(mergedValue)) {
-                return sanitizeValue(mergedValue[0]);
-            }
-            else {
-                return sanitizeValue(mergedValue);
-            }
-        });
-        const handleValue2Ref = computed(() => {
-            const { value: mergedValue } = mergedValueRef;
-            if (Array.isArray(mergedValue)) {
-                return sanitizeValue(mergedValue[1]);
-            }
-            return 0;
-        });
-        const firstHandleStyleRef = computed(() => {
-            const { value: handleValue1 } = handleValue1Ref;
-            const { value: handleClicked1 } = handleClicked1Ref;
-            const { max, min } = props;
-            const percentage = ((handleValue1 - min) / (max - min)) * 100;
+        function getHandleStyle(value, index) {
+            const percentage = valueToPercentage(value);
+            const { value: styleDirection } = styleDirectionRef;
             return {
-                left: `${percentage}%`,
-                transform: `translateX(${-percentage}%)`,
-                zIndex: handleClicked1 ? 1 : 0
+                [styleDirection]: `${percentage}%`,
+                zIndex: index === activeIndexRef.value ? 1 : 0
             };
-        });
-        const secondHandleStyleRef = computed(() => {
-            const { value: handleValue2 } = handleValue2Ref;
-            const { value: handleClicked2 } = handleClicked2Ref;
-            const { max, min } = props;
-            const percentage = ((handleValue2 - min) / (max - min)) * 100;
-            return {
-                left: `${percentage}%`,
-                transform: `translateX(${-percentage}%)`,
-                zIndex: handleClicked2 ? 1 : 0
-            };
-        });
+        }
+        function isShowTooltip(index) {
+            return (props.showTooltip ||
+                hoverIndexRef.value === index ||
+                (activeIndexRef.value === index && draggingRef.value));
+        }
+        function isSkipCSSDetection(index) {
+            return !(activeIndexRef.value === index && previousIndexRef.value === index);
+        }
+        function focusActiveHandle(index) {
+            var _a;
+            if (~index) {
+                activeIndexRef.value = index;
+                (_a = handleRefs.value.get(index)) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        }
+        function syncPosition() {
+            followerRefs.value.forEach((inst, index) => {
+                if (isShowTooltip(index))
+                    inst.syncPosition();
+            });
+        }
         function doUpdateValue(value) {
-            const { onChange, 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
+            const { 'onUpdate:value': _onUpdateValue, onUpdateValue } = props;
             const { nTriggerFormInput, nTriggerFormChange } = formItem;
-            if (onChange)
-                call(onChange, value);
             if (onUpdateValue)
                 call(onUpdateValue, value);
             if (_onUpdateValue)
@@ -172,411 +173,240 @@ export default defineComponent({
             nTriggerFormInput();
             nTriggerFormChange();
         }
-        function doUpdateShow(show1, show2) {
-            if (show1 !== undefined) {
-                handleActive1Ref.value = show1;
+        function dispatchValueUpdate(value) {
+            const { range } = props;
+            if (range) {
+                if (Array.isArray(value)) {
+                    const { value: oldValues } = arrifiedValueRef;
+                    if (value.join() !== oldValues.join()) {
+                        doUpdateValue(value);
+                    }
+                }
+            }
+            else if (!Array.isArray(value)) {
+                const oldValue = arrifiedValueRef.value[0];
+                if (oldValue !== value) {
+                    doUpdateValue(value);
+                }
+            }
+        }
+        function doDispatchValue(value, index) {
+            if (props.range) {
+                const values = arrifiedValueRef.value.slice();
+                values.splice(index, 1, value);
+                dispatchValueUpdate(values);
             }
-            if (show2 !== undefined) {
-                handleActive2Ref.value = show2;
+            else {
+                dispatchValueUpdate(value);
             }
         }
-        function syncPosition() {
-            var _a, _b;
-            (_a = followerRef1.value) === null || _a === void 0 ? void 0 : _a.syncPosition();
-            (_b = followerRef2.value) === null || _b === void 0 ? void 0 : _b.syncPosition();
+        // value conversion
+        function sanitizeValue(value, currentValue, stepBuffer) {
+            const stepping = stepBuffer !== undefined;
+            if (!stepBuffer) {
+                stepBuffer = value - currentValue > 0 ? 1 : -1;
+            }
+            const markValues = markValuesRef.value || [];
+            const { step } = props;
+            if (step === 'mark') {
+                const closestMark = getClosestMark(value, markValues.concat(currentValue), stepping ? stepBuffer : undefined);
+                return closestMark ? closestMark.value : currentValue;
+            }
+            if (step <= 0)
+                return currentValue;
+            const { value: precision } = precisionRef;
+            let closestMark;
+            // if it is a stepping, priority will be given to the marks
+            // on the rail, otherwise take the nearest one
+            if (stepping) {
+                const currentStep = Number((currentValue / step).toFixed(precision));
+                const actualStep = Math.floor(currentStep);
+                const leftStep = currentStep > actualStep ? actualStep : actualStep - 1;
+                const rightStep = currentStep < actualStep ? actualStep : actualStep + 1;
+                closestMark = getClosestMark(currentValue, [
+                    Number((leftStep * step).toFixed(precision)),
+                    Number((rightStep * step).toFixed(precision)),
+                    ...markValues
+                ], stepBuffer);
+            }
+            else {
+                const roundValue = getRoundValue(value);
+                closestMark = getClosestMark(value, [...markValues, roundValue]);
+            }
+            return closestMark ? clampValue(closestMark.value) : currentValue;
         }
-        function handleHandleFocus1() {
-            if (clickedRef.value)
-                return;
-            doUpdateShow(true, false);
+        function clampValue(value) {
+            return Math.min(props.max, Math.max(props.min, value));
         }
-        function handleHandleFocus2() {
-            if (clickedRef.value)
-                return;
-            doUpdateShow(false, true);
+        function valueToPercentage(value) {
+            const { max, min } = props;
+            return ((value - min) / (max - min)) * 100;
         }
-        function handleHandleBlur1() {
-            if (clickedRef.value)
-                return;
-            doUpdateShow(false, false);
+        function percentageToValue(percentage) {
+            const { max, min } = props;
+            return min + (max - min) * percentage;
         }
-        function handleHandleBlur2() {
-            if (clickedRef.value)
-                return;
-            doUpdateShow(false, false);
+        function getRoundValue(value) {
+            const { step, min } = props;
+            if (step <= 0 || step === 'mark')
+                return value;
+            const newValue = Math.round((value - min) / step) * step + min;
+            return Number(newValue.toFixed(precisionRef.value));
         }
-        function handleRailClick(e) {
-            var _a, _b, _c, _d;
-            if (mergedDisabledRef.value)
-                return;
-            const { value: railEl } = railRef;
-            if (!railEl)
-                return;
-            const railRect = railEl.getBoundingClientRect();
-            const offsetRatio = (e.clientX - railRect.left) / railRect.width;
-            const newValue = props.min + (props.max - props.min) * offsetRatio;
-            if (!props.range) {
-                dispatchValueUpdate(newValue, { source: 'click' });
-                (_a = handleRef1.value) === null || _a === void 0 ? void 0 : _a.focus();
-            }
-            else {
-                if (Array.isArray(mergedValueRef.value)) {
-                    if (Math.abs(handleValue1Ref.value - newValue) <
-                        Math.abs(handleValue2Ref.value - newValue)) {
-                        dispatchValueUpdate([newValue, handleValue2Ref.value], {
-                            source: 'click'
-                        });
-                        (_b = handleRef1.value) === null || _b === void 0 ? void 0 : _b.focus();
-                    }
-                    else {
-                        dispatchValueUpdate([handleValue1Ref.value, newValue], {
-                            source: 'click'
-                        });
-                        (_c = handleRef2.value) === null || _c === void 0 ? void 0 : _c.focus();
-                    }
-                }
-                else {
-                    dispatchValueUpdate([newValue, newValue], { source: 'click' });
-                    (_d = handleRef1.value) === null || _d === void 0 ? void 0 : _d.focus();
+        function getClosestMark(currentValue, markValues = markValuesRef.value, buffer) {
+            if (!markValues || !markValues.length)
+                return null;
+            let closestMark = null;
+            let index = -1;
+            while (++index < markValues.length) {
+                const diff = markValues[index] - currentValue;
+                const distance = Math.abs(diff);
+                if (
+                // find marks in the same direction
+                (buffer === undefined || diff * buffer > 0) &&
+                    (closestMark === null || distance < closestMark.distance)) {
+                    closestMark = {
+                        index,
+                        distance,
+                        value: markValues[index]
+                    };
                 }
             }
+            return closestMark;
         }
-        function handleHandleMouseMove(e, handleIndex) {
-            if (!handleRef1.value || !railRef.value)
+        function getPointValue(event) {
+            const railEl = handleRailRef.value;
+            if (!railEl)
                 return;
-            const x = 'touches' in e ? e.touches[0].clientX : e.clientX;
-            const { width: handleWidth } = handleRef1.value.getBoundingClientRect();
-            const { width: railWidth, left: railLeft } = railRef.value.getBoundingClientRect();
-            const { min, max, range } = props;
-            const offsetRatio = (x - railLeft - handleWidth / 2) / (railWidth - handleWidth);
-            const newValue = min + (max - min) * offsetRatio;
-            if (range) {
-                if (handleIndex === 0) {
-                    dispatchValueUpdate([memoziedOtherValueRef.value, newValue]);
-                }
-                else {
-                    dispatchValueUpdate([newValue, memoziedOtherValueRef.value]);
-                }
+            const touchEvent = isTouchEvent(event) ? event.touches[0] : event;
+            const railRect = railEl.getBoundingClientRect();
+            let percentage;
+            if (props.vertical) {
+                percentage = (railRect.bottom - touchEvent.clientY) / railRect.height;
             }
             else {
-                dispatchValueUpdate(newValue);
+                percentage = (touchEvent.clientX - railRect.left) / railRect.width;
             }
+            if (props.reverse) {
+                percentage = 1 - percentage;
+            }
+            return percentageToValue(percentage);
         }
-        function handleKeyDown(e) {
+        // dom event handle
+        function handleRailKeyDown(e) {
             if (mergedDisabledRef.value)
                 return;
+            const { vertical, reverse } = props;
             switch (e.code) {
+                case 'ArrowUp':
+                    e.preventDefault();
+                    handleStepValue(vertical && reverse ? -1 : 1);
+                    break;
                 case 'ArrowRight':
-                    handleKeyDownRight();
+                    e.preventDefault();
+                    handleStepValue(!vertical && reverse ? -1 : 1);
+                    break;
+                case 'ArrowDown':
+                    e.preventDefault();
+                    handleStepValue(vertical && reverse ? 1 : -1);
                     break;
                 case 'ArrowLeft':
-                    handleKeyDownLeft();
+                    e.preventDefault();
+                    handleStepValue(!vertical && reverse ? 1 : -1);
                     break;
             }
         }
-        function handleKeyDownRight() {
-            if (clickedRef.value)
+        function handleStepValue(ratio) {
+            const activeIndex = activeIndexRef.value;
+            if (activeIndex === -1)
                 return;
-            let firstHandleFocused = false;
-            let handleValue = null;
-            if (document.activeElement === handleRef1.value) {
-                firstHandleFocused = true;
-                handleValue = handleValue1Ref.value;
-            }
-            else {
-                handleValue = handleValue2Ref.value;
-            }
-            const { step, marks } = props;
-            let nextValue = Math.floor(handleValue / step) * step + step;
-            if (marks) {
-                for (const key of Object.keys(marks)) {
-                    const numberKey = Number(key);
-                    if (numberKey > handleValue && numberKey < nextValue) {
-                        nextValue = numberKey;
-                    }
-                }
-            }
-            if (props.range) {
-                if (firstHandleFocused) {
-                    dispatchValueUpdate([nextValue, handleValue2Ref.value], {
-                        source: 'keyboard'
-                    });
-                }
-                else {
-                    dispatchValueUpdate([handleValue1Ref.value, nextValue], {
-                        source: 'keyboard'
-                    });
-                }
-            }
-            else {
-                dispatchValueUpdate(nextValue, { source: 'keyboard' });
-            }
+            const { step } = props;
+            const currentValue = arrifiedValueRef.value[activeIndex];
+            const nextValue = step <= 0 || step === 'mark'
+                ? currentValue
+                : currentValue + step * ratio;
+            doDispatchValue(
+            // Avoid the number of value does not change when `step` is null
+            sanitizeValue(nextValue, currentValue, ratio > 0 ? 1 : -1), activeIndex);
         }
-        function handleKeyDownLeft() {
-            if (clickedRef.value)
+        function handleRailMouseDown(event) {
+            var _a, _b;
+            if (mergedDisabledRef.value)
                 return;
-            let firstHandleFocused = false;
-            let handleValue = null;
-            if (document.activeElement === handleRef1.value) {
-                firstHandleFocused = true;
-                handleValue = handleValue1Ref.value;
-            }
-            else if (document.activeElement === handleRef2.value) {
-                handleValue = handleValue2Ref.value;
-            }
-            else {
+            if (!isTouchEvent(event) && event.button !== eventButtonLeft) {
                 return;
             }
-            const { step, marks } = props;
-            let nextValue = Math.ceil(handleValue / step) * step - step;
-            if (marks) {
-                for (const key of Object.keys(marks)) {
-                    const numberKey = Number(key);
-                    if (numberKey < handleValue && numberKey > nextValue) {
-                        nextValue = numberKey;
-                    }
-                }
-            }
-            if (props.range) {
-                if (firstHandleFocused) {
-                    dispatchValueUpdate([nextValue, handleValue2Ref.value], {
-                        source: 'keyboard'
-                    });
-                }
-                else {
-                    dispatchValueUpdate([handleValue1Ref.value, nextValue], {
-                        source: 'keyboard'
-                    });
-                }
-            }
-            else {
-                dispatchValueUpdate(nextValue, { source: 'keyboard' });
-            }
-        }
-        function switchFocus() {
-            if (props.range) {
-                const firstHandle = handleRef1.value;
-                const secondHandle = handleRef2.value;
-                if (firstHandle && secondHandle) {
-                    if (handleActive1Ref.value &&
-                        document.activeElement === secondHandle) {
-                        disableTransitionOneTick();
-                        firstHandle.focus();
-                        if (handleClicked2Ref.value) {
-                            handleClicked2Ref.value = false;
-                            handleClicked1Ref.value = true;
-                        }
-                    }
-                    else if (handleActive2Ref.value &&
-                        document.activeElement === firstHandle) {
-                        disableTransitionOneTick();
-                        secondHandle.focus();
-                        if (handleClicked1Ref.value) {
-                            handleClicked1Ref.value = false;
-                            handleClicked2Ref.value = true;
-                        }
-                    }
-                }
-            }
-        }
-        function getClosestMarkValue(currentValue) {
-            const { marks } = props;
-            if (marks) {
-                const markValues = Object.keys(marks).map((key) => Number(key));
-                let diff = null;
-                let closestValue = null;
-                for (const value of markValues) {
-                    if (closestValue === null) {
-                        closestValue = value;
-                        diff = Math.abs(value - currentValue);
-                    }
-                    else {
-                        const newDiff = Math.abs(value - currentValue);
-                        if (newDiff < diff) {
-                            closestValue = value;
-                            diff = newDiff;
-                        }
-                    }
-                }
-                return closestValue;
-            }
-            return null;
-        }
-        function sanitizeValue(value) {
-            let justifiedValue = value;
-            const { min, max, marks, step } = props;
-            justifiedValue = Math.max(min, justifiedValue);
-            justifiedValue = Math.min(max, justifiedValue);
-            justifiedValue = Math.round((justifiedValue - min) / step) * step + min;
-            justifiedValue = parseFloat(justifiedValue.toFixed(precisionRef.value));
-            if (marks) {
-                const closestMarkValue = getClosestMarkValue(value);
-                if (closestMarkValue !== null &&
-                    Math.abs(justifiedValue - value) > Math.abs(closestMarkValue - value)) {
-                    justifiedValue = closestMarkValue;
-                }
-            }
-            return justifiedValue;
-        }
-        function handleFirstHandleMouseDown(e) {
-            if (mergedDisabledRef.value)
+            const pointValue = getPointValue(event);
+            if (pointValue === undefined)
                 return;
-            if (isTouchEvent(e))
-                e.preventDefault();
-            if (props.range) {
-                memoziedOtherValueRef.value = handleValue2Ref.value;
+            const values = arrifiedValueRef.value.slice();
+            const activeIndex = props.range
+                ? (_b = (_a = getClosestMark(pointValue, values)) === null || _a === void 0 ? void 0 : _a.index) !== null && _b !== void 0 ? _b : -1
+                : 0;
+            if (activeIndex !== -1) {
+                // avoid triggering scrolling on touch
+                event.preventDefault();
+                focusActiveHandle(activeIndex);
+                startDragging();
+                doDispatchValue(sanitizeValue(pointValue, arrifiedValueRef.value[activeIndex]), activeIndex);
             }
-            doUpdateShow(true, false);
-            handleClicked1Ref.value = true;
-            on('touchend', document, handleHandleMouseUp);
-            on('mouseup', document, handleHandleMouseUp);
-            on('touchmove', document, handleFirstHandleMouseMove);
-            on('mousemove', document, handleFirstHandleMouseMove);
         }
-        function handleSecondHandleMouseDown(e) {
-            if (mergedDisabledRef.value)
-                return;
-            if (isTouchEvent(e))
-                e.preventDefault();
-            if (props.range) {
-                memoziedOtherValueRef.value = handleValue1Ref.value;
+        function startDragging() {
+            if (!draggingRef.value) {
+                draggingRef.value = true;
+                on('touchend', document, handleMouseUp);
+                on('mouseup', document, handleMouseUp);
+                on('touchmove', document, handleMouseMove);
+                on('mousemove', document, handleMouseMove);
             }
-            doUpdateShow(false, true);
-            handleClicked2Ref.value = true;
-            on('touchend', document, handleHandleMouseUp);
-            on('mouseup', document, handleHandleMouseUp);
-            on('touchmove', document, handleSecondHandleMouseMove);
-            on('mousemove', document, handleSecondHandleMouseMove);
         }
-        function handleHandleMouseUp(e) {
-            var _a, _b;
-            if (isTouchEvent(e) ||
-                (!((_a = handleRef1.value) === null || _a === void 0 ? void 0 : _a.contains(e.target)) &&
-                    (props.range ? !((_b = handleRef2.value) === null || _b === void 0 ? void 0 : _b.contains(e.target)) : true))) {
-                doUpdateShow(false, false);
+        function stopDragging() {
+            if (draggingRef.value) {
+                draggingRef.value = false;
+                off('touchend', document, handleMouseUp);
+                off('mouseup', document, handleMouseUp);
+                off('touchmove', document, handleMouseMove);
+                off('mousemove', document, handleMouseMove);
             }
-            handleClicked2Ref.value = false;
-            handleClicked1Ref.value = false;
-            off('touchend', document, handleHandleMouseUp);
-            off('mouseup', document, handleHandleMouseUp);
-            off('touchmove', document, handleFirstHandleMouseMove);
-            off('touchmove', document, handleSecondHandleMouseMove);
-            off('mousemove', document, handleFirstHandleMouseMove);
-            off('mousemove', document, handleSecondHandleMouseMove);
         }
-        function dispatchValueUpdate(value, options = { source: null }) {
-            const { source } = options;
-            const { range } = props;
-            if (range) {
-                if (Array.isArray(value)) {
-                    if (value[0] > value[1]) {
-                        value = [sanitizeValue(value[1]), sanitizeValue(value[0])];
-                    }
-                    else {
-                        value = [sanitizeValue(value[0]), sanitizeValue(value[1])];
-                    }
-                    const { value: oldValue } = mergedValueRef;
-                    if (!Array.isArray(oldValue) ||
-                        oldValue[0] !== value[0] ||
-                        oldValue[1] !== value[1]) {
-                        changeSourceRef.value = source;
-                        doUpdateValue(value);
-                    }
-                }
-            }
-            else {
-                if (!Array.isArray(value)) {
-                    const { max, min } = props;
-                    const { value: oldValue } = mergedValueRef;
-                    if (value > max) {
-                        if (oldValue !== max) {
-                            changeSourceRef.value = source;
-                            doUpdateValue(max);
-                        }
-                    }
-                    else if (value < min) {
-                        if (oldValue !== min) {
-                            changeSourceRef.value = source;
-                            doUpdateValue(min);
-                        }
-                    }
-                    else {
-                        const newValue = sanitizeValue(value);
-                        if (oldValue !== newValue) {
-                            changeSourceRef.value = source;
-                            doUpdateValue(newValue);
-                        }
-                    }
-                }
+        function handleMouseMove(event) {
+            const { value: activeIndex } = activeIndexRef;
+            if (!draggingRef.value || activeIndex === -1) {
+                stopDragging();
+                return;
             }
+            const pointValue = getPointValue(event);
+            doDispatchValue(sanitizeValue(pointValue, arrifiedValueRef.value[activeIndex]), activeIndex);
         }
-        function handleFirstHandleMouseMove(e) {
-            handleHandleMouseMove(e, 0);
+        function handleMouseUp() {
+            stopDragging();
         }
-        function handleSecondHandleMouseMove(e) {
-            handleHandleMouseMove(e, 1);
-        }
-        function handleFirstHandleMouseEnter() {
-            if (!activeRef.value) {
-                doUpdateShow(true, undefined);
-                void nextTick(() => {
-                    syncPosition();
-                });
+        function handleHandleFocus(index) {
+            activeIndexRef.value = index;
+            // Wake focus style
+            if (!mergedDisabledRef.value) {
+                hoverIndexRef.value = index;
             }
         }
-        function handleFirstHandleMouseLeave() {
-            if (changeSourceRef.value === 'keyboard')
-                return;
-            if (!activeRef.value) {
-                doUpdateShow(false, false);
-            }
-            else if (!clickedRef.value) {
-                doUpdateShow(false, false);
+        function handleHandleBlur(index) {
+            if (activeIndexRef.value === index) {
+                activeIndexRef.value = -1;
+                stopDragging();
             }
-        }
-        function handleSecondHandleMouseEnter() {
-            if (!activeRef.value) {
-                doUpdateShow(undefined, true);
-                void nextTick(() => {
-                    syncPosition();
-                });
+            if (hoverIndexRef.value === index) {
+                hoverIndexRef.value = -1;
             }
         }
-        function handleSecondHandleMouseLeave() {
-            if (changeSourceRef.value === 'keyboard')
-                return;
-            if (!activeRef.value) {
-                doUpdateShow(false, false);
-            }
-            else if (!clickedRef.value) {
-                doUpdateShow(false, false);
-            }
+        function handleHandleMouseEnter(index) {
+            hoverIndexRef.value = index;
         }
-        function disableTransitionOneTick() {
-            if (handleRef1.value) {
-                handleRef1.value.style.transition = 'none';
-                void nextTick(() => {
-                    if (handleRef1.value) {
-                        handleRef1.value.style.transition = '';
-                    }
-                });
-            }
-            if (handleRef2.value) {
-                handleRef2.value.style.transition = 'none';
-                void nextTick(() => {
-                    if (handleRef2.value) {
-                        handleRef2.value.style.transition = '';
-                    }
-                });
+        function handleHandleMouseLeave(index) {
+            if (hoverIndexRef.value === index) {
+                hoverIndexRef.value = -1;
             }
         }
-        watch(activeRef, (value) => {
-            void nextTick(() => {
-                prevActiveRef.value = value;
-            });
-        });
-        watch(mergedValueRef, (newValue, oldValue) => {
-            const { value: changeSource } = changeSourceRef;
+        watch(activeIndexRef, (_, previous) => void nextTick(() => (previousIndexRef.value = previous)));
+        watch(mergedValueRef, () => {
             if (props.marks) {
                 if (dotTransitionDisabledRef.value)
                     return;
@@ -585,57 +415,7 @@ export default defineComponent({
                     dotTransitionDisabledRef.value = false;
                 });
             }
-            if (props.range && Array.isArray(newValue) && Array.isArray(oldValue)) {
-                if (oldValue && oldValue[1] !== newValue[1]) {
-                    void nextTick(() => {
-                        if (!(changeSource === 'click')) {
-                            doUpdateShow(false, true);
-                        }
-                        switchFocus();
-                    });
-                }
-                else if (oldValue && oldValue[0] !== newValue[0]) {
-                    void nextTick(() => {
-                        if (!(changeSource === 'click')) {
-                            doUpdateShow(true, false);
-                        }
-                        switchFocus();
-                    });
-                }
-                else if (newValue[0] === newValue[1]) {
-                    void nextTick(() => {
-                        if (!(changeSource === 'click')) {
-                            doUpdateShow(false, true);
-                        }
-                        switchFocus();
-                    });
-                }
-            }
-            void nextTick(() => {
-                // dom has changed but event is not fired, use marco task to make sure
-                // relevant event handler is called
-                setTimeout(() => {
-                    changeSourceRef.value = null;
-                }, 0);
-                if (props.range) {
-                    if (Array.isArray(newValue) && Array.isArray(oldValue)) {
-                        if (newValue[0] !== oldValue[0] || newValue[1] !== oldValue[1]) {
-                            syncPosition();
-                        }
-                    }
-                }
-                else {
-                    syncPosition();
-                }
-            });
-        });
-        onBeforeUnmount(() => {
-            off('touchmove', document, handleFirstHandleMouseMove);
-            off('touchmove', document, handleSecondHandleMouseMove);
-            off('mousemove', document, handleFirstHandleMouseMove);
-            off('mousemove', document, handleSecondHandleMouseMove);
-            off('touchend', document, handleHandleMouseUp);
-            off('mouseup', document, handleHandleMouseUp);
+            void nextTick(syncPosition);
         });
         return {
             mergedClsPrefix: mergedClsPrefixRef,
@@ -643,43 +423,27 @@ export default defineComponent({
             uncontrolledValue: uncontrolledValueRef,
             mergedValue: mergedValueRef,
             mergedDisabled: mergedDisabledRef,
+            mergedPlacement: mergedPlacementRef,
             isMounted: useIsMounted(),
             adjustedTo: useAdjustedTo(props),
-            handleValue1: handleValue1Ref,
-            handleValue2: handleValue2Ref,
-            mergedShowTooltip1: mergedShowTooltip1Ref,
-            mergedShowTooltip2: mergedShowTooltip2Ref,
-            handleActive1: handleActive1Ref,
-            handleActive2: handleActive2Ref,
-            handleClicked1: handleClicked1Ref,
-            handleClicked2: handleClicked2Ref,
-            memoziedOtherValue: memoziedOtherValueRef,
-            active: activeRef,
-            prevActive: prevActiveRef,
-            clicked: clickedRef,
             dotTransitionDisabled: dotTransitionDisabledRef,
             markInfos: markInfosRef,
-            // https://github.com/vuejs/vue-next/issues/2283
-            handleRef1,
-            handleRef2,
-            railRef,
-            followerRef1,
-            followerRef2,
-            firstHandleStyle: firstHandleStyleRef,
-            secondHandleStyle: secondHandleStyleRef,
+            isShowTooltip,
+            isSkipCSSDetection,
+            handleRailRef,
+            setHandleRefs,
+            setFollowerRefs,
             fillStyle: fillStyleRef,
-            handleKeyDown,
-            handleRailClick,
-            handleHandleFocus1,
-            handleHandleBlur1,
-            handleFirstHandleMouseDown,
-            handleFirstHandleMouseEnter,
-            handleFirstHandleMouseLeave,
-            handleHandleFocus2,
-            handleHandleBlur2,
-            handleSecondHandleMouseDown,
-            handleSecondHandleMouseEnter,
-            handleSecondHandleMouseLeave,
+            getHandleStyle,
+            activeIndex: activeIndexRef,
+            arrifiedValues: arrifiedValueRef,
+            followerEnabledIndexSet: followerEnabledIndexSetRef,
+            handleRailMouseDown,
+            handleHandleFocus,
+            handleHandleBlur,
+            handleHandleMouseEnter,
+            handleHandleMouseLeave,
+            handleRailKeyDown,
             indicatorCssVars: computed(() => {
                 const { self: { fontSize, indicatorColor, indicatorBoxShadow, indicatorTextColor, indicatorBorderRadius } } = themeRef.value;
                 return {
@@ -691,7 +455,7 @@ export default defineComponent({
                 };
             }),
             cssVars: computed(() => {
-                const { self: { railColor, railColorHover, fillColor, fillColorHover, handleColor, opacityDisabled, dotColor, dotColorModal, handleBoxShadow, handleBoxShadowHover, handleBoxShadowActive, handleBoxShadowFocus, dotBorder, dotBoxShadow, railHeight, handleSize, dotHeight, dotWidth, dotBorderRadius, fontSize, dotBorderActive, dotColorPopover }, common: { cubicBezierEaseInOut } } = themeRef.value;
+                const { self: { railColor, railColorHover, fillColor, fillColorHover, handleColor, opacityDisabled, dotColor, dotColorModal, handleBoxShadow, handleBoxShadowHover, handleBoxShadowActive, handleBoxShadowFocus, dotBorder, dotBoxShadow, railHeight, railWidthVertical, handleSize, dotHeight, dotWidth, dotBorderRadius, fontSize, dotBorderActive, dotColorPopover }, common: { cubicBezierEaseInOut } } = themeRef.value;
                 return {
                     '--bezier': cubicBezierEaseInOut,
                     '--dot-border': dotBorder,
@@ -715,7 +479,8 @@ export default defineComponent({
                     '--opacity-disabled': opacityDisabled,
                     '--rail-color': railColor,
                     '--rail-color-hover': railColorHover,
-                    '--rail-height': railHeight
+                    '--rail-height': railHeight,
+                    '--rail-width-vertical': railWidthVertical
                 };
             })
         };
@@ -726,11 +491,13 @@ export default defineComponent({
                 `${mergedClsPrefix}-slider`,
                 {
                     [`${mergedClsPrefix}-slider--disabled`]: this.mergedDisabled,
-                    [`${mergedClsPrefix}-slider--active`]: this.active,
-                    [`${mergedClsPrefix}-slider--with-mark`]: this.marks
+                    [`${mergedClsPrefix}-slider--active`]: this.activeIndex !== -1,
+                    [`${mergedClsPrefix}-slider--with-mark`]: this.marks,
+                    [`${mergedClsPrefix}-slider--vertical`]: this.vertical,
+                    [`${mergedClsPrefix}-slider--reverse`]: this.reverse
                 }
-            ], style: this.cssVars, onKeydown: this.handleKeyDown, onClick: this.handleRailClick },
-            h("div", { ref: "railRef", class: `${mergedClsPrefix}-slider-rail` },
+            ], style: this.cssVars, onKeydown: this.handleRailKeyDown, onMousedown: this.handleRailMouseDown, onTouchstart: this.handleRailMouseDown },
+            h("div", { class: `${mergedClsPrefix}-slider-rail` },
                 h("div", { class: `${mergedClsPrefix}-slider-rail__fill`, style: this.fillStyle }),
                 this.marks ? (h("div", { class: [
                         `${mergedClsPrefix}-slider-dots`,
@@ -742,35 +509,27 @@ export default defineComponent({
                         {
                             [`${mergedClsPrefix}-slider-dot--active`]: mark.active
                         }
-                    ], style: mark.style }))))) : null),
-            h(VBinder, null, {
-                default: () => [
-                    h(VTarget, null, {
-                        default: () => (h("div", { ref: "handleRef1", class: `${mergedClsPrefix}-slider-handle`, tabindex: this.mergedDisabled ? -1 : 0, style: this.firstHandleStyle, onFocus: this.handleHandleFocus1, onBlur: this.handleHandleBlur1, onTouchstart: this.handleFirstHandleMouseDown, onMousedown: this.handleFirstHandleMouseDown, onMouseenter: this.handleFirstHandleMouseEnter, onMouseleave: this.handleFirstHandleMouseLeave }))
-                    }),
-                    this.tooltip && (h(VFollower, { ref: "followerRef1", show: this.mergedShowTooltip1, to: this.adjustedTo, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, placement: this.placement, containerClass: this.namespace }, {
-                        default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, css: !(this.active && this.prevActive) }, {
-                            default: () => this.mergedShowTooltip1 ? (h("div", { class: `${mergedClsPrefix}-slider-handle-indicator`, style: this.indicatorCssVars }, typeof formatTooltip === 'function'
-                                ? formatTooltip(this.handleValue1)
-                                : this.handleValue1)) : null
-                        }))
-                    }))
-                ]
-            }),
-            this.tooltip && this.range ? (h(VBinder, null, {
-                default: () => [
-                    h(VTarget, null, {
-                        default: () => (h("div", { ref: "handleRef2", class: `${mergedClsPrefix}-slider-handle`, tabindex: this.mergedDisabled ? -1 : 0, style: this.secondHandleStyle, onFocus: this.handleHandleFocus2, onBlur: this.handleHandleBlur2, onTouchstart: this.handleSecondHandleMouseDown, onMousedown: this.handleSecondHandleMouseDown, onMouseenter: this.handleSecondHandleMouseEnter, onMouseleave: this.handleSecondHandleMouseLeave }))
-                    }),
-                    h(VFollower, { ref: "followerRef2", show: this.mergedShowTooltip2, to: this.adjustedTo, placement: this.placement, containerClass: this.namespace, teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey }, {
-                        default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, css: !(this.active && this.prevActive) }, {
-                            default: () => this.mergedShowTooltip2 ? (h("div", { class: `${mergedClsPrefix}-slider-handle-indicator`, style: this.indicatorCssVars }, typeof formatTooltip === 'function'
-                                ? formatTooltip(this.handleValue2)
-                                : this.handleValue2)) : null
-                        }))
-                    })
-                ]
-            })) : null,
-            this.marks ? (h("div", { class: `${mergedClsPrefix}-slider-marks` }, this.markInfos.map((mark) => (h("div", { key: mark.label, class: `${mergedClsPrefix}-slider-mark`, style: mark.style }, mark.label))))) : null));
+                    ], style: mark.style }))))) : null,
+                h("div", { ref: "handleRailRef", class: `${mergedClsPrefix}-slider-handles` }, this.arrifiedValues.map((value, index) => {
+                    const showTooltip = this.isShowTooltip(index);
+                    return (h(VBinder, null, {
+                        default: () => [
+                            h(VTarget, null, {
+                                default: () => (h("div", { ref: this.setHandleRefs(index), class: `${mergedClsPrefix}-slider-handle`, tabindex: this.mergedDisabled ? -1 : 0, style: this.getHandleStyle(value, index), onFocus: () => this.handleHandleFocus(index), onBlur: () => this.handleHandleBlur(index), onMouseenter: () => this.handleHandleMouseEnter(index), onMouseleave: () => this.handleHandleMouseLeave(index) }))
+                            }),
+                            this.tooltip && (h(VFollower, { ref: this.setFollowerRefs(index), show: showTooltip, to: this.adjustedTo, enabled: this.followerEnabledIndexSet.has(index), teleportDisabled: this.adjustedTo === useAdjustedTo.tdkey, placement: this.mergedPlacement, containerClass: this.namespace }, {
+                                default: () => (h(Transition, { name: "fade-in-scale-up-transition", appear: this.isMounted, css: this.isSkipCSSDetection(index), onEnter: () => this.followerEnabledIndexSet.add(index), onAfterLeave: () => this.followerEnabledIndexSet.delete(index) }, {
+                                    default: () => showTooltip ? (h("div", { class: [
+                                            `${mergedClsPrefix}-slider-handle-indicator`,
+                                            `${mergedClsPrefix}-slider-handle-indicator--${this.mergedPlacement}`
+                                        ], style: this.indicatorCssVars }, typeof formatTooltip === 'function'
+                                        ? formatTooltip(value)
+                                        : value)) : null
+                                }))
+                            }))
+                        ]
+                    }));
+                })),
+                this.marks ? (h("div", { class: `${mergedClsPrefix}-slider-marks` }, this.markInfos.map((mark) => (h("div", { key: mark.label, class: `${mergedClsPrefix}-slider-mark`, style: mark.style }, mark.label))))) : null)));
     }
 });