45 lines
1.1 KiB
JavaScript
45 lines
1.1 KiB
JavaScript
import React, { Component } from 'react'
|
|
import { Form, Grid, Image, Transition, Divider } from 'semantic-ui-react'
|
|
|
|
|
|
|
|
export default class SliderTempRange extends Component {
|
|
state = {visible: true, duration: 500 }
|
|
|
|
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",}}
|
|
>
|
|
{`Chosen tolerance: +/- ${duration}`}
|
|
</p>
|
|
|
|
|
|
<Form.Input
|
|
min={0}
|
|
max={1000}
|
|
name='duration'
|
|
onChange={this.handleChange}
|
|
step={1}
|
|
type='range'
|
|
value={duration}
|
|
/>
|
|
</Grid.Column>
|
|
</Grid>
|
|
)
|
|
}
|
|
} |