2022-03-04 13:54:57 +00:00
|
|
|
import React, { useState } from "react";
|
|
|
|
import PropTypes from "prop-types";
|
|
|
|
import { StyledSlider } from "./styled-slider";
|
|
|
|
|
|
|
|
const Slider = ({
|
|
|
|
id,
|
|
|
|
type,
|
|
|
|
className,
|
|
|
|
onChange,
|
|
|
|
min,
|
|
|
|
max,
|
|
|
|
step,
|
|
|
|
value,
|
|
|
|
withPouring,
|
2022-03-04 13:56:57 +00:00
|
|
|
style,
|
2022-03-04 13:54:57 +00:00
|
|
|
}) => {
|
|
|
|
const [size, setSize] = useState("0%");
|
|
|
|
|
|
|
|
const handleChange = (e) => {
|
|
|
|
let target = e.target;
|
|
|
|
|
|
|
|
const max = target.max;
|
|
|
|
const min = target.min;
|
|
|
|
const val = target.value;
|
|
|
|
|
|
|
|
setSize(((val - min) * 100) / (max - min) + "%");
|
|
|
|
onChange && onChange(e);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
|
|
|
<StyledSlider
|
2022-03-04 13:56:57 +00:00
|
|
|
style={style}
|
2022-03-04 13:54:57 +00:00
|
|
|
id={id}
|
|
|
|
type={type}
|
|
|
|
className={className}
|
|
|
|
min={min}
|
|
|
|
max={max}
|
|
|
|
step={step}
|
|
|
|
value={value}
|
|
|
|
size={value && withPouring ? size : "0%"}
|
|
|
|
withPouring={withPouring}
|
|
|
|
onChange={handleChange}
|
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
Slider.propTypes = {
|
|
|
|
id: PropTypes.string,
|
|
|
|
type: PropTypes.string,
|
|
|
|
className: PropTypes.string,
|
|
|
|
onChange: PropTypes.func,
|
|
|
|
min: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
|
|
max: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
|
|
step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
|
|
|
|
value: PropTypes.number,
|
|
|
|
withPouring: PropTypes.bool,
|
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
|
|
};
|
|
|
|
|
|
|
|
export default Slider;
|