原生滑动进度条(react+ts)

// 拖拽进度条

import { ProgressModuleBox } from "./style"

import React, { useRef } from 'react';
import { useLayoutEffect } from 'react';
import { useHeightSize, useWidthSize } from "../../../../../resources/useFun/size";
import { useState } from 'react';


const ProgressModule = () => {

    const progressStyle = {
        width: useWidthSize(500),
        height: useHeightSize(60),
        borderRadius: useHeightSize(4),
        backgroundColor: '#E2E2E2',
    }

    const fontSize = {
        fontSize: useWidthSize(14)
    }

    const sliderRef = useRef<HTMLDivElement>(null);
    const [newProgress, setNewProgress] = useState<number>(0)

    useLayoutEffect(() => {
        const slider = sliderRef.current;
        let isDragging = false;

        const handleDragStart = () => {
            isDragging = true;
        };

        const handleDrag = (event: MouseEvent) => {
            if (!isDragging) return;

            const sliderWidth = slider!.offsetWidth;
            const offsetX = event.clientX - slider!.getBoundingClientRect().left;
            const newProgress = Math.round((offsetX / sliderWidth) * 100);
            slider!.style.backgroundSize = `${newProgress}% 100%`;
            slider!.style.background = `linear-gradient(to right, #3588FE, #7FB4FF ${newProgress}%, #eee ${newProgress}%, #eee 100%)`;
            console.log(newProgress);
            setNewProgress(newProgress)

        };

        const handleDragEnd = () => {
            isDragging = false;
        };

        slider!.addEventListener('mousedown', handleDragStart);
        slider!.addEventListener('mousemove', handleDrag);
        slider!.addEventListener('mouseup', handleDragEnd);

        return () => {
            slider!.removeEventListener('mousedown', handleDragStart);
            slider!.removeEventListener('mousemove', handleDrag);
            slider!.removeEventListener('mouseup', handleDragEnd);
        };
    }, []);


    return <ProgressModuleBox>
        <div
            className="native-slider"
            ref={sliderRef}
            style={progressStyle}
        ><span className="span_pict" style={{ lineHeight: useHeightSize(60), marginRight: useWidthSize(10) }}>{newProgress}%</span></div>
        <div style={fontSize} className="ke_du">
            <span>0</span>
            <span>20</span>
            <span>40</span>
            <span>60</span>
            <span>80</span>
            <span>100</span>
        </div>

    </ProgressModuleBox>
}

export default ProgressModule

// 样式

import styled from "styled-components";

export const ProgressModuleBox = styled.div`

.native-slider{
 
}

.span_pict{
    display: flex;
    justify-content: end;
    align-items: center;
}

.ke_du{
    display: flex;
    justify-content: space-between;
    span {
        margin-top: 6px;
        color: #CCCCCC;
    }
}

`