import React from 'react';
import PropTypes from 'prop-types';
import { css } from '@patternfly/react-styles';
import styles from './SpanSlider.styles';
import { Grid, GridItem } from '../../index';
var propTypes = {
  id: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
  onChange: PropTypes.func.isRequired,
  min: PropTypes.number
};
var defaultProps = {
  min: 3
};

var SpanSlider = function SpanSlider(_ref) {
  var label = _ref.label,
      id = _ref.id,
      onChange = _ref.onChange,
      min = _ref.min,
      value = _ref.value;
  return React.createElement(Grid, {
    className: css(styles.spanSlider)
  }, React.createElement(GridItem, {
    span: 4,
    className: css(styles.label)
  }, React.createElement("label", {
    htmlFor: id
  }, label)), React.createElement(GridItem, {
    span: 7
  }, React.createElement("input", {
    id: id,
    className: css(styles.rangeInput),
    type: "range",
    min: min,
    max: 12,
    value: value,
    onChange: onChange
  })), React.createElement(GridItem, {
    span: 1,
    className: css(styles.value)
  }, value));
};

SpanSlider.propTypes = propTypes;
SpanSlider.defaultProps = defaultProps;
export default SpanSlider;