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

[oliver139]

Seems this repo is not being maintained..
For anyone else encountering same problem, you may try my version which applied #89
https://www.npmjs.com/package/@oliver139/vueform-slider