added support for segment1 painting, updated docs examples

docs/js/components/RangeSliderControlled/index.js

@@ -42,6 +42,7 @@ export default class SliderControlled extends Component {
             wrapperStyle={styles.slider}
             trackStyle={styles.trackStyle}
             highlightedTrackStyle={styles.highlightedTrackStyle}
+            highlightedTrackStyle2={styles.highlightedTrackStyle2}
             handleStyle={styles.handleStyle}
             hoveredHandleStyle={styles.hoveredHandleStyle}
             focusedHandleStyle={styles.focusedHandleStyle}
@@ -64,6 +65,7 @@ export default class SliderControlled extends Component {
                 'wrapperStyle={styles.slider}\n  ' +
                 'trackStyle={styles.trackStyle}\n  ' +
                 'highlightedTrackStyle={styles.highlightedTrackStyle}\n  ' +
+                'highlightedTrackClassName2={styles.sliderHighlightedTrack2}\n  ' +
                 'handleStyle={styles.handleStyle}\n  ' +
                 'hoveredHandleStyle={styles.hoveredHandleStyle}\n  ' +
                 'focusedHandleStyle={styles.focusedHandleStyle}\n  ' +

docs/js/components/RangeSliderControlled/styles.js

@@ -47,6 +47,12 @@ export default {
     backgroundColor: 'grey',
     top: 14,
   },
+  highlightedTrackStyle2: {
+    height: 5,
+    border: '3px solid black',
+    backgroundColor: 'red',
+    top: 14,
+  },
   handleStyle: {
     height: 30,
     width: 30,

docs/js/components/RangeSliderReadOnly/index.js

@@ -42,6 +42,8 @@ export default class SliderDisabled extends Component {
             readOnly
             defaultValue={value}
             onChange={this.onChange}
+            highlightedTrackStyle={styles.highlightedTrackStyle}
+            highlightedTrackStyle2={styles.highlightedTrackStyle2}
           />
         </div>
         <div>
@@ -55,6 +57,8 @@ export default class SliderDisabled extends Component {
                 'step={2}\n  ' +
                 'readOnly\n  ' +
                 'defaultValue={value}\n  ' +
+                'highlightedTrackClassName={styles.sliderHighlightedTrack}\n  ' +
+                'highlightedTrackClassName2={styles.sliderHighlightedTrack2}\n  ' +
                 'onChange={this.onChange}\n' +
               '/>'
             }

docs/js/components/RangeSliderReadOnly/styles.css

@@ -46,6 +46,12 @@
   background-color: #dafbda !important;
   top: 12px !important;
 }
+.sliderHighlightedTrack2 {
+  height: 5px !important;
+  border: 1px solid red !important;
+  background-color: #dafbda !important;
+  top: 12px !important;
+}
 .sliderHandle {
   height: 30px !important;
   width: 30px !important;

docs/js/components/RangeSliderUncontrolled/index.js

@@ -37,6 +37,7 @@ export default class SliderUncontrolled extends Component {
             wrapperClassName={styles.slider}
             trackClassName={styles.sliderTrack}
             highlightedTrackClassName={styles.sliderHighlightedTrack}
+            highlightedTrackClassName2={styles.sliderHighlightedTrack2}
             handleClassName={styles.sliderHandle}
           />
         </div>
@@ -49,6 +50,7 @@ export default class SliderUncontrolled extends Component {
             value={'<RangeSlider\n  step={2}\n  onChange={this.onChange}\n  ' +
             'wrapperClassName={styles.slider}\n  ' +
             'highlightedTrackClassName={styles.sliderHighlightedTrack}\n  ' +
+            'highlightedTrackClassName2={styles.sliderHighlightedTrack2}\n  ' +
             'trackClassName={styles.sliderTrack}\n  handleClassName={styles.sliderHandle}\n/>'}
             options={{
               lineNumbers: true,

docs/js/components/RangeSliderUncontrolled/styles.css

@@ -46,6 +46,12 @@
   background-color: #dafbda !important;
   top: 12px !important;
 }
+.sliderHighlightedTrack2 {
+  height: 5px !important;
+  border: 1px solid #31da31 !important;
+  background-color: #dafbda !important;
+  top: 12px !important;
+}
 .sliderHandle {
   height: 30px !important;
   width: 30px !important;

js/components/Handle/index.js

@@ -1,6 +1,7 @@
 /* @flow */
 
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { injectStyle, removeStyle, calculateStyle, getMousePosition } from '../../utils/handle';
 import { notSimilar } from '../../utils/common';
 import styles from './styles';

js/components/Handle/styles.js

@@ -7,7 +7,6 @@ export default {
     width: 30,
     backgroundColor: '#2771e2',
     border: '1px solid #052350',
-    borderRadius: '50%',
     outline: 'none !important',
   },
   handleVertical: {
@@ -19,7 +18,7 @@ export default {
     left: 0,
     backgroundColor: '#2771e2',
     border: '1px solid #052350',
-    borderRadius: '50%',
+
     outline: 'none !important',
   },
   focusedHandle: {

js/components/HighlightedTrack/index.js

@@ -1,6 +1,7 @@
 /* @flow */
 
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import { notSimilar } from '../../utils/common';
 import styles from './styles';
 

js/components/HighlightedTrack/styles.js

@@ -4,8 +4,8 @@ export default {
     width: '100%',
     top: 13,
     height: 4,
-    backgroundColor: '#99c1ff',
-    border: '1px solid #2771e2',
+    backgroundColor: '#00FA9A',
+
   },
   highlightedTrackVertical: {
     position: 'absolute',

js/components/RangeSlider/index.js

@@ -1,6 +1,7 @@
 /* @flow */
 
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Track from '../Track';
 import HighlightedTrack from '../HighlightedTrack';
 import Handle from '../Handle';
@@ -36,13 +37,15 @@ export default class RangeSlider extends Component {
     trackClassName: PropTypes.string,
     disabledTrackClassName: PropTypes.string,
     highlightedTrackClassName: PropTypes.string,
+    highlightedTrackClassName2: PropTypes.string,
     disabledHighlightedTrackClassName: PropTypes.string,
     handleClassName: PropTypes.string,
     disabledHandleClassName: PropTypes.string,
     wrapperStyle: PropTypes.object,
     trackStyle: PropTypes.object,
     disabledTrackStyle: PropTypes.object,
     highlightedTrackStyle: PropTypes.object,
+    highlightedTrackStyle2: PropTypes.object,
     disabledHighlightedTrackStyle: PropTypes.object,
     handleStyle: PropTypes.object,
     focusedHandleStyle: PropTypes.object,
@@ -297,6 +300,7 @@ export default class RangeSlider extends Component {
       orientation,
       disabledTrackStyle,
       highlightedTrackStyle,
+      highlightedTrackStyle2,
       disabledHighlightedTrackStyle,
       handleStyle,
       focusedHandleStyle,
@@ -307,6 +311,7 @@ export default class RangeSlider extends Component {
       trackClassName,
       disabledTrackClassName,
       highlightedTrackClassName,
+      highlightedTrackClassName2,
       disabledHighlightedTrackClassName,
       handleClassName,
       disabledHandleClassName,
@@ -366,9 +371,18 @@ export default class RangeSlider extends Component {
           style={highlightedTrackStyle}
           disabledStyle={disabledHighlightedTrackStyle}
           className={highlightedTrackClassName}
+          offset={0}
+          length={`${(startValue) * percentageFactor}%`}
+          disabledClassName={disabledHighlightedTrackClassName}
+        />
+        <HighlightedTrack
+          disabled={disabled}
+          orientation={orientation}
+          style={highlightedTrackStyle2}
+          disabledStyle={disabledHighlightedTrackStyle}
+          className={highlightedTrackClassName2}
           offset={`${startValue * percentageFactor}%`}
-          length={`${(endValue - startValue) * percentageFactor}%`}
-          className={highlightedTrackClassName}
+          length={`${(endValue-startValue)*percentageFactor}%`}
           disabledClassName={disabledHighlightedTrackClassName}
         />
         <Handle

js/components/Slider/index.js

@@ -1,6 +1,7 @@
 /* @flow */
 
-import React, { Component, PropTypes } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import Track from '../Track';
 import Handle from '../Handle';
 import styles from './styles';
@@ -89,25 +90,29 @@ export default class Slider extends Component {
   value: number;
 
   _setTrackDimensions: Function = (track: Object): void => {
-    const { orientation } = this.props;
-    const trackLength = orientation === 'vertical' ? track.clientHeight : track.clientWidth;
-    this.setState({
-      trackLength,
-    });
-    this.trackOffset = orientation === 'vertical' ?
-      track.offsetParent && track.offsetParent.offsetTop :
-      track.offsetParent && track.offsetParent.offsetLeft;
+    if (track) {
+      const { orientation } = this.props;
+      const trackLength = orientation === 'vertical' ? track.clientHeight : track.clientWidth;
+      this.setState({
+        trackLength,
+      });
+      this.trackOffset = orientation === 'vertical' ?
+        track.offsetParent && track.offsetParent.offsetTop :
+        track.offsetParent && track.offsetParent.offsetLeft;
+    }
   };
 
   _setHandleSize: Function = (handle): void => {
-    const { orientation } = this.props;
-    const hendleSize = orientation === 'vertical' ?
+    if (handle) {
+      const { orientation } = this.props;
+      const hendleSize = orientation === 'vertical' ?
       handle.clientHeight :
       handle.clientWidth;
-    if (!this.state.hendleSize) {
-      this.setState({
-        hendleSize,
-      });
+      if (!this.state.hendleSize) {
+        this.setState({
+          hendleSize,
+        });
+      }
     }
   };
 

js/components/Track/index.js

@@ -1,6 +1,7 @@
 /* @flow */
 
-import React, { PropTypes, Component } from 'react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
 import styles from './styles';
 
 export default class Track extends Component {

js/components/Track/styles.js

@@ -5,8 +5,8 @@ export default {
     top: 13,
     height: 4,
     borderRadius: 10,
-    backgroundColor: 'white',
-    border: '1px solid #2771e2',
+    backgroundColor: '#99c1ff',
+    border: '1px solid #a0c6e8',
   },
   trackVertical: {
     position: 'absolute',

js/utils/handle.js

@@ -13,9 +13,9 @@ export function injectStyle(): void {
 }
 
 export function removeStyle(): void {
-  if (canUseDOM && styleElement) {
-    document.body.removeChild(styleElement);
-  }
+  // if (canUseDOM && styleElement) {
+  //   document.body.removeChild(styleElement);
+  // }
 }
 
 export function calculateStyle(styles: Object, state: Object, props: Object): Object {

package.json

@@ -45,6 +45,7 @@
     "mocha": "^2.4.5",
     "postcss-loader": "^0.9.1",
     "precss": "^1.4.0",
+    "prop-types": "^15.5.8",
     "react": "^15.0.1",
     "react-addons-test-utils": "^15.0.2",
     "react-dom": "^15.0.1",
@@ -71,5 +72,6 @@
     "name": "Jyoti Puri",
     "email": "jyotipuri@gmail.com"
   },
-  "license": "MIT"
+  "license": "MIT",
+  "dependencies": {}
 }