Completely rewrite the UI Components

to a new functional way of defining them with advantages towards generating docs and a potential editor functionality

src/components/UiItems/Slider.js

@@ -0,0 +1,40 @@
+// @flow
+import React from "react";
+import createComponent from "./base";
+import { isDisabled, getValue } from "./utils";
+
+import type { UISlider } from "config/flowtypes";
+
+import SliderComponent from "@material-ui/lab/Slider";
+
+const changeSliderValue = (item: UISlider, changeState) => (_e, v) =>
+  changeState(item, v.toString());
+
+const BaseComponent = ({Icon, Label}, item, state, changeState) => (
+  <React.Fragment>
+    <Icon item={item} state={state} />
+    <Label />
+    <SliderComponent
+      value={parseFloat(getValue(item, state))}
+      min={item.min || 0} max={item.max || 100}
+      step={item.step || 1}
+      onChange={changeSliderValue(item, changeState)}
+      disabled={isDisabled(item, state)}
+      style={{marginLeft: 40}} />
+  </React.Fragment>
+);
+
+export default createComponent({
+  id: "slider",
+  name: "Slider",
+  desc: `
+    The Slider can be used to choose a number between two a min and a max value.
+  `,
+  parameters: {
+    text: "A descriptive label for the slider",
+    topic: "The topic id"
+  },
+  baseComponent: BaseComponent
+});
+
+