46 lines
1.1 KiB
JavaScript
46 lines
1.1 KiB
JavaScript
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>
|
|
);
|
|
}
|
|
}
|