Rift.IO OSM R1 Initial Submission
Signed-off-by: Jeremy Mordkoff <jeremy.mordkoff@riftio.com>
diff --git a/skyquake/framework/widgets/sq-input-range-slider/sq-input-range-slider.jsx b/skyquake/framework/widgets/sq-input-range-slider/sq-input-range-slider.jsx
new file mode 100644
index 0000000..6a0bb97
--- /dev/null
+++ b/skyquake/framework/widgets/sq-input-range-slider/sq-input-range-slider.jsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import './sq-input-range-slider.scss';
+
+export default class SqInputRangeSlider extends React.Component {
+ constructor(props){
+ super(props);
+ this.state = {};
+ this.state.position = {
+ left: 50
+ };
+ this.className = "SqRangeInput";
+ }
+
+ updateHandle = (e) => {
+ this.props.onChange(e.target.valueAsNumber);
+ }
+
+ render() {
+ const {vertical, className, min, max, step, width, disabled, ...props} = this.props;
+ let class_name = this.className;
+ let dataListHTML = null;
+ let dataListOptions = null;
+ let dataListID = null;
+ let inputStyle = {};
+ let inputContainer = {
+ };
+ let style = {
+ width: width + 'px'
+ }
+ if(vertical) {
+ class_name += ' ' + this.className + '--vertical';
+ style.position = 'absolute';
+ style.left = (width * -1 + 32) + 'px';
+ style.width = width + 'px';
+ inputContainer.margin = '0 10px';
+ inputContainer.width = '70px';
+ inputContainer.height = (width + 40) + 'px';
+ inputContainer.background = 'white';
+ inputContainer.border = '1px solid #ccc';
+ } else {
+ class_name += ' ' + this.className + '--horizontal';
+ // style.position = 'absolute';
+ // style.top = 12 + 'px';
+ inputContainer.margin = '10px 0px';
+ inputContainer.height = '70px';
+ inputContainer.width = (width + 40) + 'px';
+ inputContainer.background = 'white';
+ inputContainer.border = '1px solid #ccc';
+ }
+ return (
+ <div className={this.className + '--container'} style={inputContainer}>
+ <div className={class_name + ' ' + className + (disabled ? ' is-disabled' : '')}>
+ <input
+ style={style}
+ orient= {vertical ? "vertical" : "horizontal"}
+ type="range"
+ onChange={this.updateHandle}
+ ref="range"
+ max={max}
+ min={min}
+ step={step}
+ disabled={disabled}
+ />
+ </div>
+ </div>
+ )
+ }
+}
+
+SqInputRangeSlider.defaultProps = {
+ //Horizontal vs Vertical Slider
+ vertical: false,
+ //Override classes
+ className: '',
+ min:0,
+ max:100,
+ step: 1,
+ //width/length in px
+ width:100,
+ disabled: false,
+ onChange: function(value) {
+ console.log(value);
+ }
+}
diff --git a/skyquake/framework/widgets/sq-input-range-slider/sq-input-range-slider.scss b/skyquake/framework/widgets/sq-input-range-slider/sq-input-range-slider.scss
new file mode 100644
index 0000000..b09dd16
--- /dev/null
+++ b/skyquake/framework/widgets/sq-input-range-slider/sq-input-range-slider.scss
@@ -0,0 +1,176 @@
+@import '../../style/_colors.scss';
+$slider-background: rgba(19, 82, 150, 0.2);
+$disabled-slider-background: $dark-gray;
+//Generates ticks on bar. Not currently used
+$slider-background-ticks: repeating-linear-gradient(to right, $slider-background, $slider-background 0%, #fff 0%, #fff 1%, $slider-background 1%, $slider-background 25%);
+$thumb-color: rgba(0, 119, 200, 1);
+$disabled-thumb-color: $dark-gray;
+$track-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
+$thumb-height: 50;
+$track-height: 3;
+$input-margin: 20;
+$-webkit-handle-offset: ($track-height - $thumb-height) / 2;
+
+//(thH-ttW) / 2
+
+@mixin thumbStyling {
+ box-shadow: $track-shadow;
+ border: 0px solid #000000;
+ background: $thumb-color;
+ box-shadow: 2px 2px 2px 0px #ccc;
+ height: $thumb-height + px;
+ width: 20px;
+ cursor: pointer;
+}
+@mixin inputTrack {
+ width: 100%;
+ height: $track-height + px;
+ cursor: pointer;
+ animate: 0.2s;
+}
+@mixin infoBase {
+ display: flex;
+ justify-content: space-between;
+}
+@mixin sliderBase {
+ input[type=range] {
+ position:absolute;
+ -webkit-appearance: none;
+ margin: $input-margin + px 0;
+ width: 100%;
+ &:focus {
+ outline: none;
+ }
+ &::-webkit-slider-thumb {
+ @include thumbStyling;
+ -webkit-appearance: none;
+ margin-top: $-webkit-handle-offset + px;
+
+ }
+ &::-moz-range-thumb {
+ @include thumbStyling;
+ }
+ &::-ms-thumb {
+ @include thumbStyling;
+ }
+ &::-webkit-slider-runnable-track {
+ @include inputTrack;
+ box-shadow: $track-shadow;
+ background: $slider-background;
+ border: 0px solid #000101;
+ }
+ &:focus::-webkit-slider-runnable-track {
+ background: $slider-background;
+ }
+ &::-moz-range-track {
+ @include inputTrack;
+ box-shadow: $track-shadow;
+ background: $slider-background;
+ border: 0px solid #000101;
+ }
+ &::-ms-track {
+ @include inputTrack;
+ background: transparent;
+ border-color: transparent;
+ border-width: 39px 0;
+ color: transparent;
+ }
+ &::-ms-fill-lower {
+ background: $slider-background;
+ border: 0px solid #000101;
+ box-shadow: $track-shadow;
+ }
+ &::-ms-fill-upper {
+ background: #ac51b5;
+ border: 0px solid #000101;
+ box-shadow: $track-shadow;
+ }
+ &:focus::-ms-fill-lower {
+ background: $slider-background;
+ }
+ &:focus::-ms-fill-upper {
+ background: $slider-background;
+ }
+ }
+ &-info {
+ @include infoBase
+ }
+}
+.SqRangeInput {
+ &--container {
+ background:white;
+ border: 1px solid #ccc;
+ }
+ &--horizontal {
+ @include sliderBase;
+ position: relative;
+ height:$thumb-height + px;
+ margin: $input-margin / 2 + px;
+ }
+ &--vertical {
+ @include sliderBase;
+ position: relative;
+
+ input[type=range] {
+ -webkit-appearance: none;
+ height: 100%;
+ width: $track-height + px;
+ transform: rotate(270deg);
+ transform-origin: right;
+ &::-webkit-slider-thumb {
+ box-shadow: -2px 2px 2px 0px #ccc;
+ }
+ &::-moz-range-thumb {
+ box-shadow: -2px 2px 2px 0px #ccc;
+ }
+ &::-ms-thumb {
+ box-shadow: -2px 2px 2px 0px #ccc;
+ }
+ }
+ &-info {
+ @include infoBase;
+
+ div {
+ transform: translateY(10px) rotate(90deg);
+ }
+ }
+ }
+ &.is-disabled {
+ input[type=range] {
+ &:disabled {
+ &::-webkit-slider-thumb {
+ background: $disabled-thumb-color;
+ }
+ &::-moz-range-thumb {
+ background: $disabled-thumb-color;
+ }
+ &::-ms-thumb {
+ background: $disabled-thumb-color;
+ }
+ &::-webkit-slider-runnable-track {
+ background: $disabled-slider-background;
+ }
+ &:focus::-webkit-slider-runnable-track {
+ background: $disabled-slider-background;
+ }
+ &::-moz-range-track {
+ background: $disabled-slider-background;
+ }
+ &::-ms-track {
+ }
+ &::-ms-fill-upper {
+ background: $disabled-slider-background;
+ }
+ &::-ms-fill-lower {
+ background: $disabled-slider-background;
+ }
+ &:focus::-ms-fill-lower {
+ background: $disabled-slider-background;
+ }
+ &:focus::-ms-fill-upper {
+ background: $disabled-slider-background;
+ }
+ }
+ }
+ }
+}