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 both object and array
- Then have different action base on the type
As the documentation of noUISlider:
https://refreshless.com/nouislider/slider-options/#section-handle-attributes
It should be possible to assign different labels to the handles separately by passing a
arrayBut recently the parameter
ariaof vueform slider is not supporting.Where if we take a look on the source code:
ariais always passed as anobjecttodefaultOptions.handleAttributes, which make such action becoming not possible.Although developers can also try passing slider option with
optionsparameter, it is not possible in this case.While with the watcher:
Making the slider refreshing everytime when user dragging the controls and becoming unusable.
Possible solution:
ariato accept bothobjectandarray