React realizes cross-sliding of double sliders

This example shares the specific code for React to implement cross-sliding of double sliders for your reference. The specific content is as follows

html code:

<body>
    <div ></div>
</body>

script code:

&lt;script type="text/babel"&gt;
    const root = ('#root')
    class Comp extends  {
        constructor(...args) {
            super(...args)
        }
        fn(ev) {
            // Get the distance of the mouse click             = [0].pageX - 
            // Get the parent             =  - 
            // Get the parent             = 
            // Get lines             = [2]
 
 
            // Get the ball on the left             = [0]
            // The ball on the right             = [1]
 
             = (this)
             = 
        }
        fnMove(ev) {
            // Box offset             = [0].pageX - 
            //Judge the offset cannot be greater than the width of the parent box            if ( &gt;= ) {
                 = 
            }
            // The judgment cannot be less than 0            if ( &lt;= 0) {
                 = 0
            }
            // Calculate the width of the line. Small ball interaction. Calculate the absolute value of the line.             = ( - )
            // Width of the line             =  + 'px'
            // The distance from the left of the ball             =  + 'px'
            //Judge the offsetLeft of the ball on the right to reduce the offsetLeft value of the ball on the left. If it is less than 0, it is the closest to the left. Take out its offsetLeft value. The line distance is the value of the left.            if(&lt;0){
                =+'px'
            }else{
                =+'px'
            }
        }
        fnEnd() {
             = null
             = null
        }
        render() {
            return (&lt;div className='box'&gt;
                &lt;div className='ball' onTouchStart={(this)}&gt;&lt;/div&gt;
                &lt;div className='ball ac' onTouchStart={(this)}&gt;&lt;/div&gt;
                &lt;div className='line'&gt;&lt;/div&gt;
                &lt;div className='lineT'&gt;&lt;/div&gt;
            &lt;/div&gt;)
        }
    }
    (&lt;Comp /&gt;, root)
 
&lt;/script&gt;

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;
        }
 
        . {
            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>

The second way: click on the link to view the second way

vue achieves the sliding cross effect of ball

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.