41 lines
1.4 KiB
JavaScript
41 lines
1.4 KiB
JavaScript
import { Slider } from "@mui/material"
|
|
import { useState } from "react"
|
|
|
|
function ProgressChange({ data }) {
|
|
|
|
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]">{data.label}</p>
|
|
<Slider
|
|
defaultValue={value}
|
|
className="!w-full lg:!w-[265px] !rounded-[10px] !h-[11px]"
|
|
onChange={e => setValue(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]">
|
|
{value}
|
|
</p>
|
|
</li>
|
|
)
|
|
}
|
|
|
|
export default ProgressChange |