add check for ariaLabels array, remove uneeded defaults

resolves #93

Author: simeydotme

README.md

@@ -114,6 +114,7 @@ prop | type | default | description
 **hoverable** | `Boolean` | `true` | Whether hover styles are enabled for both handles and pips/values
 **disabled** | `Boolean` | `false` | Determine if the slider is disabled, or enabled _(only disables interactions, and events)_
 **id** | `String` | `""` | Give the slider a unique ID for use in styling
+**ariaLabels** | `Array` | `[]` | Array of strings to use for the `aria-label` attribute on the handles.
 **formatter** | `Function` | `(v,i,p) => v` | A function to re-format values before they are displayed (`v = value, i = pip index, p = percent`)
 **handleFormatter** | `Function` | `formatter` | A function to re-format values on the handle/float before they are displayed. Defaults to the same function given to the `formatter` property (`v = value, i = handle index, p = percent`)
 **springValues** | `Object` | `{ stiffness: 0.15, damping: 0.4 }` | Svelte spring physics object to change the behaviour of the handle when moving

src/RangeSlider.svelte

@@ -88,25 +88,11 @@
     // set the valueLength for the next check
     valueLength = values.length;
 
-  };
-
-  $: {
-      // set default aria labels if none provided,
-      // and also update the aria labels if the values change
-      if ( !ariaLabels.length ) {
-        if ( range === true && values.length === 2 ) {
-          ariaLabels[0] = `Minimum value in range from ${min} to ${max}`;
-          ariaLabels[1] = `Maximum value in range from ${min} to ${max}`;
-        } else {
-          ariaLabels = values.map((v, i) => `Value ${i + 1} in range from ${min} to ${max}`);
-        }
-      } else if ( ariaLabels.length !== values.length ) {
-        for ( let i = ariaLabels.length; i < values.length; i++ ) {
-          ariaLabels[i] = `Value ${i + 1} in range from ${min} to ${max}`;
-        }
-      }
+    if ( values.length > 1 && !Array.isArray(ariaLabels) ) {
+      console.warn( `'ariaLabels' prop should be an Array (https://github.com/simeydotme/svelte-range-slider-pips#slider-props)` );
+    }
 
-  }
+  };
 
   /**
    * take in a value, and then calculate that value's percentage

test/src/App.svelte

@@ -231,7 +231,7 @@
     <br><button on:click={()=>{ zeromin = 10; zeromax = 30; zero = [3,70]; }}>increase min/max</button> - {zero} 
 
     <h2>push & pop values</h2>
-    <RangeSlider bind:values float pips all="label" {reversed} {hoverable} {disabled} />
+    <RangeSlider bind:values float pips all="label" {reversed} {hoverable} {disabled} ariaLabels="x" />
     <button on:click={pushValues}>push</button>
     <button on:click={popValues}>pop</button>
     <br>({values})
@@ -255,7 +255,9 @@
     {decimals2}<br>
 
     <h2>Aria Labels</h2>
-    <RangeSlider ariaLabels={["a"]} {reversed} {hoverable} {disabled} />
+    <RangeSlider ariaLabels="ab" values={[5,20]} {reversed} {hoverable} {disabled} />
+    <RangeSlider ariaLabels="{6}" {reversed} {hoverable} {disabled} />
+    <RangeSlider ariaLabels="{{}}" {reversed} {hoverable} {disabled} />
     <RangeSlider ariaLabels={["a", "b"]} values={[5,20]} {reversed} {hoverable} {disabled} />
     <RangeSlider ariaLabels={["a", "b"]} values={[5,20,40]} {reversed} {hoverable} {disabled} />
     <RangeSlider ariaLabels={["", "b"]} values={[5,20]} range {reversed} {hoverable} {disabled} />