59 lines
1.4 KiB
JavaScript
59 lines
1.4 KiB
JavaScript
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;
|