skyquake/framework/widgets/input-range-slider/input-range-slider.jsx

   1
   2 /*
   3  *
   4  *   Copyright 2016 RIFT.IO Inc
   5  *
   6  *   Licensed under the Apache License, Version 2.0 (the "License");
   7  *   you may not use this file except in compliance with the License.
   8  *   You may obtain a copy of the License at
   9  *
  10  *       http://www.apache.org/licenses/LICENSE-2.0
  11  *
  12  *   Unless required by applicable law or agreed to in writing, software
  13  *   distributed under the License is distributed on an "AS IS" BASIS,
  14  *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  15  *   See the License for the specific language governing permissions and
  16  *   limitations under the License.
  17  *
  18  */
  19 import React from 'react';
  20 // import Slider from 'react-rangeslider';
  21 // import Slider from './react-rangeslider.jsx';
  22 import './input-range-slider.scss';
  23
  24
  25 class RWslider extends React.Component {
  26   constructor(props, context) {
  27     super(props, context);
  28     this.state = {...props}
  29   }
  30
  31   handleChange = (value) => {
  32     this.props.handleInputUpdate(value);
  33     this.setState({
  34       value: value
  35     });
  36   };
  37
  38   render() {
  39     let state = this.state;
  40       var className = "input-range-slider_" + this.props.orientation;
  41     return (
  42       <div className={className}>
  43       <div className={className + '-info'}>
  44       {state["min-value"]}
  45       </div>
  46       <Slider
  47         displayValue={true}
  48         value={state.value}
  49         max={state["max-value"]}
  50         min={state["min-value"]}
  51         step={state["step-value"]}
  52         onChange={this.handleChange}
  53         className={className + '-info'} />
  54       <div className={className + '-info'}>
  55       {state["max-value"]}
  56       </div>
  57       </div>
  58     );
  59   }
  60 }
  61
  62 RWslider.defaultProps = {
  63     value: 10,
  64     "min-value": 0,
  65     "max-value":100,
  66     "step-value":1,
  67     "units": "%",
  68     orientation: "horizontal"
  69 }
  70
  71 export default RWslider
  72