1 import React from 'react';
2 import './sq-input-range-slider.scss';
4 export default class SqInputRangeSlider extends React.Component {
8 this.state.position = {
11 this.className = "SqRangeInput";
14 updateHandle = (e) => {
15 this.props.onChange(e.target.valueAsNumber);
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;
25 let inputContainer = {
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';
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';
51 <div className={this.className + '--container'} style={inputContainer}>
52 <div className={class_name + ' ' + className + (disabled ? ' is-disabled' : '')}>
55 orient= {vertical ? "vertical" : "horizontal"}
57 onChange={this.updateHandle}
70 SqInputRangeSlider.defaultProps = {
71 //Horizontal vs Vertical Slider
81 onChange: function(value) {