🚧 Progress on React components

packages/components/src/form/FormFieldSlider/index.js

@@ -0,0 +1,59 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import Slider from "@material-ui/lab/Slider";
+import { withStyles } from "@material-ui/core/styles";
+
+const PaddedSlider = withStyles({
+  container: {
+    padding: "25px 0",
+    //overflowX: "hidden" // See: https://github.com/mui-org/material-ui/issues/14234
+  },
+  track: { height: "4px" },
+  thumb: { width: "16px", height: "16px" }
+})(Slider);
+
+const FormFieldSlider = props => {
+  const [value, setValue] = useState(props.value);
+
+  const update = (evt, newValue) => {
+    props.updateValue(props.name, newValue, evt);
+    setValue(newValue);
+  };
+
+  // Force state update when rerendering due to props change
+  if (props.value !== value) setValue(props.value);
+
+  return (
+    <PaddedSlider
+      value={value}
+      min={props.min}
+      max={props.max}
+      step={props.step}
+      onChange={update}
+      onDragEnd={update}
+      classes={{
+        track: "slider-track",
+        thumb: "slider-thumb"
+      }}
+      aria-labelledby={props.label}
+    />
+  );
+};
+
+FormFieldSlider.propTypes = {
+  min: PropTypes.number,
+  max: PropTypes.number,
+  step: PropTypes.number,
+  updateValue: PropTypes.func.isRequired,
+  name: PropTypes.string.isRequired,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])])
+};
+
+FormFieldSlider.defaultProps = {
+  min: 0,
+  max: 100,
+  step: 0.1,
+  label: false
+};
+
+export default FormFieldSlider;