@@ -101,20 +117,17 @@ import {
import {
debugWarn,
isValidComponentSize,
- off,
- on,
throwError,
} from '@element-plus/utils'
-import { useNamespace, useSize } from '@element-plus/hooks'
+import { useLocale, useNamespace, useSize } from '@element-plus/hooks'
import SliderButton from './button.vue'
import SliderMarker from './marker.vue'
import { useMarks } from './useMarks'
import { useSlide } from './useSlide'
import { useStops } from './useStops'
-import type { PropType, Ref } from 'vue'
+import type { PropType } from 'vue'
import type { ComponentSize } from '@element-plus/constants'
-import type { Nullable } from '@element-plus/utils'
export default defineComponent({
name: 'ElSlider',
@@ -194,6 +207,18 @@ export default defineComponent({
type: String,
default: undefined,
},
+ rangeStartLabel: {
+ type: String,
+ default: undefined,
+ },
+ rangeEndLabel: {
+ type: String,
+ default: undefined,
+ },
+ formatValueText: {
+ type: Function as PropType<(val: number) => string>,
+ default: undefined,
+ },
tooltipClass: {
type: String,
default: undefined,
@@ -205,6 +230,7 @@ export default defineComponent({
setup(props, { emit }) {
const ns = useNamespace('slider')
+ const { t } = useLocale()
const initData = reactive({
firstValue: 0,
secondValue: 0,
@@ -225,7 +251,9 @@ export default defineComponent({
barStyle,
resetSize,
emitChange,
+ onSliderWrapperPrevent,
onSliderClick,
+ onSliderDown,
setFirstValue,
setSecondValue,
} = useSlide(props, initData, emit)
@@ -242,6 +270,40 @@ export default defineComponent({
() => props.inputSize || sliderWrapperSize.value
)
+ const groupLabel = computed
(() => {
+ return (
+ props.label ||
+ t('el.slider.defaultLabel', {
+ min: props.min,
+ max: props.max,
+ })
+ )
+ })
+
+ const firstButtonLabel = computed(() => {
+ if (props.range) {
+ return props.rangeStartLabel || t('el.slider.defaultRangeStartLabel')
+ } else {
+ return groupLabel.value
+ }
+ })
+
+ const firstValueText = computed(() => {
+ return props.formatValueText
+ ? props.formatValueText(firstValue.value)
+ : `${firstValue.value}`
+ })
+
+ const secondButtonLabel = computed(() => {
+ return props.rangeEndLabel || t('el.slider.defaultRangeEndLabel')
+ })
+
+ const secondValueText = computed(() => {
+ return props.formatValueText
+ ? props.formatValueText(secondValue.value)
+ : `${secondValue.value}`
+ })
+
const sliderKls = computed(() => [
ns.b(),
ns.m(sliderWrapperSize.value),
@@ -289,13 +351,20 @@ export default defineComponent({
sliderSize,
slider,
+ groupLabel,
firstButton,
+ firstButtonLabel,
+ firstValueText,
secondButton,
+ secondButtonLabel,
+ secondValueText,
sliderDisabled,
runwayStyle,
barStyle,
emitChange,
onSliderClick,
+ onSliderWrapperPrevent,
+ onSliderDown,
getStopStyle,
setFirstValue,
setSecondValue,
@@ -405,10 +474,9 @@ const useWatch = (props, initData, minValue, maxValue, emit, elFormItem) => {
}
const useLifecycle = (props, initData, resetSize) => {
- const sliderWrapper: Ref> = ref(null)
+ const sliderWrapper = ref()
onMounted(async () => {
- let valuetext
if (props.range) {
if (Array.isArray(props.modelValue)) {
initData.firstValue = Math.max(props.min, props.modelValue[0])
@@ -418,7 +486,6 @@ const useLifecycle = (props, initData, resetSize) => {
initData.secondValue = props.max
}
initData.oldValue = [initData.firstValue, initData.secondValue]
- valuetext = `${initData.firstValue}-${initData.secondValue}`
} else {
if (
typeof props.modelValue !== 'number' ||
@@ -432,25 +499,16 @@ const useLifecycle = (props, initData, resetSize) => {
)
}
initData.oldValue = initData.firstValue
- valuetext = initData.firstValue
}
- sliderWrapper.value.setAttribute('aria-valuetext', valuetext)
-
- // label screen reader
- sliderWrapper.value.setAttribute(
- 'aria-label',
- props.label ? props.label : `slider between ${props.min} and ${props.max}`
- )
-
- on(window, 'resize', resetSize)
+ window.addEventListener('resize', resetSize)
await nextTick()
resetSize()
})
onBeforeUnmount(() => {
- off(window, 'resize', resetSize)
+ window.removeEventListener('resize', resetSize)
})
return {
diff --git a/packages/components/slider/src/slider.type.ts b/packages/components/slider/src/slider.type.ts
index 76c4843213..74d13a1fd0 100644
--- a/packages/components/slider/src/slider.type.ts
+++ b/packages/components/slider/src/slider.type.ts
@@ -1,5 +1,9 @@
-import type { CSSProperties, ComputedRef, Ref } from 'vue'
-import type { Nullable } from '@element-plus/utils'
+import type {
+ CSSProperties,
+ ComponentPublicInstance,
+ ComputedRef,
+ Ref,
+} from 'vue'
export interface ISliderProps {
modelValue: number | number[]
@@ -18,14 +22,17 @@ export interface ISliderProps {
height: string
debounce: number
label: string
+ rangeStartLabel: string
+ rangeEndLabel: string
+ formatValueText: (val: number) => string
tooltipClass: string
marks?: Record
}
export interface ISliderInitData {
- firstValue: Nullable
- secondValue: Nullable
- oldValue: Nullable
+ firstValue: number
+ secondValue: number
+ oldValue?: number
dragging: boolean
sliderSize: number
}
@@ -73,7 +80,7 @@ export type Slide = {
}
export type ButtonRefs = {
- [s in 'firstButton' | 'secondButton']: Ref>
+ [s in 'firstButton' | 'secondButton']: Ref
}
export interface ISliderButtonProps {
@@ -95,15 +102,15 @@ export interface ISliderButtonInitData {
oldValue: number
}
-export interface ISliderButton {
- tooltip: Ref>
+export interface ISliderButton extends ComponentPublicInstance {
+ tooltip: Ref
showTooltip: Ref
wrapperStyle: ComputedRef
formatValue: ComputedRef
+ dragging: boolean
handleMouseEnter: () => void
handleMouseLeave: () => void
onButtonDown: (event: MouseEvent | TouchEvent) => void
- onLeftKeyDown: () => void
- onRightKeyDown: () => void
+ onKeyDown: (event: KeyboardEvent) => void
setPosition: (newPosition: number) => void
}
diff --git a/packages/components/slider/src/useSlide.ts b/packages/components/slider/src/useSlide.ts
index e541eec3c9..1ec879c972 100644
--- a/packages/components/slider/src/useSlide.ts
+++ b/packages/components/slider/src/useSlide.ts
@@ -5,24 +5,28 @@ import {
UPDATE_MODEL_EVENT,
} from '@element-plus/constants'
import { formContextKey, formItemContextKey } from '@element-plus/tokens'
-import type { CSSProperties } from 'vue'
-import type { ButtonRefs, ISliderInitData, ISliderProps } from './slider.type'
+import type { CSSProperties, ComponentInternalInstance, Ref } from 'vue'
+import type {
+ ButtonRefs,
+ ISliderButton,
+ ISliderInitData,
+ ISliderProps,
+} from './slider.type'
import type { FormContext, FormItemContext } from '@element-plus/tokens'
-import type { Nullable } from '@element-plus/utils'
export const useSlide = (
props: ISliderProps,
initData: ISliderInitData,
- emit
+ emit: ComponentInternalInstance['emit']
) => {
const elForm = inject(formContextKey, {} as FormContext)
const elFormItem = inject(formItemContextKey, {} as FormItemContext)
- const slider = shallowRef>(null)
+ const slider = shallowRef()
- const firstButton = ref(null)
+ const firstButton = ref()
- const secondButton = ref(null)
+ const secondButton = ref()
const buttonRefs: ButtonRefs = {
firstButton,
@@ -80,13 +84,14 @@ export const useSlide = (
}
}
- const setPosition = (percent: number) => {
+ const getButtonRefByPercent = (
+ percent: number
+ ): Ref => {
const targetValue = props.min + (percent * (props.max - props.min)) / 100
if (!props.range) {
- firstButton.value.setPosition(percent)
- return
+ return firstButton
}
- let buttonRefName: string
+ let buttonRefName: 'firstButton' | 'secondButton'
if (
Math.abs(minValue.value - targetValue) <
Math.abs(maxValue.value - targetValue)
@@ -101,7 +106,13 @@ export const useSlide = (
? 'firstButton'
: 'secondButton'
}
- buttonRefs[buttonRefName].value.setPosition(percent)
+ return buttonRefs[buttonRefName]
+ }
+
+ const setPosition = (percent: number): Ref => {
+ const buttonRef = getButtonRefByPercent(percent)
+ buttonRef.value!.setPosition(percent)
+ return buttonRef
}
const setFirstValue = (firstValue: number) => {
@@ -130,21 +141,51 @@ export const useSlide = (
)
}
- const onSliderClick = (event: MouseEvent) => {
+ const handleSliderPointerEvent = (
+ event: MouseEvent | TouchEvent
+ ): Ref | undefined => {
if (sliderDisabled.value || initData.dragging) return
resetSize()
+ let newPercent = 0
if (props.vertical) {
- const sliderOffsetBottom = slider.value.getBoundingClientRect().bottom
- setPosition(
- ((sliderOffsetBottom - event.clientY) / initData.sliderSize) * 100
- )
+ const clientY =
+ (event as TouchEvent).touches?.item(0)?.clientY ??
+ (event as MouseEvent).clientY
+ const sliderOffsetBottom = slider.value!.getBoundingClientRect().bottom
+ newPercent = ((sliderOffsetBottom - clientY) / initData.sliderSize) * 100
} else {
- const sliderOffsetLeft = slider.value.getBoundingClientRect().left
- setPosition(
- ((event.clientX - sliderOffsetLeft) / initData.sliderSize) * 100
- )
+ const clientX =
+ (event as TouchEvent).touches?.item(0)?.clientX ??
+ (event as MouseEvent).clientX
+ const sliderOffsetLeft = slider.value!.getBoundingClientRect().left
+ newPercent = ((clientX - sliderOffsetLeft) / initData.sliderSize) * 100
+ }
+ if (newPercent < 0 || newPercent > 100) return
+ return setPosition(newPercent)
+ }
+
+ const onSliderWrapperPrevent = (event: TouchEvent) => {
+ if (
+ buttonRefs['firstButton'].value?.dragging ||
+ buttonRefs['secondButton'].value?.dragging
+ ) {
+ event.preventDefault()
+ }
+ }
+
+ const onSliderDown = async (event: MouseEvent | TouchEvent) => {
+ const buttonRef = handleSliderPointerEvent(event)
+ if (buttonRef) {
+ await nextTick()
+ buttonRef.value!.onButtonDown(event)
+ }
+ }
+
+ const onSliderClick = (event: MouseEvent | TouchEvent) => {
+ const buttonRef = handleSliderPointerEvent(event)
+ if (buttonRef) {
+ emitChange()
}
- emitChange()
}
return {
@@ -160,7 +201,9 @@ export const useSlide = (
resetSize,
setPosition,
emitChange,
+ onSliderWrapperPrevent,
onSliderClick,
+ onSliderDown,
setFirstValue,
setSecondValue,
}
diff --git a/packages/components/slider/src/useSliderButton.ts b/packages/components/slider/src/useSliderButton.ts
index e91c87e742..114339d683 100644
--- a/packages/components/slider/src/useSliderButton.ts
+++ b/packages/components/slider/src/useSliderButton.ts
@@ -1,21 +1,22 @@
import { computed, inject, nextTick, ref, watch } from 'vue'
import { debounce } from 'lodash-unified'
-import { UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { off, on } from '@element-plus/utils'
+import { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import type { CSSProperties, ComputedRef } from 'vue'
+import type { CSSProperties, ComponentInternalInstance, ComputedRef } from 'vue'
import type {
ISliderButtonInitData,
ISliderButtonProps,
ISliderProvider,
} from './slider.type'
+const { left, down, right, up, home, end, pageUp, pageDown } = EVENT_CODE
+
const useTooltip = (
props: ISliderButtonProps,
formatTooltip: ComputedRef<(value: number) => number | string>,
showTooltip: ComputedRef
) => {
- const tooltip = ref(null)
+ const tooltip = ref()
const tooltipVisible = ref(false)
@@ -50,7 +51,7 @@ const useTooltip = (
export const useSliderButton = (
props: ISliderButtonProps,
initData: ISliderButtonInitData,
- emit
+ emit: ComponentInternalInstance['emit']
) => {
const {
disabled,
@@ -64,11 +65,13 @@ export const useSliderButton = (
emitChange,
resetSize,
updateDragging,
- } = inject('SliderProvider')
+ } = inject('SliderProvider')!
const { tooltip, tooltipVisible, formatValue, displayTooltip, hideTooltip } =
useTooltip(props, formatTooltip, showTooltip)
+ const button = ref()
+
const currentPosition = computed(() => {
return `${
((props.modelValue - min.value) / (max.value - min.value)) * 100
@@ -99,31 +102,71 @@ export const useSliderButton = (
if (disabled.value) return
event.preventDefault()
onDragStart(event)
- on(window, 'mousemove', onDragging)
- on(window, 'touchmove', onDragging)
- on(window, 'mouseup', onDragEnd)
- on(window, 'touchend', onDragEnd)
- on(window, 'contextmenu', onDragEnd)
+ window.addEventListener('mousemove', onDragging)
+ window.addEventListener('touchmove', onDragging)
+ window.addEventListener('mouseup', onDragEnd)
+ window.addEventListener('touchend', onDragEnd)
+ window.addEventListener('contextmenu', onDragEnd)
+ button.value.focus()
}
- const onLeftKeyDown = () => {
- if (disabled.value) return
- initData.newPosition =
- Number.parseFloat(currentPosition.value) -
- (step.value / (max.value - min.value)) * 100
- setPosition(initData.newPosition)
- emitChange()
- }
-
- const onRightKeyDown = () => {
+ const incrementPosition = (amount: number) => {
if (disabled.value) return
initData.newPosition =
Number.parseFloat(currentPosition.value) +
- (step.value / (max.value - min.value)) * 100
+ (amount / (max.value - min.value)) * 100
setPosition(initData.newPosition)
emitChange()
}
+ const onLeftKeyDown = () => {
+ incrementPosition(-step.value)
+ }
+
+ const onRightKeyDown = () => {
+ incrementPosition(step.value)
+ }
+
+ const onPageDownKeyDown = () => {
+ incrementPosition(-step.value * 4)
+ }
+
+ const onPageUpKeyDown = () => {
+ incrementPosition(step.value * 4)
+ }
+
+ const onHomeKeyDown = () => {
+ if (disabled.value) return
+ setPosition(0)
+ emitChange()
+ }
+
+ const onEndKeyDown = () => {
+ if (disabled.value) return
+ setPosition(100)
+ emitChange()
+ }
+
+ const onKeyDown = (event: KeyboardEvent) => {
+ let isPreventDefault = true
+ if ([left, down].includes(event.key)) {
+ onLeftKeyDown()
+ } else if ([right, up].includes(event.key)) {
+ onRightKeyDown()
+ } else if (event.key === home) {
+ onHomeKeyDown()
+ } else if (event.key === end) {
+ onEndKeyDown()
+ } else if (event.key === pageDown) {
+ onPageDownKeyDown()
+ } else if (event.key === pageUp) {
+ onPageUpKeyDown()
+ } else {
+ isPreventDefault = false
+ }
+ isPreventDefault && event.preventDefault()
+ }
+
const getClientXY = (event: MouseEvent | TouchEvent) => {
let clientX: number
let clientY: number
@@ -188,11 +231,11 @@ export const useSliderButton = (
emitChange()
}
}, 0)
- off(window, 'mousemove', onDragging)
- off(window, 'touchmove', onDragging)
- off(window, 'mouseup', onDragEnd)
- off(window, 'touchend', onDragEnd)
- off(window, 'contextmenu', onDragEnd)
+ window.removeEventListener('mousemove', onDragging)
+ window.removeEventListener('touchmove', onDragging)
+ window.removeEventListener('mouseup', onDragEnd)
+ window.removeEventListener('touchend', onDragEnd)
+ window.removeEventListener('contextmenu', onDragEnd)
}
}
@@ -227,6 +270,7 @@ export const useSliderButton = (
)
return {
+ button,
tooltip,
tooltipVisible,
showTooltip,
@@ -235,8 +279,7 @@ export const useSliderButton = (
handleMouseEnter,
handleMouseLeave,
onButtonDown,
- onLeftKeyDown,
- onRightKeyDown,
+ onKeyDown,
setPosition,
}
}
diff --git a/packages/locale/lang/en.ts b/packages/locale/lang/en.ts
index d85760f4df..0590bf67a2 100644
--- a/packages/locale/lang/en.ts
+++ b/packages/locale/lang/en.ts
@@ -91,6 +91,11 @@ export default {
preview: 'Preview',
continue: 'Continue',
},
+ slider: {
+ defaultLabel: 'slider between {min} and {max}',
+ defaultRangeStartLabel: 'pick start value',
+ defaultRangeEndLabel: 'pick end value',
+ },
table: {
emptyText: 'No Data',
confirmFilter: 'Confirm',