{"size": 1194, "ext": "js", "max_stars_repo_path": "src/components/VolumeSlider/VolumeSlider.js", "max_stars_repo_name": "salus-sage/papad-timeliner", "max_stars_repo_stars_event_min_datetime": "2018-12-05T23:48:44.000Z", "max_stars_repo_stars_event_max_datetime": "2022-03-03T15:55:12.000Z", "max_issues_repo_path": "src/components/VolumeSlider/VolumeSlider.js", "max_issues_repo_name": "salus-sage/papad-timeliner", "max_issues_repo_issues_event_min_datetime": "2018-08-29T21:52:38.000Z", "max_issues_repo_issues_event_max_datetime": "2020-09-22T02:36:00.000Z", "max_forks_repo_path": "src/components/VolumeSlider/VolumeSlider.js", "max_forks_repo_name": "salus-sage/papad-timeliner", "max_forks_repo_forks_event_min_datetime": "2019-03-19T14:17:50.000Z", "max_forks_repo_forks_event_max_datetime": "2020-08-31T16:22:12.000Z"}
{"max_stars_count": 10, "max_issues_count": 207, "max_forks_count": 6, "avg_line_length": 24.3673469388, "max_line_length": 65, "alphanum_fraction": 0.6365159129}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Slider from '@material-ui/lab/Slider';
import VolumeDown from '@material-ui/icons/VolumeDown';
import VolumeUp from '@material-ui/icons/VolumeUp';
import './VolumeSlider.scss';

const SPEAKER_ICON_SIZE = {
  width: 20,
  height: 20,
};

class VolumeSlider extends Component {
  static propTypes = {
    /** Current volume value */
    volume: PropTypes.number.isRequired,
    /** Handler for when volume is changed */
    onVolumeChanged: PropTypes.func.isRequired,
  };
  static defaultProps = {
    volume: 100,
  };

  onVolumeInputChange = (ev, value) => {
    const { onVolumeChanged } = this.props;
    if (onVolumeChanged) {
      onVolumeChanged(parseInt(value, 10));
    }
  };

  render() {
    const { volume } = this.props;
    return (
      <div className="volume-slider">
        <VolumeDown color="disabled" style={SPEAKER_ICON_SIZE} />
        <Slider
          min={0}
          max={100}
          value={volume}
          onChange={this.onVolumeInputChange}
        />
        <VolumeUp color="disabled" style={SPEAKER_ICON_SIZE} />
      </div>
    );
  }
}

export default VolumeSlider;
