import React, { Component } from 'react'
import InputRange from 'react-input-range';
import styled from 'styled-components';

const StyledRangeSlider = styled(InputRange)`
  color: red;
  .input-range {
      height: 1rem;
      position: relative;
      width: 100%; 
  }
`

class RangeSlider extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: { min: 2, max: 10 },
    };
  }

  handleOnChange = (value) => {
    this.setState({
      volume: value
    })
  }

  render() {
    return (
      <StyledRangeSlider
          draggableTrack
          maxValue={19}
          minValue={0}
          onChange={value => this.setState({ value: value })}
          onChangeComplete={value => console.log(value)}
          value={this.state.value} />
    );
  }
}

export default RangeSlider;