Squashed commit of the following:

commit 822f2d6527d161a29ed9d2603ae73c416ec04c37
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 15:33:17 2020 -0500

    Squashed commit of the following:

    commit 8853f3122e77188a987b5a2585fc61aa137fddab
    Author: [poww10s] <[theironminer@gmail.com]>
    Date:   Thu Nov 19 15:24:23 2020 -0500

        Squashed commit of the following:

        commit 47b74abadfd125b90c883d43786149a51bb7cdba
        Author: [poww10s] <[theironminer@gmail.com]>
        Date:   Thu Nov 19 14:15:03 2020 -0500

            custom rc-slider style and include

        commit b2d1161cbc7eabb6a2c512606b66104084c25754
        Author: [poww10s] <[theironminer@gmail.com]>
        Date:   Thu Nov 19 14:14:45 2020 -0500

            include rc-slider package

    commit fca611edc959935b09dcd70cfaa737680f22d559
    Author: [poww10s] <[theironminer@gmail.com]>
    Date:   Thu Nov 19 03:09:47 2020 -0500

        add styled-components

commit 86bec44f1ea5f631107aad0c561a5788728946c8
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:13:09 2020 -0500

    added timbre2 to App

commit d1c275b9915861fde8ca9225e5dcb591c707949d
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:13:00 2020 -0500

    updated parameterSlice with correct ID's

commit 3e694c135722c4c63c489e6c2691b18fea4f977a
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:12:30 2020 -0500

    added timbre reducer to store

commit 251693a3fd35aca039de51dda79a17e4154afb89
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:12:11 2020 -0500

    added support for seperate timbres

commit a2b24c1e6f7cf1b95bfeffb828418319932658ec
Author: [poww10s] <[theironminer@gmail.com]>
Date:   Thu Nov 19 01:11:54 2020 -0500

    added timbreSlice

package-lock.json

@@ -1168,6 +1168,29 @@
       "resolved": "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz",
       "integrity": "sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg=="
     },
+    "@emotion/is-prop-valid": {
+      "version": "0.8.8",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
+      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
+      "requires": {
+        "@emotion/memoize": "0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.4",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
+      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+    },
+    "@emotion/stylis": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
+      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
     "@eslint/eslintrc": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.2.1.tgz",
@@ -3407,6 +3430,22 @@
       "resolved": "https://registry.npmjs.org/babel-plugin-named-asset-import/-/babel-plugin-named-asset-import-0.3.7.tgz",
       "integrity": "sha512-squySRkf+6JGnvjoUtDEjSREJEBirnXi9NqP6rjSYsylxQxqBTz+pkmf395i9E2zsvmYUaI40BHo6SqZUdydlw=="
     },
+    "babel-plugin-styled-components": {
+      "version": "1.11.1",
+      "resolved": "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.11.1.tgz",
+      "integrity": "sha512-YwrInHyKUk1PU3avIRdiLyCpM++18Rs1NgyMXEAQC33rIXs/vro0A+stf4sT0Gf22Got+xRWB8Cm0tw+qkRzBA==",
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.0.0",
+        "@babel/helper-module-imports": "^7.0.0",
+        "babel-plugin-syntax-jsx": "^6.18.0",
+        "lodash": "^4.17.11"
+      }
+    },
+    "babel-plugin-syntax-jsx": {
+      "version": "6.18.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
+      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
+    },
     "babel-plugin-syntax-object-rest-spread": {
       "version": "6.13.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz",
@@ -3967,6 +4006,11 @@
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.2.0.tgz",
       "integrity": "sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg=="
     },
+    "camelize": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz",
+      "integrity": "sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs="
+    },
     "caniuse-api": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/caniuse-api/-/caniuse-api-3.0.0.tgz",
@@ -4103,6 +4147,11 @@
         }
       }
     },
+    "classnames": {
+      "version": "2.2.6",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
+      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    },
     "clean-css": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz",
@@ -4582,6 +4631,11 @@
         "postcss": "^7.0.5"
       }
     },
+    "css-color-keywords": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz",
+      "integrity": "sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU="
+    },
     "css-color-names": {
       "version": "0.0.4",
       "resolved": "https://registry.npmjs.org/css-color-names/-/css-color-names-0.0.4.tgz",
@@ -4665,6 +4719,16 @@
       "resolved": "https://registry.npmjs.org/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz",
       "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w=="
     },
+    "css-to-react-native": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz",
+      "integrity": "sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==",
+      "requires": {
+        "camelize": "^1.0.0",
+        "css-color-keywords": "^1.0.0",
+        "postcss-value-parser": "^4.0.2"
+      }
+    },
     "css-tree": {
       "version": "1.0.0-alpha.37",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-1.0.0-alpha.37.tgz",
@@ -5175,6 +5239,11 @@
       "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.3.0.tgz",
       "integrity": "sha512-PzwHEmsRP3IGY4gv/Ug+rMeaTIyTJvadCb+ujYXYeIylbHJezIyNToe8KfEgHTCEYyC+/bUghYOGg8yMGlZ6vA=="
     },
+    "dom-align": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/dom-align/-/dom-align-1.12.0.tgz",
+      "integrity": "sha512-YkoezQuhp3SLFGdOlr5xkqZ640iXrnHAwVYcDg8ZKRUtO7mSzSC2BA5V0VuyAwPSJA4CLIc6EDDJh4bEsD2+zA=="
+    },
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -12395,6 +12464,70 @@
         }
       }
     },
+    "rc-align": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/rc-align/-/rc-align-4.0.9.tgz",
+      "integrity": "sha512-myAM2R4qoB6LqBul0leaqY8gFaiECDJ3MtQDmzDo9xM9NRT/04TvWOYd2YHU9zvGzqk9QXF6S9/MifzSKDZeMw==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "2.x",
+        "dom-align": "^1.7.0",
+        "rc-util": "^5.3.0",
+        "resize-observer-polyfill": "^1.5.1"
+      }
+    },
+    "rc-motion": {
+      "version": "2.3.4",
+      "resolved": "https://registry.npmjs.org/rc-motion/-/rc-motion-2.3.4.tgz",
+      "integrity": "sha512-La9JjfM58Vrwds1wM9OAkRTWsGeVqNnftI1YFti2WtaA2Ernk2vjbVio9hGbzhF0EvGrEvrzS96Mx/6lGT6Z0w==",
+      "requires": {
+        "@babel/runtime": "^7.11.1",
+        "classnames": "^2.2.1",
+        "rc-util": "^5.2.1"
+      }
+    },
+    "rc-slider": {
+      "version": "9.6.3",
+      "resolved": "https://registry.npmjs.org/rc-slider/-/rc-slider-9.6.3.tgz",
+      "integrity": "sha512-qLEDQ6FKPDmzWgF7WQ8otf41z53YKSgiSeoec50H1IMz7xLwwXX9+luDYI08br3x8i6u8jIZtggN5RD1ftKnhw==",
+      "requires": {
+        "@babel/runtime": "^7.10.1",
+        "classnames": "^2.2.5",
+        "rc-tooltip": "^5.0.1",
+        "rc-util": "^5.0.0",
+        "shallowequal": "^1.1.0"
+      }
+    },
+    "rc-tooltip": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/rc-tooltip/-/rc-tooltip-5.0.1.tgz",
+      "integrity": "sha512-3AnxhUS0j74xAV3khrKw8o6rg+Ima3nw09DJBezMPnX3ImQUAnayWsPSlN1mEnihjA43rcFkGM1emiKE+CXyMQ==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "rc-trigger": "^5.0.0"
+      }
+    },
+    "rc-trigger": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/rc-trigger/-/rc-trigger-5.1.2.tgz",
+      "integrity": "sha512-A6UdDy95masAEIaNmazPtqHW1EOFDWi2C2bJGDpr9OYpmObDpWKdxyNijVbFb6l1viTkAU9d3FyStgNPddgFzw==",
+      "requires": {
+        "@babel/runtime": "^7.11.2",
+        "classnames": "^2.2.6",
+        "rc-align": "^4.0.0",
+        "rc-motion": "^2.0.0",
+        "rc-util": "^5.5.0"
+      }
+    },
+    "rc-util": {
+      "version": "5.5.0",
+      "resolved": "https://registry.npmjs.org/rc-util/-/rc-util-5.5.0.tgz",
+      "integrity": "sha512-YJB+zZGvCll/bhxXRVLAekr7lOvTgqMlRIhgINoINfUek7wQvi5sft46NOi3yYUYhocpuW4k8+5okW46sBsZAQ==",
+      "requires": {
+        "react-is": "^16.12.0",
+        "shallowequal": "^1.1.0"
+      }
+    },
     "react": {
       "version": "17.0.1",
       "resolved": "https://registry.npmjs.org/react/-/react-17.0.1.tgz",
@@ -12984,6 +13117,11 @@
       "resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
       "integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
     },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
     "resolve": {
       "version": "1.18.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.18.1.tgz",
@@ -13668,6 +13806,11 @@
         "kind-of": "^6.0.2"
       }
     },
+    "shallowequal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz",
+      "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ=="
+    },
     "shebang-command": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
@@ -14406,6 +14549,23 @@
         "schema-utils": "^2.7.0"
       }
     },
+    "styled-components": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/styled-components/-/styled-components-5.2.1.tgz",
+      "integrity": "sha512-sBdgLWrCFTKtmZm/9x7jkIabjFNVzCUeKfoQsM6R3saImkUnjx0QYdLwJHBjY9ifEcmjDamJDVfknWm1yxZPxQ==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/traverse": "^7.4.5",
+        "@emotion/is-prop-valid": "^0.8.8",
+        "@emotion/stylis": "^0.8.4",
+        "@emotion/unitless": "^0.7.4",
+        "babel-plugin-styled-components": ">= 1",
+        "css-to-react-native": "^3.0.0",
+        "hoist-non-react-statics": "^3.0.0",
+        "shallowequal": "^1.1.0",
+        "supports-color": "^5.5.0"
+      }
+    },
     "stylehacks": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz",

package.json

@@ -7,10 +7,12 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "rc-slider": "^9.6.3",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-redux": "^7.2.2",
-    "react-scripts": "4.0.0"
+    "react-scripts": "4.0.0",
+    "styled-components": "^5.2.1"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -32,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "babel-plugin-styled-components": "^1.11.1"
   }
 }

src/App.js

@@ -6,7 +6,8 @@ function App() {
     return (
         <div className="App">
             <header className="App-header">
-                <Timbre />
+                <Timbre id="timbre1" />
+                <Timbre id="timbre2" />
             </header>
         </div>
     );

src/app/store.js

@@ -1,8 +1,10 @@
 import { configureStore } from '@reduxjs/toolkit';
+import timbreReducer from '../features/timbre/timbreSlice';
 import parameterReducer from '../features/timbre/parameters/parameterSlice';
 
 export default configureStore({
     reducer: {
+        timbres: timbreReducer,
         parameters: parameterReducer,
     },
 });

src/features/helpers/Helpers.js

@@ -1,15 +1,17 @@
 import React from 'react';
-import styles from './Helpers.module.css';
+import RCSlider, { createSliderWithTooltip } from 'rc-slider';
+import './index.css';
+
+const SliderWithToolTip = createSliderWithTooltip(RCSlider);
 
 const Slider = (props) => {
     return (
-        <input
+        <SliderWithToolTip
-            className={styles.slider}
+            tipFormatter={(v) => `${v}`}
-            type="range"
             min={props.min}
             max={props.max}
             value={props.parameter}
-            onChange={(e) => props.onChange(e.target.value)}
+            onChange={(v) => props.onChange(v)}
         />
     );
 };
@@ -22,7 +24,6 @@ const SelectList = (props) => {
     ));
     return (
         <select
-            className={styles.dropdown}
             value={props.value}
             onChange={(e) => props.onChange(e.target.value)}>
             {options}

src/features/helpers/Helpers.module.css

@@ -1,21 +1,254 @@
-.slider {
+.rc-slider {
-    -webkit-appearance: none;
-    appearance: none;
-    outline: none;
-    height: 5px;
-    background-color: lightgray;
-    border-radius: 10px;
     position: relative;
+    height: 14px;
+    padding: 5px 0;
+    width: 100%;
+    border-radius: 6px;
+    touch-action: none;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
-.slider::-webkit-slider-thumb {
+.rc-slider * {
-    -webkit-appearance: none;
+    box-sizing: border-box;
-    appearance: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    background: slategray;
+}
-    height: 15px;
+.rc-slider-rail {
-    width: 15px;
+    position: absolute;
+    width: 100%;
+    background-color: #e9e9e9;
+    height: 4px;
+    border-radius: 6px;
+}
+.rc-slider-track {
+    position: absolute;
+    left: 0;
+    height: 4px;
+    border-radius: 6px;
+    background-color: #abe2fb;
+}
+.rc-slider-handle {
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    cursor: -webkit-grab;
+    margin-top: -5px;
+    cursor: grab;
     border-radius: 50%;
-    transition: background 0.15s ease-in-out;
+    border: solid 2px #96dbfa;
+    background-color: #fff;
+    touch-action: pan-x;
 }
-.slider::-webkit-slider-thumb:hover {
+.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
-    background: slateblue;
+    border-color: #57c5f7;
+    box-shadow: 0 0 0 5px #96dbfa;
+}
+.rc-slider-handle:focus {
+    outline: none;
+}
+.rc-slider-handle-click-focused:focus {
+    border-color: #96dbfa;
+    box-shadow: unset;
+}
+.rc-slider-handle:hover {
+    border-color: #57c5f7;
+}
+.rc-slider-handle:active {
+    border-color: #57c5f7;
+    box-shadow: 0 0 5px #57c5f7;
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+}
+.rc-slider-mark {
+    position: absolute;
+    top: 18px;
+    left: 0;
+    width: 100%;
+    font-size: 12px;
+}
+.rc-slider-mark-text {
+    position: absolute;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    cursor: pointer;
+    color: #999;
+}
+.rc-slider-mark-text-active {
+    color: #666;
+}
+.rc-slider-step {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: transparent;
+}
+.rc-slider-dot {
+    position: absolute;
+    bottom: -2px;
+    margin-left: -4px;
+    width: 8px;
+    height: 8px;
+    border: 2px solid #e9e9e9;
+    background-color: #fff;
+    cursor: pointer;
+    border-radius: 50%;
+    vertical-align: middle;
+}
+.rc-slider-dot-active {
+    border-color: #96dbfa;
+}
+.rc-slider-dot-reverse {
+    margin-right: -4px;
+}
+.rc-slider-disabled {
+    background-color: #e9e9e9;
+}
+.rc-slider-disabled .rc-slider-track {
+    background-color: #ccc;
+}
+.rc-slider-disabled .rc-slider-handle,
+.rc-slider-disabled .rc-slider-dot {
+    border-color: #ccc;
+    box-shadow: none;
+    background-color: #fff;
+    cursor: not-allowed;
+}
+.rc-slider-disabled .rc-slider-mark-text,
+.rc-slider-disabled .rc-slider-dot {
+    cursor: not-allowed !important;
+}
+.rc-slider-vertical {
+    width: 14px;
+    height: 100%;
+    padding: 0 5px;
+}
+.rc-slider-vertical .rc-slider-rail {
+    height: 100%;
+    width: 4px;
+}
+.rc-slider-vertical .rc-slider-track {
+    left: 5px;
+    bottom: 0;
+    width: 4px;
+}
+.rc-slider-vertical .rc-slider-handle {
+    margin-left: -5px;
+    touch-action: pan-y;
+}
+.rc-slider-vertical .rc-slider-mark {
+    top: 0;
+    left: 18px;
+    height: 100%;
+}
+.rc-slider-vertical .rc-slider-step {
+    height: 100%;
+    width: 4px;
+}
+.rc-slider-vertical .rc-slider-dot {
+    left: 2px;
+    margin-bottom: -4px;
+}
+.rc-slider-vertical .rc-slider-dot:first-child {
+    margin-bottom: -4px;
+}
+.rc-slider-vertical .rc-slider-dot:last-child {
+    margin-bottom: -4px;
+}
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    display: block !important;
+    animation-play-state: paused;
+}
+.rc-slider-tooltip-zoom-down-leave {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    display: block !important;
+    animation-play-state: paused;
+}
+.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
+.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
+    animation-name: rcSliderTooltipZoomDownIn;
+    animation-play-state: running;
+}
+.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
+    animation-name: rcSliderTooltipZoomDownOut;
+    animation-play-state: running;
+}
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+    transform: scale(0, 0);
+    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.rc-slider-tooltip-zoom-down-leave {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+@keyframes rcSliderTooltipZoomDownIn {
+    0% {
+        opacity: 0;
+        transform-origin: 50% 100%;
+        transform: scale(0, 0);
+    }
+    100% {
+        transform-origin: 50% 100%;
+        transform: scale(1, 1);
+    }
+}
+@keyframes rcSliderTooltipZoomDownOut {
+    0% {
+        transform-origin: 50% 100%;
+        transform: scale(1, 1);
+    }
+    100% {
+        opacity: 0;
+        transform-origin: 50% 100%;
+        transform: scale(0, 0);
+    }
+}
+.rc-slider-tooltip {
+    position: absolute;
+    left: -9999px;
+    top: -9999px;
+    visibility: visible;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-tooltip * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-tooltip-hidden {
+    display: none;
+}
+.rc-slider-tooltip-placement-top {
+    padding: 4px 0 8px 0;
+}
+.rc-slider-tooltip-inner {
+    padding: 6px 2px;
+    min-width: 24px;
+    height: 24px;
+    font-size: 12px;
+    line-height: 1;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    background-color: #6c6c6c;
+    border-radius: 6px;
+    box-shadow: 0 0 4px #d9d9d9;
+}
+.rc-slider-tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+}
+.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
+    bottom: 4px;
+    left: 50%;
+    margin-left: -4px;
+    border-width: 4px 4px 0;
+    border-top-color: #6c6c6c;
 }

src/features/helpers/index.css

@@ -0,0 +1,251 @@
+.rc-slider {
+    position: relative;
+    height: 14px;
+    padding: 5px 0;
+    width: 100%;
+    border-radius: 6px;
+    touch-action: none;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    margin: 5px 0;
+}
+.rc-slider * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-rail {
+    position: absolute;
+    width: 100%;
+    background-color: lightgray;
+    height: 4px;
+    border-radius: 6px;
+}
+.rc-slider-track {
+    position: absolute;
+    left: 0;
+    height: 4px;
+    border-radius: 6px;
+    background-color: lightgrey;
+}
+.rc-slider-handle {
+    position: absolute;
+    width: 14px;
+    height: 14px;
+    cursor: pointer;
+    cursor: -webkit-grab;
+    margin-top: -5px;
+    cursor: grab;
+    border-radius: 50%;
+    background-color: slategrey;
+    touch-action: pan-x;
+}
+.rc-slider-handle-dragging.rc-slider-handle-dragging.rc-slider-handle-dragging {
+    background-color: slateblue;
+}
+.rc-slider-handle:focus {
+    outline: none;
+}
+.rc-slider-handle-click-focused:focus {
+    background-color: slateblue;
+}
+.rc-slider-handle:hover {
+    background-color: slateblue;
+}
+.rc-slider-handle:active {
+    background-color: slateblue;
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+}
+.rc-slider-mark {
+    position: absolute;
+    top: 18px;
+    left: 0;
+    width: 100%;
+    font-size: 12px;
+}
+.rc-slider-mark-text {
+    position: absolute;
+    display: inline-block;
+    vertical-align: middle;
+    text-align: center;
+    cursor: pointer;
+    color: #999;
+}
+.rc-slider-mark-text-active {
+    color: #666;
+}
+.rc-slider-step {
+    position: absolute;
+    width: 100%;
+    height: 4px;
+    background: transparent;
+}
+.rc-slider-dot {
+    position: absolute;
+    bottom: -2px;
+    margin-left: -4px;
+    width: 8px;
+    height: 8px;
+    border: 2px solid #e9e9e9;
+    background-color: #fff;
+    cursor: pointer;
+    border-radius: 50%;
+    vertical-align: middle;
+}
+.rc-slider-dot-active {
+    border-color: #96dbfa;
+}
+.rc-slider-dot-reverse {
+    margin-right: -4px;
+}
+.rc-slider-disabled {
+    background-color: #e9e9e9;
+}
+.rc-slider-disabled .rc-slider-track {
+    background-color: #ccc;
+}
+.rc-slider-disabled .rc-slider-handle,
+.rc-slider-disabled .rc-slider-dot {
+    border-color: #ccc;
+    box-shadow: none;
+    background-color: #fff;
+    cursor: not-allowed;
+}
+.rc-slider-disabled .rc-slider-mark-text,
+.rc-slider-disabled .rc-slider-dot {
+    cursor: not-allowed !important;
+}
+.rc-slider-vertical {
+    width: 14px;
+    height: 100%;
+    padding: 0 5px;
+}
+.rc-slider-vertical .rc-slider-rail {
+    height: 100%;
+    width: 4px;
+}
+.rc-slider-vertical .rc-slider-track {
+    left: 5px;
+    bottom: 0;
+    width: 4px;
+}
+.rc-slider-vertical .rc-slider-handle {
+    margin-left: -5px;
+    touch-action: pan-y;
+}
+.rc-slider-vertical .rc-slider-mark {
+    top: 0;
+    left: 18px;
+    height: 100%;
+}
+.rc-slider-vertical .rc-slider-step {
+    height: 100%;
+    width: 4px;
+}
+.rc-slider-vertical .rc-slider-dot {
+    left: 2px;
+    margin-bottom: -4px;
+}
+.rc-slider-vertical .rc-slider-dot:first-child {
+    margin-bottom: -4px;
+}
+.rc-slider-vertical .rc-slider-dot:last-child {
+    margin-bottom: -4px;
+}
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    display: block !important;
+    animation-play-state: paused;
+}
+.rc-slider-tooltip-zoom-down-leave {
+    animation-duration: 0.3s;
+    animation-fill-mode: both;
+    display: block !important;
+    animation-play-state: paused;
+}
+.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
+.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
+    animation-name: rcSliderTooltipZoomDownIn;
+    animation-play-state: running;
+}
+.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
+    animation-name: rcSliderTooltipZoomDownOut;
+    animation-play-state: running;
+}
+.rc-slider-tooltip-zoom-down-enter,
+.rc-slider-tooltip-zoom-down-appear {
+    transform: scale(0, 0);
+    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
+}
+.rc-slider-tooltip-zoom-down-leave {
+    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+}
+@keyframes rcSliderTooltipZoomDownIn {
+    0% {
+        opacity: 0;
+        transform-origin: 50% 100%;
+        transform: scale(0, 0);
+    }
+    100% {
+        transform-origin: 50% 100%;
+        transform: scale(1, 1);
+    }
+}
+@keyframes rcSliderTooltipZoomDownOut {
+    0% {
+        transform-origin: 50% 100%;
+        transform: scale(1, 1);
+    }
+    100% {
+        opacity: 0;
+        transform-origin: 50% 100%;
+        transform: scale(0, 0);
+    }
+}
+.rc-slider-tooltip {
+    position: absolute;
+    left: -9999px;
+    top: -9999px;
+    visibility: visible;
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-tooltip * {
+    box-sizing: border-box;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+.rc-slider-tooltip-hidden {
+    display: none;
+}
+.rc-slider-tooltip-placement-top {
+    padding: 4px 0 8px 0;
+}
+.rc-slider-tooltip-inner {
+    padding: 6px 2px;
+    min-width: 24px;
+    height: 24px;
+    font-size: 12px;
+    line-height: 1;
+    color: #fff;
+    text-align: center;
+    text-decoration: none;
+    background-color: #6c6c6c;
+    border-radius: 6px;
+    box-shadow: 0 0 4px #d9d9d9;
+}
+.rc-slider-tooltip-arrow {
+    position: absolute;
+    width: 0;
+    height: 0;
+    border-color: transparent;
+    border-style: solid;
+}
+.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
+    bottom: 4px;
+    left: 50%;
+    margin-left: -4px;
+    border-width: 4px 4px 0;
+    border-top-color: #6c6c6c;
+}

src/features/timbre/Timbre.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import VCO from './parameters/VCO';
 import Mixer from './parameters/Mixer';
 import Pitch from './parameters/Pitch';
@@ -6,6 +7,7 @@ import Filter from './parameters/Filter';
 import EG from './parameters/EG';
 import Amp from './parameters/Amp';
 import LFO from './parameters/LFO';
+import { selectById } from './timbreSlice.js';
 
 const style = {
     display: 'flex',
@@ -13,10 +15,11 @@ const style = {
 };
 
 export function Timbre(props) {
+    const ids = useSelector((state) => selectById(state, props.id));
     return (
         <div style={style}>
             <VCO
-                id="vco1"
+                id={ids.vco1}
                 waveforms={[
                     'Saw',
                     'Square',
@@ -96,23 +99,23 @@ export function Timbre(props) {
                 ]}
             />
             <VCO
-                id="vco2"
+                id={ids.vco2}
                 waveforms={['Saw', 'Square', 'Triangle']}
                 dwgsOrModTypeName="Mod Type"
                 dwgsOrModType={['Off', 'Ring', 'Sync', 'RingSync']}
             />
-            <Mixer id="mixer1" />
+            <Mixer id={ids.mixer} />
-            <Pitch id="pitch1" />
+            <Pitch id={ids.pitch} />
-            <Filter id="filter1" />
+            <Filter id={ids.filter} />
-            <EG id="eg1" />
+            <EG id={ids.eg1} />
-            <Amp id="amp1" />
+            <Amp id={ids.amp} />
-            <EG id="eg2" />
+            <EG id={ids.eg2} />
             <LFO
-                id="lfo1"
+                id={ids.lfo1}
                 waveforms={['Saw', 'Square 1', 'Triangle', 'Sample & Hold']}
             />
             <LFO
-                id="lfo2"
+                id={ids.lfo2}
                 waveforms={['Saw', 'Square 2', 'Sine', 'Sample & Hold']}
             />
         </div>

src/features/timbre/parameters/Amp.js

@@ -12,8 +12,8 @@ export default function Amp(props) {
         <div className={styles.container}>
             <Slider
                 parameter={parameters.ampLevel}
-                min="0"
+                min={0}
-                max="127"
+                max={127}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({
@@ -25,8 +25,8 @@ export default function Amp(props) {
             />
             <Slider
                 parameter={parameters.panpot}
-                min="-63"
+                min={-63}
-                max="63"
+                max={63}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({
@@ -38,8 +38,8 @@ export default function Amp(props) {
             />
             <Slider
                 parameter={parameters.ampTrack}
-                min="-63"
+                min={-63}
-                max="63"
+                max={63}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({

src/features/timbre/parameters/EG.js

@@ -12,8 +12,8 @@ export default function EG(props) {
         <div className={styles.container}>
             <Slider
                 parameter={parameters.attack}
-                min="0"
+                min={0}
-                max="127"
+                max={127}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({
@@ -25,8 +25,8 @@ export default function EG(props) {
             />
             <Slider
                 parameter={parameters.decay}
-                min="0"
+                min={0}
-                max="127"
+                max={127}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({
@@ -38,8 +38,8 @@ export default function EG(props) {
             />
             <Slider
                 parameter={parameters.sustain}
-                min="0"
+                min={0}
-                max="127"
+                max={127}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({
@@ -51,8 +51,8 @@ export default function EG(props) {
             />
             <Slider
                 parameter={parameters.release}
-                min="0"
+                min={0}
-                max="127"
+                max={127}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({

src/features/timbre/parameters/Filter.js

@@ -29,8 +29,8 @@ export default function Filter(props) {
             />
             <Slider
                 parameter={parameters.cutoff}
-                min="0"
+                min={0}
-                max="127"
+                max={127}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({
@@ -42,8 +42,8 @@ export default function Filter(props) {
             />
             <Slider
                 parameter={parameters.resonance}
-                min="0"
+                min={0}
-                max="127"
+                max={127}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({
@@ -55,8 +55,8 @@ export default function Filter(props) {
             />
             <Slider
                 parameter={parameters.egIntensity}
-                min="-63"
+                min={-63}
-                max="63"
+                max={63}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({
@@ -68,8 +68,8 @@ export default function Filter(props) {
             />
             <Slider
                 parameter={parameters.keyboardTrack}
-                min="-63"
+                min={-63}
-                max="63"
+                max={63}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({

src/features/timbre/parameters/Mixer.js

@@ -11,6 +11,8 @@ export default function Mixer(props) {
     return (
         <div className={styles.container}>
             <Slider
+                min={0}
+                max={127}
                 parameter={parameters.vol1}
                 onChange={(value) =>
                     dispatch(
@@ -22,6 +24,8 @@ export default function Mixer(props) {
                 }
             />
             <Slider
+                min={0}
+                max={127}
                 parameter={parameters.vol2}
                 onChange={(value) =>
                     dispatch(
@@ -33,6 +37,9 @@ export default function Mixer(props) {
                 }
             />
             <Slider
+                className={styles.slider}
+                min={0}
+                max={127}
                 parameter={parameters.vol3}
                 onChange={(value) =>
                     dispatch(

src/features/timbre/parameters/Parameters.module.css

@@ -6,10 +6,9 @@
     padding: 10pt;
     margin: 2pt;
     border: solid 1pt black;
+    width: 120px;
+    flex-basis: 100%;
 }
-.container > input {
+.container > * {
-    margin: 7pt 0;
-}
-.container > select {
     margin: 2.5pt 0;
 }

src/features/timbre/parameters/Pitch.js

@@ -36,8 +36,8 @@ export default function Pitch(props) {
             />
             <Slider
                 parameter={parameters.transpose}
-                min="-24"
+                min={-24}
-                max="24"
+                max={24}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({
@@ -49,8 +49,8 @@ export default function Pitch(props) {
             />
             <Slider
                 parameter={parameters.tune}
-                min="-50"
+                min={-50}
-                max="50"
+                max={50}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({
@@ -62,8 +62,8 @@ export default function Pitch(props) {
             />
             <Slider
                 parameter={parameters.unisonDetune}
-                min="0"
+                min={0}
-                max="99"
+                max={99}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({
@@ -75,8 +75,8 @@ export default function Pitch(props) {
             />
             <Slider
                 parameter={parameters.portamento}
-                min="0"
+                min={0}
-                max="127"
+                max={127}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({
@@ -88,8 +88,8 @@ export default function Pitch(props) {
             />
             <Slider
                 parameter={parameters.bendRange}
-                min="-12"
+                min={-12}
-                max="12"
+                max={12}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({
@@ -101,8 +101,8 @@ export default function Pitch(props) {
             />
             <Slider
                 parameter={parameters.vibratoIntensity}
-                min="-63"
+                min={-63}
-                max="63"
+                max={63}
                 onChange={(value) =>
                     dispatch(
                         parameterUpdated({

src/features/timbre/parameters/VCO.js

@@ -38,8 +38,8 @@ export default function VCO(props) {
             />
             Waveform Mod
             <Slider
-                min="0"
+                min={0}
-                max="100"
+                max={100}
                 parameter={parameters.waveMod}
                 onChange={(value) =>
                     dispatch(
@@ -52,8 +52,8 @@ export default function VCO(props) {
             />
             LFO Mod
             <Slider
-                min="0"
+                min={0}
-                max="100"
+                max={100}
                 parameter={parameters.lfoMod}
                 onChange={(value) =>
                     dispatch(

src/features/timbre/parameters/parameterSlice.js

@@ -9,7 +9,7 @@ const parametersSlice = createSlice({
             'vco1',
             'vco2',
             'mixer1',
-            'timbre1',
+            'pitch1',
             'filter1',
             'eg1',
             'amp1',
@@ -17,6 +17,17 @@ const parametersSlice = createSlice({
             'lfo1',
             'lfo2',
             'patches1',
+            'vco3',
+            'vco4',
+            'mixer2',
+            'pitch2',
+            'filter2',
+            'eg3',
+            'amp2',
+            'eg4',
+            'lfo3',
+            'lfo4',
+            'patches2',
         ],
         entities: {
             'vco1': {
@@ -33,12 +44,32 @@ const parametersSlice = createSlice({
                 waveMod: 0,
                 lfoMod: 0,
             },
+            'vco3': {
+                id: 'vco3',
+                waveform: 'Sine',
+                dwgsOrModType: 0,
+                waveMod: 100,
+                lfoMod: 0,
+            },
+            'vco4': {
+                id: 'vco4',
+                waveform: 'Triangle',
+                dwgsOrModType: 0,
+                waveMod: 0,
+                lfoMod: 100,
+            },
             'mixer1': {
                 id: 'mixer1',
                 vol1: 127,
                 vol2: 0,
                 vol3: 0,
             },
+            'mixer2': {
+                id: 'mixer2',
+                vol1: 127,
+                vol2: 0,
+                vol3: 0,
+            },
             'pitch1': {
                 id: 'pitch1',
                 voiceAssign: 'Mono',
@@ -50,6 +81,17 @@ const parametersSlice = createSlice({
                 bendRange: 0,
                 vibratoIntensity: 0,
             },
+            'pitch2': {
+                id: 'pitch2',
+                voiceAssign: 'Mono',
+                triggerMode: 'Single',
+                transpose: 0,
+                tune: 0,
+                unisonDetune: 0,
+                portamento: 0,
+                bendRange: 0,
+                vibratoIntensity: 0,
+            },
             'filter1': {
                 id: 'filter1',
                 filterType: '-24db Low Pass',
@@ -58,6 +100,14 @@ const parametersSlice = createSlice({
                 egIntensity: 0,
                 keyboardTrack: 0,
             },
+            'filter2': {
+                id: 'filter2',
+                filterType: '-24db Low Pass',
+                cutoff: 0,
+                resonance: 0,
+                egIntensity: 0,
+                keyboardTrack: 0,
+            },
             'eg1': {
                 id: 'eg1',
                 attack: 0,
@@ -81,6 +131,29 @@ const parametersSlice = createSlice({
                 release: 0,
                 egReset: true,
             },
+            'eg3': {
+                id: 'eg3',
+                attack: 0,
+                decay: 0,
+                sustain: 127,
+                release: 0,
+                egReset: false,
+            },
+            'amp2': {
+                id: 'amp2',
+                ampLevel: 127,
+                panpot: 0,
+                ampTrack: 0,
+                distortion: false,
+            },
+            'eg4': {
+                id: 'eg4',
+                attack: 0,
+                decay: 0,
+                sustain: 127,
+                release: 0,
+                egReset: true,
+            },
             'lfo1': {
                 id: 'lfo1',
                 waveform: 'Saw',
@@ -95,6 +168,20 @@ const parametersSlice = createSlice({
                 tempoSync: false,
                 frequency: 0,
             },
+            'lfo3': {
+                id: 'lfo3',
+                waveform: 'Saw',
+                keySync: 'Off',
+                tempoSync: false,
+                frequency: 0,
+            },
+            'lfo4': {
+                id: 'lfo4',
+                waveform: 'Saw',
+                keySync: 'Off',
+                tempoSync: false,
+                frequency: 0,
+            },
         },
     }),
     reducers: {

src/features/timbre/timbreSlice.js

@@ -0,0 +1,55 @@
+import { createSlice, createEntityAdapter } from '@reduxjs/toolkit';
+
+const timbreAdapter = createEntityAdapter({});
+
+const timbreSlice = createSlice({
+    name: 'timbre',
+    initialState: timbreAdapter.getInitialState({
+        ids: ['timbre1', 'timbre2', 'vocoder', 'effects', 'arpeggiator'],
+        entities: {
+            'timbre1': {
+                id: 'timbre1',
+                vco1: 'vco1',
+                vco2: 'vco2',
+                mixer: 'mixer1',
+                pitch: 'pitch1',
+                filter: 'filter1',
+                eg1: 'eg1',
+                amp: 'amp1',
+                eg2: 'eg2',
+                lfo1: 'lfo1',
+                lfo2: 'lfo2',
+                patches: 'patches1',
+            },
+            'timbre2': {
+                id: 'timbre2',
+                vco1: 'vco3',
+                vco2: 'vco4',
+                mixer: 'mixer2',
+                pitch: 'pitch2',
+                filter: 'filter2',
+                eg1: 'eg3',
+                amp: 'amp2',
+                eg2: 'eg4',
+                lfo1: 'lfo3',
+                lfo2: 'lfo4',
+                patches: 'patches2',
+            },
+        },
+    }),
+    reducers: {
+        timbreAdded: timbreAdapter.addOne,
+        timbreUpdated: timbreAdapter.updateOne,
+    },
+});
+
+export const {
+    selectById,
+    selectAll,
+    selectEntities,
+    selectIds,
+} = timbreAdapter.getSelectors((state) => state.timbres);
+
+export const { timbreAdded, timbreUpdated } = timbreSlice.actions;
+
+export default timbreSlice.reducer;