2022-04-04 16:31:28 +00:00
|
|
|
import React, { useState, useEffect } from "react";
|
2022-03-04 13:54:57 +00:00
|
|
|
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%");
|
|
|
|
|
2022-04-04 16:31:28 +00:00
|
|
|
useEffect(() => {
|
|
|
|
setSize(((value - min) * 100) / (max - min) + "%");
|
|
|
|
}, [value]);
|
2022-03-04 13:54:57 +00:00
|
|
|
|
|
|
|
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}
|
2022-04-04 16:31:28 +00:00
|
|
|
onChange={onChange}
|
2022-03-04 13:54:57 +00:00
|
|
|
/>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
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;
|