import React, { Component } from "react"; import Grid from "@material-ui/core/Grid"; import Slider from "@material-ui/core/Slider"; import Input from "@material-ui/core/Input"; import ArrowRightAltIcon from "@material-ui/icons/ArrowRightAlt"; export default class SliderMessage extends Component { state = { value: this.props.message.value || 0, }; onChange = (value) => { if (!this.props.isActive || !value) return; const [min, max] = this.props.message.options[0] || [0, 100, 1]; this.setState({ value: Math.min(max, Math.max(min, parseFloat(value))) }); }; render() { const { message, isActive, action } = this.props; const [min, max, step] = message.options[0] || [0, 100, 1]; const { value } = this.state; return (
this.onChange(value)} aria-labelledby="input-slider" min={min} max={max} step={step} /> this.onChange(e.target.value)} onBlur={() => this.onChange(value)} inputProps={{ step: step, min: min, max: max, type: "number", "aria-labelledby": "input-slider", }} /> {isActive && ( )}
); } }