我被这个代码做成了代码和滑块

import { mainModule } from 'process';
import React, { useState } from 'react';
import styled from 'styled-components';

const DragScaleBar = () => {
    const [value, setValue] = useState(0);

    const changeWidth = (event: React.ChangeEvent<HTMLInputElement>) => {
        event.preventDefault();

        setValue(parseInt(event.target.value));
    };
    const MIN = 0;
    const MAX = 10;

    const DeadlineStyle = styled.h1`
        position: absolute;
        margin-left: 25em;
        font-weight: bold;
        font-size: 1em;
        font-family: 'Poppins', sans-serif;
    `;
    const DragStyle = styled.input`
        -webkit-appearance: none;
        background: #f5f6fa;
        position: absolute;
        margin-top: 2em;
        margin-left: 18em;
        width: 20em;
        height: 1em;
        border-radius: 1em;
        cursor: pointer;
        box-shadow: 0px 0.5px 0.75px black;

        &::-webkit-slider-thumb {
            -webkit-appearance: none;
            border: 2px solid white;
            height: 25px;
            width: 25px;
            opacity: 0.8;
            border-radius: 50%;
            background: gray;
        }
    `;

    return (
        <>
            <DeadlineStyle>마감일 + {value} Day</DeadlineStyle>
            <div>
                <DragStyle
                    type="range"
                    min={MIN}
                    max={MAX}
                    value={value}
                    step="1"
                    onChange={changeWidth}
                />
            </div>
        </>
    );
};

export default DragScaleBar;

and here is picture

滑块可以更改滑块区域中单击值但当我使用onchange事件时，dragEvent不起作用
我试过用onMouseUp替换onChange，但我不知道如何将它与打字脚本一起使用。
以前有没有人解决过像我代码一样的问题？