Not able to assign different aria-label to different handles

[oliver139]

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:

1. Make aria to accept both object and array
2. Then have different action base on the type