Allow passing array to aria and ariaLabelledby for labeling multiple handles

src/Slider.d.ts

@@ -1,8 +1,14 @@
 import { defineComponent } from 'vue';
 
+interface typePropFormat {
+  prefix?: string,
+  suffix?: string,
+  decimals?: string,
+  thousand?: string,
+}
 interface SliderProps {
-  modelValue?: any;
-  value?: any;
+  modelValue?: number | number[];
+  value?: number | number[];
   id?: string;
   disabled?: boolean;
   min?: number;
@@ -11,15 +17,15 @@ interface SliderProps {
   orientation?: 'horizontal' | 'vertical';
   direction?: 'ltr' | 'rtl';
   tooltips?: boolean;
-  options?: object;
+  options?: Record<string, any>;
   merge?: number;
-  format?: any;
-  classes?: object;
+  format?: typePropFormat | ((v:number) => string | number);
+  classes?: Record<string, string>;
   showTooltip?: 'always' | 'focus' | 'drag';
   tooltipPosition?: null | 'top' | 'bottom' | 'left' | 'right';
   lazy?: boolean;
-  ariaLabelledby?: string;
-  aria?: object;
+  ariaLabelledby?: string | string[];
+  aria?: Record<string, string> | Record<string, string>[];
 }
 
 declare class Slider implements ReturnType<typeof defineComponent> {

src/Slider.vue

@@ -107,13 +107,13 @@
         default: true,
       },
       ariaLabelledby: {
-        type: String,
+        type: [String, Array],
         required: false,
         default: undefined,
       },
       aria: {
         required: false,
-        type: Object,
+        type: [Object, Array],
         default: () => ({}),
       },
     },

src/composables/useSlider.js

@@ -56,12 +56,38 @@ export default function useSlider (props, context, dependencies)
       defaultOptions.connect = true
     }
 
-    if ((ariaLabelledby && ariaLabelledby.value) || (aria && Object.keys(aria.value).length)) {
-      let handles = Array.isArray(value.value) ? value.value : [value.value]
+    // Check if aria / ariaLabelledby is provided
+    if ((ariaLabelledby && ariaLabelledby.value) || (aria && aria.value)) {
+      const handles = Array.isArray(value.value) ? value.value : [value.value];
+
+      // For each handle
+      defaultOptions.handleAttributes = handles.map((h, i) => {
+        const output = {};
+
+        // if aria provided
+        if (aria.value) {
+          if (Array.isArray(aria.value)) {
+            // If array is provided, assign the value respectively
+            Object.assign(output, aria.value[i]);
+          } else {
+            // Else assign the object
+            Object.assign(output, aria.value);
+          }
+        }
+
+        // if ariaLabelledby provided
+        if (ariaLabelledby.value) {
+          if (typeof ariaLabelledby.value === 'string') {
+            // if string is provided, assign the value in object format
+            Object.assign(output, { 'aria-labelledby': ariaLabelledby.value });
+          } else {
+            // Else if string array is provided, assign the value respectively
+            Object.assign(output, { 'aria-labelledby': ariaLabelledby.value[i] });
+          }
+        }
 
-      defaultOptions.handleAttributes = handles.map(h => (Object.assign({}, aria.value, ariaLabelledby && ariaLabelledby.value ? {
-        'aria-labelledby': ariaLabelledby.value,
-      }: {})))
+        return output;
+      });
     }
 
     if (format.value) {