creating slider and button as a reusable component in reactjs

wokring link=>https://stackblitz.com/edit/react-qjonsv?file=index.js

main class

import React, { Component } from 'react';

import { render } from 'react-dom';

import {Hello,RoundSlider} from './Hello';

import './style.css';

//a button class

class GTbutton extends Component

{

constructor(props)

{

super(props);

}

PointerDown()

{

this.props.buttonClick();

}

render()

{

return(

<div >

<button class="button" onClick={this.click=()=>

{

this.PointerDown();

}} style={{background:this.props.color}}>{this.props.label}</button>

</div>

);

}

}

class App extends Component {

constructor() {

super();

this.state = {

name: 'React'

};

}

handleClick()

{

console.log("ok i am clicked here")

}

render() {

return (

<div>

<GTbutton color="orange" label="This button is clicked" buttonClick={()=>{

this.handleClick();

}}></GTbutton>

<GTbutton color="green" label="This button is clicked" buttonClick={()=>{

this.handleClick();

}}></GTbutton>

<GTbutton color="pink" label="This button is clicked" buttonClick={()=>{

this.handleClick();

}}></GTbutton>

<GTbutton color="black" label="This button is clicked" buttonClick={()=>{

this.handleClick();

}}></GTbutton>

<RoundSlider min="1" max="100" onChange={(evt)=>{

console.log(evt.target.value);

}}></RoundSlider>

</div>

);

}

}

render(<App />, document.getElementById('root'));

//component class

import React, { Component } from 'react';

import { render } from 'react-dom';

export default ({ name }) => <h1>Hello {name}!</h1>;

export class RoundSlider extends Component

{

constructor(props)

{

super(props)

}

onUpdate(evt)

{

if(this.props.onChange)

{

this.props.onChange(evt);

}

}

render()

{

return(

<div>

<input type="range" min={this.props.min} max={this.props.max} value={this.props.value} class="slider" id="myRange" onChange={(evt)=>{

this.onUpdate(evt);

}}/>

</div>

);

}

}