import React, { Component } from 'react'
import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'



export default class SliderHumidity extends Component {
  state = {visible: true, duration: 78 }

  handleChange = (e, { name, value }) => this.setState({ [name]: value })

  handleVisibility = () =>
    this.setState((prevState) => ({ visible: !prevState.visible }))

  render() {
    const { duration } = this.state

    return (
      <Grid columns={2}>
        <Grid.Column as={Form} textAlign="center">
            <p 
            style={{
                color: "white", 
                padding:"0.5rem",  
                display:"block", 
                marinLeft:"auto", 
                marginRight:"auto",}}
            >
                {`Humidity: ${duration} %`}
            </p>

            <Form.Input
                min={0}
                max={100}
                name='duration'
                onChange={this.handleChange}
                step={1}
                type='range'
                value={duration}
            />
        </Grid.Column>
      </Grid>
    )
  }
}