React implementiert doppelten Schieberegler zum Querschieben

<Text>
    <div id="Wurzel"></div>
</body>

<Skripttyp="text/babel">
    const root = document.querySelector('#root')
    Klasse Comp erweitert React.Component {
        Konstruktor(...args) {
            super(...args)
        }
        fn(ev) {
            // Abstand des Mausklicks ermitteln this.pageX = ev.changedTouches[0].pageX - ev.target.offsetLeft
            // Das übergeordnete Element abrufen this.parentWidth = ev.target.parentNode.offsetWidth - ev.target.offsetWidth
            // Den übergeordneten Knoten abrufen this.parent = ev.target.parentNode
            // Holen Sie sich die Zeile this.line = this.parent.children[2]
 
 
            // Hol den Ball auf der linken Seite this.oBall = this.parent.children[0]
            // Der Ball rechts this.oBallTwo = this.parent.children[1]
 
            Dokument.ontouchmove = dies.fnMove.bind(dies)
            Dokument.ontouchend = this.fnEnd
        }
        fnBewegung(ev) {
            // Box-Offset this.X = ev.changedTouches[0].pageX - this.pageX
            // Überprüfen Sie, dass der Versatz nicht größer als die Breite des übergeordneten Felds sein kann, wenn (this.X >= this.parentWidth) {
                dies.X = diese.übergeordneteBreite
            }
            //Überprüfen Sie, ob der Wert nicht kleiner als 0 sein kann
            wenn (dies.X <= 0) {
                dies.X = 0
            }
            //Breite der Linie berechnen. Der Absolutwert der interaktiven Berechnung der kleinen Kugeln ist die Breite der Linie this.lineWidth = Math.abs(this.oBallTwo.offsetLeft - this.oBall.offsetLeft)
            // Linienbreite this.line.style.width = this.lineWidth + 'px'
            // Der Abstand vom Ball nach links ev.target.style.left = this.X + 'px'
            // Bestimme den OffsetLeft des rechten Balls minus dem OffsetLeft des linken Balls. Wenn dieser kleiner als 0 ist, ist der rechte Ball am nächsten links. Nimm seinen OffsetLeft-Wert heraus, der die Distanz der Linie nach links ist, wenn (this.oBallTwo.offsetLeft-this.oBall.offsetLeft<0) {
                diese.Linie.Stil.links=diese.oBallTwo.offsetLeft+'px'
            }anders{
                diese.Linie.Stil.links=diese.oBall.offsetLeft+'px'
            }
        }
        fnEnd() {
            document.ontouchmove = null
            document.ontouchend = null
        }
        rendern() {
            zurück (<div Klassenname='Box'>
                <div Klassenname = 'Ball' onTouchStart = {this.fn.bind(this)}></div>
                <div className='ball ac' onTouchStart={this.fn.bind(this)}></div>
                <div Klassenname = "Zeile"></div>
                <div Klassenname = 'lineT'></div>
            </div>)
        }
    }
    ReactDOM.render(<Comp />, Wurzel)
 
</Skript>

<Stil>
        Körper {
            Rand: 0;
            Polsterung: 0;
        }
 
        .Kasten {
            Breite: 500px;
            Höhe: 40px;
            Hintergrund: #999;
            Position: relativ;
            Rand: automatisch;
            Rand oben: 100px;
        }
 
        .ball {
            Breite: 40px;
            Höhe: 40px;
            Hintergrund: rot;
            Position: absolut;
            Randradius: 50 %;
            Z-Index: 10;
        }
 
        .ball.ac {
            Hintergrund: #0f0;
            rechts: 0;
        }
 
        .Linie {
            Höhe: 5px;
            Breite: 500px;
            Hintergrund: rgb(200, 110, 7);
            Position: absolut;
            oben: 50 %;
            links: 0;
            transformieren: übersetzen(0, -50%);
            Z-Index: 5;
        }
 
        .lineT {
            Höhe: 5px;
            Breite: 500px;
            Hintergrund: #fff;
            Position: absolut;
            oben: 50 %;
            links: 0;
            transformieren: übersetzen(0, -50%);
        }
</Stil>