🐛 Change onDragEnd to onChangeCommitted due to API change in material-ui. Fixes #104

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

@@ -1,26 +1,26 @@
-import React, { useState } from "react";
-import PropTypes from "prop-types";
-import Slider from "@material-ui/core/Slider";
-import { withStyles } from "@material-ui/core/styles";
+import React, { useState } from 'react'
+import PropTypes from 'prop-types'
+import Slider from '@material-ui/core/Slider'
+import { withStyles } from '@material-ui/core/styles'
 
 const PaddedSlider = withStyles({
   container: {
-    padding: "25px 0"
+    padding: '25px 0'
   },
-  track: { height: "4px" },
-  thumb: { width: "16px", height: "16px" }
-})(Slider);
+  track: { height: '4px' },
+  thumb: { width: '16px', height: '16px' }
+})(Slider)
 
 const FormFieldSlider = props => {
-  const [value, setValue] = useState(props.value);
+  const [value, setValue] = useState(props.value)
 
   const update = (evt, newValue) => {
-    props.updateValue(props.name, newValue, evt);
-    setValue(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);
+  if (props.value !== value) setValue(props.value)
 
   return (
     <PaddedSlider
@@ -29,15 +29,15 @@ const FormFieldSlider = props => {
       max={props.max}
       step={props.step}
       onChange={update}
-      onDragEnd={update}
+      onChangeCommitted={update}
       classes={{
-        track: "slider-track",
-        thumb: "slider-thumb"
+        track: 'slider-track',
+        thumb: 'slider-thumb'
       }}
       aria-labelledby={props.label}
     />
-  );
-};
+  )
+}
 
 FormFieldSlider.propTypes = {
   min: PropTypes.number,
@@ -46,13 +46,13 @@ FormFieldSlider.propTypes = {
   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;
+export default FormFieldSlider