React implements double slider cross sliding

This article shares the specific code for React to implement double slider cross sliding for your reference. The specific content is as follows

HTML code:

<body>
    <div id="root"></div>
</body>

Script code:

<script type="text/babel">
    const root = document.querySelector('#root')
    class Comp extends React.Component {
        constructor(...args) {
            super(...args)
        }
        fn(ev) {
            // Get the distance of the mouse click this.pageX = ev.changedTouches[0].pageX - ev.target.offsetLeft
            // Get the parent this.parentWidth = ev.target.parentNode.offsetWidth - ev.target.offsetWidth
            // Get the parent this.parent = ev.target.parentNode
            // Get the line this.line = this.parent.children[2]
 
 
            // Get the ball on the left this.oBall = this.parent.children[0]
            // The ball on the right this.oBallTwo = this.parent.children[1]
 
            document.ontouchmove = this.fnMove.bind(this)
            document.ontouchend = this.fnEnd
        }
        fnMove(ev) {
            // Box offset this.X = ev.changedTouches[0].pageX - this.pageX
            // Check that the offset cannot be greater than the width of the parent box if (this.X >= this.parentWidth) {
                this.X = this.parentWidth
            }
            // Check if the value cannot be less than 0
            if (this.X <= 0) {
                this.X = 0
            }
            // Calculate the width of the line. The absolute value of the interactive calculation of the small balls is the width of the line this.lineWidth = Math.abs(this.oBallTwo.offsetLeft - this.oBall.offsetLeft)
            // Line width this.line.style.width = this.lineWidth + 'px'
            // The distance from the ball to the left ev.target.style.left = this.X + 'px'
            // Determine the offsetLeft of the right ball minus the offsetLeft of the left ball. If it is less than 0, the right ball is closest to the left. Take out its offsetLeft value, which is the distance of the line to the left if (this.oBallTwo.offsetLeft-this.oBall.offsetLeft<0) {
                this.line.style.left=this.oBallTwo.offsetLeft+'px'
            }else{
                this.line.style.left=this.oBall.offsetLeft+'px'
            }
        }
        fnEnd() {
            document.ontouchmove = null
            document.ontouchend = null
        }
        render() {
            return (<div className='box'>
                <div className='ball' onTouchStart={this.fn.bind(this)}></div>
                <div className='ball ac' onTouchStart={this.fn.bind(this)}></div>
                <div className='line'></div>
                <div className='lineT'></div>
            </div>)
        }
    }
    ReactDOM.render(<Comp />, root)
 
</script>

CSS style:

<style>
        body {
            margin: 0;
            padding: 0;
        }
 
        .box {
            width: 500px;
            height: 40px;
            background: #999;
            position: relative;
            margin: auto;
            margin-top: 100px;
        }
 
        .ball {
            width: 40px;
            height: 40px;
            background: red;
            position: absolute;
            border-radius: 50%;
            z-index: 10;
        }
 
        .ball.ac {
            background: #0f0;
            right: 0;
        }
 
        .line {
            height: 5px;
            width: 500px;
            background: rgb(200, 110, 7);
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
            z-index: 5;
        }
 
        .lineT {
            height: 5px;
            width: 500px;
            background: #fff;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0, -50%);
        }
</style>

Second method: Click the link to view the second method

Vue realizes the sliding cross effect of the ball

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in: