experement with native input range sliders
This commit is contained in:
parent
7465606331
commit
aed599e88a
|
@ -1,36 +1,19 @@
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import InputRange from 'react-input-range';
|
|
||||||
import { FormRow } from './form_row';
|
import { FormRow } from './form_row';
|
||||||
|
|
||||||
export class RangeControl extends Component {
|
export class RangeControl extends Component {
|
||||||
constructor(props) {
|
|
||||||
super(props);
|
|
||||||
|
|
||||||
this.state = {
|
handleOnChange = (evt) => {
|
||||||
sliderValue: this.props.control.value
|
const newValue = _.cloneDeep(this.props.control.value);
|
||||||
};
|
newValue[evt.target.name] = parseFloat(evt.target.value);
|
||||||
|
if (newValue.min > newValue.max) {
|
||||||
this.formatLabel = this.formatLabel.bind(this);
|
const realMax = newValue.min;
|
||||||
this.handleOnChange = this.handleOnChange.bind(this);
|
newValue.min = newValue.max;
|
||||||
}
|
newValue.max = realMax;
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
}
|
||||||
return formatedValue;
|
this.props.stageFilter(this.props.controlIndex, newValue);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -40,16 +23,36 @@ export class RangeControl extends Component {
|
||||||
label={this.props.control.label}
|
label={this.props.control.label}
|
||||||
>
|
>
|
||||||
<div className="inputRangeContainer">
|
<div className="inputRangeContainer">
|
||||||
<InputRange
|
<input
|
||||||
maxValue={this.props.control.max}
|
type="range"
|
||||||
minValue={this.props.control.min}
|
name="min"
|
||||||
|
value={this.props.control.value.min}
|
||||||
|
min={this.props.control.min}
|
||||||
|
max={this.props.control.max}
|
||||||
step={this.props.control.options.step}
|
step={this.props.control.options.step}
|
||||||
value={this.state.sliderValue}
|
onChange={this.handleOnChange}
|
||||||
onChange={newValue => this.setState({ sliderValue: newValue })}
|
/>
|
||||||
onChangeComplete={this.handleOnChange}
|
<input
|
||||||
draggableTrack={true}
|
type="number"
|
||||||
ariaLabelledby={this.props.control.id}
|
value={this.props.control.value.min}
|
||||||
formatLabel={this.formatLabel}
|
min={this.props.control.min}
|
||||||
|
max={this.props.control.max}
|
||||||
|
/>
|
||||||
|
TO
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
name="max"
|
||||||
|
value={this.props.control.value.max}
|
||||||
|
min={this.props.control.min}
|
||||||
|
max={this.props.control.max}
|
||||||
|
step={this.props.control.options.step}
|
||||||
|
onChange={this.handleOnChange}
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={this.props.control.value.max}
|
||||||
|
min={this.props.control.min}
|
||||||
|
max={this.props.control.max}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</FormRow>
|
</FormRow>
|
||||||
|
|
|
@ -11,6 +11,11 @@
|
||||||
.actions {
|
.actions {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input[type=range] {
|
||||||
|
width: 30%;
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
visualization.input_control_vis {
|
visualization.input_control_vis {
|
||||||
|
|
Loading…
Reference in a new issue