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

   1 import React from 'react';
   2 import './sq-input-range-slider.scss';
   3
   4 export default class SqInputRangeSlider extends React.Component {
   5     constructor(props){
   6         super(props);
   7         this.state = {};
   8         this.state.position = {
   9             left: 50
  10         };
  11         this.className = "SqRangeInput";
  12     }
  13
  14     updateHandle = (e) => {
  15         this.props.onChange(e.target.valueAsNumber);
  16     }
  17
  18     render() {
  19         const {vertical, className, min, max, step,  width, disabled, ...props} = this.props;
  20         let class_name = this.className;
  21         let dataListHTML = null;
  22         let dataListOptions = null;
  23         let dataListID = null;
  24         let inputStyle = {};
  25         let inputContainer = {
  26         };
  27         let style = {
  28             width: width + 'px'
  29         }
  30         if(vertical) {
  31             class_name += ' ' + this.className + '--vertical';
  32             style.position = 'absolute';
  33             style.left = (width * -1 + 32) + 'px';
  34             style.width = width + 'px';
  35             inputContainer.margin = '0 10px';
  36             inputContainer.width = '70px';
  37             inputContainer.height = (width + 40) + 'px';
  38             inputContainer.background = 'white';
  39             inputContainer.border = '1px solid #ccc';
  40         } else {
  41             class_name += ' ' + this.className + '--horizontal';
  42             // style.position = 'absolute';
  43             // style.top = 12 + 'px';
  44             inputContainer.margin = '10px 0px';
  45             inputContainer.height = '70px';
  46             inputContainer.width = (width + 40) + 'px';
  47             inputContainer.background = 'white';
  48             inputContainer.border = '1px solid #ccc';
  49         }
  50         return (
  51                 <div className={this.className + '--container'} style={inputContainer}>
  52                     <div className={class_name + ' ' + className + (disabled ? ' is-disabled' : '')}>
  53                         <input
  54                             style={style}
  55                             orient= {vertical ? "vertical" : "horizontal"}
  56                             type="range"
  57                             onChange={this.updateHandle}
  58                             ref="range"
  59                             max={max}
  60                             min={min}
  61                             step={step}
  62                             disabled={disabled}
  63                          />
  64                      </div>
  65                  </div>
  66         )
  67     }
  68 }
  69
  70 SqInputRangeSlider.defaultProps = {
  71     //Horizontal vs Vertical Slider
  72     vertical: false,
  73     //Override classes
  74     className: '',
  75     min:0,
  76     max:100,
  77     step: 1,
  78     //width/length in px
  79     width:100,
  80     disabled: false,
  81     onChange: function(value) {
  82         console.log(value);
  83     }
  84 }