import { default as React, Component } from 'react';
import { render } from 'react-dom';
import {queryObject} from './ImmutableQuery.js';
import InputRange from 'react-input-range';
var Style = require('./Style.js');

export class AppbaseSlider extends Component {

  constructor(props) {
    super(props);
    this.state = {
      values: {
        min: 0,
        max: 20,
      },
      minThreshold: 0,
      maxThreshold:20,
      currentValues: [],
    };
  }
  // Handle function when value slider option is changing
  handleValuesChange(component, values) {
    this.setState({
      values: values,
    });
  }
  // Handle function when slider option change is completed
  handleResults(component, values) {
    // Remove the last Range query
    queryObject.removeShouldClause(this.props.fieldName, this.state.currentValues, "Range", true);
    // Add new should query    
    queryObject.addShouldClause(this.props.fieldName, values, "Range");
    this.setState({
      currentValues: values
    });
  }
  render() {
    return (
      <div style={Style.divContainer}>
        <InputRange
          maxValue={this.state.maxThreshold}
          minValue={this.state.minThreshold}
          value={this.state.values}
          onChange={this.handleValuesChange.bind(this) }          
          onChangeComplete={this.handleResults.bind(this) }
          />
      </div>
    );
  }

}
@@ -337,81 +337,103 @@
 es: 
-%7B%0A 
+this.props.values,%0A
       
- 
 min
-: 0,%0A        max: 20,%0A      %7D,%0A      minThreshold: 0,%0A      
+Threshold: this.props.minThreshold,%0A      maxThreshold: this.props.
 maxT
@@ -444,11 +444,8 @@
 hold
-:20
 ,%0A  
@@ -1298,19 +1298,9 @@
 s) %7D
-          
 %0A
+
     
@@ -1393,9 +1393,123 @@
 );%0A  %7D%0A%0A
-
 %7D
+AppbaseSlider.defaultProps = %7B%0A  minThreshold: 0,%0A  maxThreshold: 20,%0A  values: %7B%0A    min: 0,%0A    max: 20,%0A  %7D,%0A%7D;

Fix the bug in the AppbaseSlider