How to realize react draggable progress bar
In this article, the editor introduces in detail "how to achieve react draggable progress bar". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to achieve react draggable progress bar" can help you solve your doubts.
Effect.
/ * * @ Author: hongbin * @ Date: 2022-04-16 13:26:39 * @ LastEditors: hongbin * @ LastEditTime: 2022-04-16 21:00:02 * @ Description: drag the progress bar component * / import {FC, ReactElement, useRef} from "react"; import styled from "styled-components"; import {flexCenter} from ".. / styled"; interface IProps {/ * * 0-1 * / value: number / * callback 0-1 * / onChange: (percent: number) = > void;} const ProgressBar: FC = ({value, onChange}): ReactElement = > {const totalRef = useRef (null); return ({const {offsetWidth} = totalRef.currenttrees; const stop = e.currentTarget; const {offsetLeft} = stop; stop.style ["left"] = offsetLeft + "px" Const {pageX: start} = e; const move = (e: MouseEvent) = > {let val = offsetLeft + e.pageX-start; if (val = offsetWidth) val = offsetWidth; / / stop.style ["left"] = val + "px"; onChange (val / offsetWidth);} Const clear = () = > {document.removeEventListener ("mousemove", move); document.removeEventListener ("mouseup", clear); document.removeEventListener ("mouseleave", clear);}; document.addEventListener ("mousemove", move); document.addEventListener ("mouseup", clear); document.addEventListener ("mouseleave", clear) }} style= {{left: value * 100 + "%}} >);}; export default ProgressBar;const Container = styled.div` position: relative; width: 10vW; height: 1vW; ${flexCenter}; & >: first-child {width: inherit; height: 0.5vW; background-color: var (--tint-color); border-radius: 10vW; overflow: hidden; display: flex; align-items: center Padding: 0.05vW; div {width: 5vW; height: 0.4vW; background-color: var (--deep-color); border-radius: 0.4vW; border-radius: 0.4vW; height: 1vW; background-color: var (--deep-color); border-radius: 1vW; position: absolute; cursor: pointer; transform: translateX (- 0.5vw) Svg {width: 0.9vw;}} `; export const flexCenter = CSss` display: flex; justify-content: center; align-items: center;`;: root {--deep-color: # 978961;-- tint-color: # efe5d4 } after reading this, the article "how to realize the draggable progress bar of react" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.
