Pixi slider component for React

react-pixi-slider-index.js

import React, { Component } from 'react'
import { Container } from 'react-pixi-fiber'

import Background from './Background'
import Button from './Button'

class Slider extends Component {
  constructor(props) {
    super(props)
    this.state = {
      btnX: 0,
    }
  }

  onBtnChange = data => {
    const { steps, width, onChange, prop } = this.props
    const step = data.x / (width - btnWidth) / steps)
    onChange({
      value: step.toFixed(1),
    })
  }

  handleBgClick = data => {
    this.setState({
      btnX: data.x,
    })
  }

  render() {
    const {
      width,
      height,
      x,
      y,
      bgColor,
      btnColor,
      btnWidth,
      currentPosition,
      steps,
    } = this.props
    const { btnX } = this.state
    return (
      <Container
        x={x}
        y={y}
        width={width}
        height={height}
      >
        <Background
          x={0}
          y={0}
          width={width}
          height={height}
          fill={bgColor}
          onClick={this.handleBgClick}
        />
        <Button
          width={btnWidth}
          height={height}
          fill={btnColor}
          onChange={this.onBtnChange}
          steps={steps}
          stepWidth={(width - btnWidth) / steps}
          moveToX={btnX}
          currentPosition={currentPosition}
        />
      </Container>
    )
  }
}

Slider.defaultProps = {
  width: 325,
  height: 25,
  x: 0,
  y: 0,
  bgColor: 0x003d51,
  btnWidth: 11,
  btnColor: 0x0099cc,
  currentPosition: 0,
  steps: 10,
  onChange: () => {},
}

export default Slider