Open
Description
As the documentation of noUISlider:
https://refreshless.com/nouislider/slider-options/#section-handle-attributes
noUiSlider.create(slider, {
start: [10, 120],
handleAttributes: [
{ 'aria-label': 'lower' },
{ 'aria-label': 'upper' },
],
range: {
'min': 0,
'max': 100
}
});
It should be possible to assign different labels to the handles separately by passing a array
But recently the parameter aria
of vueform slider is not supporting.
Where if we take a look on the source code:
if ((ariaLabelledby && ariaLabelledby.value) || (aria && Object.keys(aria.value).length)) {
let handles = Array.isArray(value.value) ? value.value : [value.value]
defaultOptions.handleAttributes = handles.map(h => (Object.assign({}, aria.value, ariaLabelledby && ariaLabelledby.value ? {
'aria-labelledby': ariaLabelledby.value,
}: {})))
}
aria
is always passed as an object
to defaultOptions.handleAttributes
, which make such action becoming not possible.
Although developers can also try passing slider option with options
parameter, it is not possible in this case.
While with the watcher:
watch(options, refresh, { immediate: false, deep: true })
Making the slider refreshing everytime when user dragging the controls and becoming unusable.
Possible solution:
- Make
aria
to accept bothobject
andarray
- Then have different action base on the type
Metadata
Metadata
Assignees
Labels
No labels