Enable metadata to be attached to a handle

.gitignore

@@ -22,3 +22,5 @@ node_modules
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+.idea/

.size-snapshot.json

@@ -1,12 +1,12 @@
 {
   "build/dist/react-compound-slider.js": {
-    "bundled": 78853,
-    "minified": 27782,
-    "gzipped": 8687
+    "bundled": 79012,
+    "minified": 27863,
+    "gzipped": 8712
   },
   "build/dist/react-compound-slider.min.js": {
-    "bundled": 12494,
-    "minified": 12472,
-    "gzipped": 4297
+    "bundled": 12571,
+    "minified": 12549,
+    "gzipped": 4325
   }
 }

src/Slider/Slider.d.ts

@@ -17,7 +17,7 @@ export interface SliderProps {
   mode?: number | SliderModeFunction;
   step?: number;
   domain?: ReadonlyArray<number>;
-  values: ReadonlyArray<number>;
+  values: ReadonlyArray<any>;
   vertical?: boolean;
   reversed?: boolean;
   disabled?: boolean;

src/Slider/Slider.js

@@ -22,10 +22,8 @@ const isBrowser =
 
 const noop = () => {}
 
-const compare = b => (m, d, i) => m && b[i] === d
-
 const equal = (a, b) => {
-  return a === b || (a.length === b.length && a.reduce(compare(b), true))
+  return JSON.stringify(a) === JSON.stringify(b)
 }
 
 const getNextValue = (curr, step, domain, reversed) => {
@@ -472,8 +470,13 @@ class Slider extends PureComponent {
       },
     } = this
 
-    const mappedHandles = handles.map(({ key, val }) => {
-      return { id: key, value: val, percent: valueToPerc.getValue(val) }
+    const mappedHandles = handles.map(({ key, val, metadata }) => {
+      return {
+        id: key,
+        value: val,
+        percent: valueToPerc.getValue(val),
+        metadata,
+      }
     })
 
     const children = React.Children.map(this.props.children, child => {

src/Slider/utils.js

@@ -65,7 +65,9 @@ export function getHandles(values = [], reversed, valueToStep, warn) {
   let changes = 0
 
   const handles = values
-    .map(x => {
+    .map(item => {
+      const x = (typeof item === 'object') ? item.value : item
+      const metadata = (typeof item === 'object') ? item : {}
       const val = valueToStep.getValue(x)
 
       if (x !== val) {
@@ -76,9 +78,9 @@ export function getHandles(values = [], reversed, valueToStep, warn) {
         )
       }
 
-      return val
+      return { val, metadata };
     })
-    .map((val, i) => ({ key: `$$-${i}`, val }))
+    .map(({ val, metadata }, i) => ({ key: `$$-${i}`, val, metadata }))
     .sort(getSortByVal(reversed))
 
   return { handles, changes }

src/index.d.ts

@@ -4,6 +4,7 @@ export interface SliderItem {
   id: string;
   value: number;
   percent: number;
+  metadata: Object;
 }
 
 export interface EventData {