dev.js

import React from 'react';
import ReactDOM from 'react-dom';
import Knob from './Knob';

class Root extends React.Component {
  static responsiveWidths = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000];

  state = {
    value: 10,
    responsiveWidth: Root.responsiveWidths[Math.floor(Math.random() * Root.responsiveWidths.length)],
  };

  handleChange = (newValue) => {
    this.setState({ value: newValue });
  };

  handleUpdateResponsiveWidth = () => {
    this.setState({
      responsiveWidth: Root.responsiveWidths[Math.floor(Math.random() * Root.responsiveWidths.length)],
    });
  }

  render() {
    return (
      <div>
        <div>
          <h1>Static</h1>
          <Knob
            value={this.state.value}
            onChange={this.handleChange}
            step={10}
            min={0}
            max={500}
            angleArc={180}
            angleOffset={-90}
            height={100}
            width={200}
            onChangeEnd={(v) => console.log(v)}
          />
          <Knob
            value={this.state.value}
            onChange={this.handleChange}
            onChangeEnd={(v) => console.log(v)}
            step={10}
            min={0}
            max={500}
            angleArc={180}
            height={200}
            width={100}
          />
          <Knob
            value={this.state.value}
            onChange={this.handleChange}
            onChangeEnd={(v) => console.log(v)}
            step={10}
            min={0}
            max={500}
          />
          <Knob
            value={this.state.value}
            onChange={this.handleChange}
            onChangeEnd={(v) => console.log(v)}
            step={10}
            min={0}
            max={500}
          />
          <Knob
            value={this.state.value}
            onChange={this.handleChange}
            onChangeEnd={(v) => console.log(v)}
            step={10}
            min={0}
            max={500}
          />
          <Knob
            value={this.state.value}
            onChange={this.handleChange}
            onChangeEnd={(v) => console.log(v)}
            step={10}
            min={0}
            max={500}
          />
        </div>
        <div>
          <h2 onClick={this.handleUpdateResponsiveWidth}>Responsive</h2>
          <div style={{ width: this.state.responsiveWidth }}>
            <Knob
              value={this.state.value}
              onChange={this.handleChange}
              onChangeEnd={(v) => console.log(v)}
              step={10}
              min={0}
              max={500}
              width={this.state.responsiveWidth}
            />
          </div>
        </div>
      </div>
    );
  }
}

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