46 lines
1.3 KiB
JavaScript
46 lines
1.3 KiB
JavaScript
import { Slider } from "@mui/material";
|
|
import { useState } from "react";
|
|
|
|
function ProgressChange({ data, changeData, parent }) {
|
|
const [value, setValue] = useState(70);
|
|
|
|
return (
|
|
<li className="flex items-center justify-start gap-3 w-full">
|
|
<p className="text-[#525252] text-[14px] font-normal w-[118px] min-w-[120px]">
|
|
{data.label}
|
|
</p>
|
|
<Slider
|
|
defaultValue={data.progress}
|
|
className="!w-full lg:!w-[265px] !rounded-[10px] !h-[11px]"
|
|
onChange={(e) => {
|
|
setValue(e.target.value);
|
|
changeData(parent, data.name, e.target.value);
|
|
}}
|
|
sx={{
|
|
"& .MuiSlider-rail": {
|
|
background: "#E8E8E8",
|
|
opacity: "100",
|
|
},
|
|
"& .MuiSlider-track": {
|
|
background: "#05BA58",
|
|
border: "none",
|
|
},
|
|
"& .MuiSlider-thumb": {
|
|
marginRight: "-21px",
|
|
background: "#EBEBEB",
|
|
border: "1px solid #05BA58 !important",
|
|
},
|
|
"& .MuiSlider-thumb.Mui-focusVisible, .MuiSlider-thumb:hover": {
|
|
boxShadow: "none",
|
|
},
|
|
}}
|
|
/>
|
|
<p className="text-[#525252] text-[20px] font-medium w-[30px] min-w-[32px] text-center">
|
|
{value}
|
|
</p>
|
|
</li>
|
|
);
|
|
}
|
|
|
|
export default ProgressChange;
|