diff --git a/src/core_plugins/input_control_vis/public/components/vis/range_control.js b/src/core_plugins/input_control_vis/public/components/vis/range_control.js index b2adf72e108f..fc10f1303fc2 100644 --- a/src/core_plugins/input_control_vis/public/components/vis/range_control.js +++ b/src/core_plugins/input_control_vis/public/components/vis/range_control.js @@ -1,36 +1,19 @@ import _ from 'lodash'; import PropTypes from 'prop-types'; import React, { Component } from 'react'; -import InputRange from 'react-input-range'; import { FormRow } from './form_row'; export class RangeControl extends Component { - constructor(props) { - super(props); - this.state = { - sliderValue: this.props.control.value - }; - - this.formatLabel = this.formatLabel.bind(this); - this.handleOnChange = this.handleOnChange.bind(this); - } - - componentWillReceiveProps(nextProps) { - this.setState({ sliderValue: nextProps.control.value }); - } - - handleOnChange(value) { - this.props.stageFilter(this.props.controlIndex, value); - } - - formatLabel(value) { - let formatedValue = value; - const decimalPlaces = _.get(this.props, 'control.options.decimalPlaces'); - if (decimalPlaces !== null && decimalPlaces >= 0) { - formatedValue = value.toFixed(decimalPlaces); + handleOnChange = (evt) => { + const newValue = _.cloneDeep(this.props.control.value); + newValue[evt.target.name] = parseFloat(evt.target.value); + if (newValue.min > newValue.max) { + const realMax = newValue.min; + newValue.min = newValue.max; + newValue.max = realMax; } - return formatedValue; + this.props.stageFilter(this.props.controlIndex, newValue); } render() { @@ -40,16 +23,36 @@ export class RangeControl extends Component { label={this.props.control.label} >