Parse input as comma separated values instead of a JSON array

docs/pages/components/multi-range.md

@@ -22,7 +22,7 @@ const App = () => <SlRange />;
 Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing.
 
 ```html:preview
-<sl-multi-range min="1" max="10" step="1" value="[0,10]"></sl-multi-range>
+<sl-multi-range min="1" max="10" step="1" value="0,10"></sl-multi-range>
 ```
 
 {% raw %}
@@ -54,7 +54,7 @@ const App = () => <SlRange disabled />;
 You can use any number of handles on the slider. The slider will have one handle for every element in the value array.
 
 ```html:preview
-<sl-multi-range value="[25,50,75]"></sl-multi-range>
+<sl-multi-range value="25,50,75"></sl-multi-range>
 ```
 
 {% raw %}
@@ -78,7 +78,7 @@ You can add an accessible label and/or descriptive help text using the `label` a
 ```jsx:react
 import SlRange from '@shoelace-style/shoelace/dist/react/multi-range';
 
-const App = () => <SlRange label="Difficulty Range" help-text"Search for challenges within the desired difficulty range" />;
+const App = () => <SlRange label="Difficulty Range" help-text="Search for challenges within the desired difficulty range" />;
 ```
 
 ### Custom Track Colors
@@ -87,7 +87,7 @@ You can customize the active and inactive portions of the track using the `--tra
 
 ```html:preview
 <sl-multi-range
-	value="[25,75]"
+	value="25,75"
 	style="
 		--track-color-active: var(--sl-color-green-300);
 		--track-color-inactive: var(--sl-color-red-300);

src/components/multi-range/multi-range.component.ts

@@ -22,6 +22,11 @@ const arraysDiffer = function (a: readonly number[], b: readonly number[]): bool
   return false;
 };
 
+const csvToArray = function (a: string | null): readonly number[] {
+  if (!a) return [];
+  return a.split(',').map(n => +n);
+};
+
 /**
  * @summary Multi-Ranges allow the user to select multiple values within a given range using a slider with multiple handles.
  * @documentation https://shoelace.style/components/multi-range
@@ -67,7 +72,7 @@ export default class SlMultiRange extends ShoelaceElement {
   @property() tooltip: 'top' | 'bottom' | 'none' = 'top';
 
   /** The current values of the range */
-  @property({ type: Array })
+  @property({ converter: csvToArray })
   set value(value: readonly number[]) {
     this.#value = value || [];
   }