props fix
parent
5b62a009cd
commit
a7677ef31f
|
@ -48,13 +48,13 @@ const SliderProps = [
|
||||||
description: "Index of the element in tabbing order."
|
description: "Index of the element in tabbing order."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "ariaLabelledBy",
|
name: "aria-labelledby",
|
||||||
type: "string",
|
type: "string",
|
||||||
default: "null",
|
default: "null",
|
||||||
description: "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
|
description: "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: "ariaLabel",
|
name: "aria-label",
|
||||||
type: "string",
|
type: "string",
|
||||||
default: "null",
|
default: "null",
|
||||||
description: "Used to define a string that labels the element."
|
description: "Used to define a string that labels the element."
|
||||||
|
|
|
@ -55,7 +55,7 @@ export interface SliderProps {
|
||||||
/**
|
/**
|
||||||
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
|
* Establishes relationships between the component and label(s) where its value should be one or more element IDs.
|
||||||
*/
|
*/
|
||||||
ariaLabelledBy?: string | undefined;
|
ariaLabelledby?: string | undefined;
|
||||||
/**
|
/**
|
||||||
* Used to define a string that labels the element.
|
* Used to define a string that labels the element.
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -2,11 +2,11 @@
|
||||||
<div :class="containerClass" @click="onBarClick">
|
<div :class="containerClass" @click="onBarClick">
|
||||||
<span class="p-slider-range" :style="rangeStyle"></span>
|
<span class="p-slider-range" :style="rangeStyle"></span>
|
||||||
<span v-if="!range" class="p-slider-handle" :style="handleStyle" @touchstart="onDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event)" @keydown="onKeyDown($event)" :tabindex="tabindex"
|
<span v-if="!range" class="p-slider-handle" :style="handleStyle" @touchstart="onDragStart($event)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event)" @keydown="onKeyDown($event)" :tabindex="tabindex"
|
||||||
role="slider" :aria-valuemin="min" :aria-valuenow="modelValue" :aria-valuemax="max" :aria-labelledby="ariaLabelledBy" :aria-label="ariaLabel" :aria-orientation="orientation"></span>
|
role="slider" :aria-valuemin="min" :aria-valuenow="modelValue" :aria-valuemax="max" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-orientation="orientation"></span>
|
||||||
<span v-if="range" class="p-slider-handle" :style="rangeStartHandleStyle" @touchstart="onDragStart($event, 0)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 0)" @keydown="onKeyDown($event)" :tabindex="tabindex"
|
<span v-if="range" class="p-slider-handle" :style="rangeStartHandleStyle" @touchstart="onDragStart($event, 0)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 0)" @keydown="onKeyDown($event)" :tabindex="tabindex"
|
||||||
role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[0] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledBy" :aria-label="ariaLabel" :aria-orientation="orientation"></span>
|
role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[0] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-orientation="orientation"></span>
|
||||||
<span v-if="range" class="p-slider-handle" :style="rangeEndHandleStyle" @touchstart="onDragStart($event, 1)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 1)" @keydown="onKeyDown($event, 1)" :tabindex="tabindex"
|
<span v-if="range" class="p-slider-handle" :style="rangeEndHandleStyle" @touchstart="onDragStart($event, 1)" @touchmove="onDrag($event)" @touchend="onDragEnd($event)" @mousedown="onMouseDown($event, 1)" @keydown="onKeyDown($event, 1)" :tabindex="tabindex"
|
||||||
role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[1] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledBy" :aria-label="ariaLabel" :aria-orientation="orientation"></span>
|
role="slider" :aria-valuemin="min" :aria-valuenow="modelValue ? modelValue[1] : null" :aria-valuemax="max" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" :aria-orientation="orientation"></span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -44,13 +44,13 @@ export default {
|
||||||
},
|
},
|
||||||
tabindex: {
|
tabindex: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: null
|
default: 0
|
||||||
},
|
},
|
||||||
ariaLabelledBy: {
|
'aria-labelledby': {
|
||||||
type: String,
|
type: String,
|
||||||
default: null
|
default: null
|
||||||
},
|
},
|
||||||
ariaLabel: {
|
'aria-label': {
|
||||||
type: String,
|
type: String,
|
||||||
default: null
|
default: null
|
||||||
}
|
}
|
||||||
|
|
|
@ -120,18 +120,6 @@ export default {
|
||||||
<td>number</td>
|
<td>number</td>
|
||||||
<td>null</td>
|
<td>null</td>
|
||||||
<td>Index of the element in tabbing order.</td>
|
<td>Index of the element in tabbing order.</td>
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>ariaLabelledBy</td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>null</td>
|
|
||||||
<td>Establishes relationships between the component and label(s) where its value should be one or more element IDs.</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>ariaLabel</td>
|
|
||||||
<td>string</td>
|
|
||||||
<td>null</td>
|
|
||||||
<td>Used to define a string that labels the element.</td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
Loading…
Reference in New Issue