Added vertical option

dist/react-input-range-beyondadmin.css

@@ -0,0 +1,112 @@
+.InputRange {
+	height: 16px;
+	border: 1px solid #6c6c6c;
+	background-color: #ffffff;
+}
+
+.InputRange-track--container {
+	top: 3px;
+	left: 1px;
+	background-color: #ffffff;
+}
+
+.InputRange-track {
+	height: 14px;
+}
+
+.InputRange-track--active {
+	background-color: #57b5e3;
+	border-radius: 0;
+}
+
+.InputRange-label {
+	font-size: 13px;
+    color: #3f3f3f;
+}
+
+.InputRange-slider {
+	top: 7px;
+	margin-top: 0;
+	height: 20px;
+	background-color: #F55F51;
+	border: 0;
+	border-radius: 0;
+	width: 40px;
+	margin-left: -20px;
+}
+
+.InputRange-label--value {
+	top: -1px;
+	margin-left: -8px;
+    position: absolute;
+    display: block;
+    border-left: 8px solid transparent;
+    border-right: 8px solid transparent;
+    border-bottom: 8px solid #fb6e52;
+}
+
+.InputRange-label--value .InputRange-labelContainer {
+	padding-top: 2px;
+    top: 8px;
+    z-index: 50;
+    left: -20px;
+    color: #ffffff;
+    width: 40px;
+    height: 18px;
+    position: absolute;
+    text-align: center;
+    background-color: #fb6e52;
+}
+
+.InputRange-sliderContainer a {
+	z-index: 100;
+	background-color: transparent;
+}
+
+/*
+* vertical styles
+*/
+
+.InputRange.vertical {
+	width: 16px;
+}
+
+.vertical .InputRange-track--container {
+	margin-bottom: 1px;
+	margin-left: 0;
+	left: 1px;
+	width: 14px;
+}
+
+.vertical .InputRange-label--value {
+    top: -6px;
+    margin-left: -18px;
+    position: absolute;
+    display: block;
+    z-index: 50;
+    border-right: 6px solid #fb6e52;
+    border-top: 6px solid transparent;
+    border-bottom: 6px solid transparent;	
+}
+
+.vertical .InputRange-label--value .InputRange-labelContainer {
+	top: -10px;
+	left: 6px;
+	padding: 2px 5px 0 5px;
+	width: auto;
+}
+
+.vertical .InputRange-slider {
+    top: -10px;
+    left: 24px;	
+}
+
+.vertical .InputRange-label--max {
+	right: -14px;
+    top: -10px;
+}
+
+.vertical .InputRange-label--min {
+	left: 28px;
+	bottom: -10px;
+}

dist/react-input-range.css

@@ -83,3 +83,40 @@
   height: 1rem;
   position: relative;
   width: 100%; }
+
+/*
+    styles for vertical slider
+*/
+.InputRange.vertical {
+    height: 100%;
+    width: 1rem;
+    min-height: 200px;
+}
+
+.vertical .InputRange-track--container {
+    margin-top: 0;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -0.15rem;
+    height: 100%;
+}
+
+.vertical .InputRange-slider {
+    margin-left: -0.25rem;
+}
+
+.vertical .InputRange-label--min {
+    bottom: 0;
+    left: 1.75rem;
+}
+
+.vertical .InputRange-label--max {
+    right: -0.5rem;
+    top: 0;
+}
+
+.vertical .InputRange-label--value {
+    left: 1.5rem;
+    top: -0.5rem;
+}

scss/InputRange.scss

@@ -10,3 +10,9 @@
   position: relative;
   width: 100%;
 }
+
+.InputRange.vertical {
+    height: 100%;
+    width: $InputRange-slider-height;
+    min-height: 200px;
+}

scss/_InputRangeLabel.scss

@@ -23,3 +23,18 @@
   position: absolute;
   top: -1.8rem;
 }
+
+.vertical .InputRange-label--min {
+    bottom: 0;
+    left: 1.75rem;
+}
+
+.vertical .InputRange-label--max {
+    right: -0.5rem;
+    top: 0;
+}
+
+.vertical .InputRange-label--value {
+    left: 1.5rem;
+    top: -0.5rem;
+}

scss/_InputRangeSlider.scss

@@ -33,3 +33,7 @@
 .InputRange-sliderContainer {
   transition: $InputRange-sliderContainer-transition;
 }
+
+.vertical .InputRange-slider {
+    margin-left: $InputRange-slider-width / -4;
+}

scss/_InputRangeTrack.scss

@@ -22,3 +22,12 @@
 .InputRange-track--active {
   background: $InputRange-track--active-background;
 }
+
+.vertical .InputRange-track--container {
+    margin-top: 0;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    margin-left: -0.5 * $InputRange-track-height;
+    height: 100%;
+}

src/InputRange/InputRange.js

@@ -97,11 +97,16 @@ function getDocument(inputRange) {
 function getComponentClassName(inputRange) {
   const { props } = inputRange;
 
+  let verticalClass = '';
+  if (props.orientation === 'vertical') {
+    verticalClass = ' vertical';
+  }
+
   if (!props.disabled) {
-    return props.classNames.component;
+    return props.classNames.component + verticalClass;
   }
 
-  return `${props.classNames.component} is-disabled`;
+  return `${props.classNames.component} is-disabled ${verticalClass}`;
 }
 
 /**
@@ -196,7 +201,8 @@ function renderSliders(inputRange) {
         percentage={ percentage }
         ref={ ref }
         type={ key }
-        value={ value } />
+        value={ value }
+        orientation={ inputRange.props.orientation }/>
     );
 
     sliders.push(slider);
@@ -444,7 +450,6 @@ export default class InputRange extends React.Component {
     event.preventDefault();
 
     const key = getKeyByPosition(this, position);
-
     this.updatePosition(key, position);
   }
 
@@ -566,23 +571,26 @@ export default class InputRange extends React.Component {
         <Label
           className={ classNames.labelMin }
           containerClassName={ classNames.labelContainer }
-          formatLabel={ this.formatLabel }>
+          formatLabel={ this.formatLabel }
+          orientation={this.props.orientation}>
           { this.props.minValue }
         </Label>
 
         <Track
           classNames={ classNames }
           ref="track"
           percentages={ percentages }
-          onTrackMouseDown={ this.handleTrackMouseDown }>
+          onTrackMouseDown={ this.handleTrackMouseDown }
+          orientation={this.props.orientation}>
 
           { renderSliders(this) }
         </Track>
 
         <Label
           className={ classNames.labelMax }
           containerClassName={ classNames.labelContainer }
-          formatLabel={ this.formatLabel }>
+          formatLabel={ this.formatLabel }
+          orientation={this.props.orientation}>
           { this.props.maxValue }
         </Label>
 
@@ -610,6 +618,7 @@ export default class InputRange extends React.Component {
  * @property {Function} onChangeComplete
  * @property {Function} step
  * @property {Function} value
+ * @property {Function} orientation
  */
 InputRange.propTypes = {
   ariaLabelledby: React.PropTypes.string,
@@ -627,6 +636,7 @@ InputRange.propTypes = {
   onChangeComplete: React.PropTypes.func,
   step: React.PropTypes.number,
   value: maxMinValuePropType,
+  orientation: React.PropTypes.string,
 };
 
 /**
@@ -641,6 +651,7 @@ InputRange.propTypes = {
  * @property {number} minValue
  * @property {number} step
  * @property {Range|number} value
+ * @property {string} orientation
  */
 InputRange.defaultProps = {
   classNames: defaultClassNames,
@@ -652,4 +663,5 @@ InputRange.defaultProps = {
   minValue: 0,
   step: 1,
   value: null,
+  orientation: 'horizontal',
 };

src/InputRange/Slider.js

@@ -26,6 +26,16 @@ function getDocument(slider) {
  */
 function getStyle(slider) {
   const perc = (slider.props.percentage || 0) * 100;
+
+  if (slider.props.orientation === 'vertical') {
+    const style = {
+      position: 'absolute',
+      bottom: `${perc}%`,
+    };
+
+    return style;
+  }
+
   const style = {
     position: 'absolute',
     left: `${perc}%`,
@@ -193,6 +203,7 @@ export default class Slider extends React.Component {
  * @property {Function} percentage
  * @property {Function} type
  * @property {Function} value
+ * @property {Function} orientation
  */
 Slider.propTypes = {
   ariaLabelledby: React.PropTypes.string,
@@ -206,4 +217,5 @@ Slider.propTypes = {
   percentage: React.PropTypes.number.isRequired,
   type: React.PropTypes.string.isRequired,
   value: React.PropTypes.number.isRequired,
+  orientation: React.PropTypes.string,
 };