import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Slider from '@material-ui/core/Slider';
import Input from '@material-ui/core/Input';
import { ZoomIcon } from '@fluentui/react-icons';
const useStyles = makeStyles({
    root: {
        width: 250
    },
    input: {
        width: 42
    }
});
// @todo: make icon a props, updated to fluent design specs
const FluentInputSlider = (props) => {
    const { value, handleSliderChange, handleInputChange, handleBlur } = props;
    const classes = useStyles();
    return (React.createElement("div", { className: classes.root }, React.createElement(Grid, { container: true, spacing: 2, alignItems: "center" }, React.createElement(Grid, { item: true }, React.createElement(ZoomIcon, null)), React.createElement(Grid, { item: true, xs: true }, React.createElement(Slider, { value: typeof value === 'number' ? value : 0, onChange: handleSliderChange, "aria-labelledby": "input-slider", step: 1, marks: true, min: 0, max: 20 })), React.createElement(Grid, { item: true }, React.createElement(Input, { className: classes.input, value: value, margin: "dense", onChange: handleInputChange, onBlur: handleBlur, inputProps: {
            step: 1,
            min: 0,
            max: 20,
            type: 'number',
            'aria-labelledby': 'input-slider'
        } })))));
};
export default FluentInputSlider;
//# sourceMappingURL=FluentInputSlider.js.map