make more customizable

README.md

@@ -85,6 +85,9 @@ onChange                |Function                            |`onChange` callbac
 onChangeComplete        |Function                            |`onChangeComplete` callback
 step                    |number                              |Increment/decrement value
 value                   |number | Object.<number> |Current value(s) (required)
+Track                   |Function                            |Override default Track Component
+Slider                  |Function                            |Override default Slider Component
+Label                   |Function                            |Override default Label Component
 
 ## Development
 

src/InputRange/InputRange.js

@@ -3,9 +3,9 @@
  */
 
 import React from 'react';
-import Slider from './Slider';
-import Track from './Track';
-import Label from './Label';
+import { default as DefaultSlider } from './Slider';
+import { default as DefaultTrack } from './Track';
+import { default as DefaultLabel } from './Label';
 import defaultClassNames from './defaultClassNames';
 import valueTransformer from './valueTransformer';
 import { autobind, captialize, distanceTo, isDefined, isObject, length } from './util';
@@ -163,7 +163,7 @@ function getKeyByPosition(inputRange, position) {
  * @return {Array.<string>} Array of HTML
  */
 function renderSliders(inputRange) {
-  const { classNames } = inputRange.props;
+  const { classNames, Slider, Label } = inputRange.props;
   const sliders = [];
   const keys = getKeys(inputRange);
   const values = valueTransformer.valuesFromProps(inputRange);
@@ -196,7 +196,8 @@ function renderSliders(inputRange) {
         percentage={ percentage }
         ref={ ref }
         type={ key }
-        value={ value } />
+        value={ value }
+        Label={ Label } />
     );
 
     sliders.push(slider);
@@ -549,7 +550,7 @@ export default class InputRange extends React.Component {
    * @return {string} Component JSX
    */
   render() {
-    const { classNames } = this.props;
+    const { classNames, Label, Track, children } = this.props;
     const componentClassName = getComponentClassName(this);
     const values = valueTransformer.valuesFromProps(this);
     const percentages = valueTransformer.percentagesFromValues(this, values);
@@ -586,6 +587,8 @@ export default class InputRange extends React.Component {
           { this.props.maxValue }
         </Label>
 
+        { children }
+
         { renderHiddenInputs(this) }
       </div>
     );
@@ -610,6 +613,10 @@ export default class InputRange extends React.Component {
  * @property {Function} onChangeComplete
  * @property {Function} step
  * @property {Function} value
+ * @property {Function} Track
+ * @property {Function} Slider
+ * @property {Function} Label
+ * @property {Function} children
  */
 InputRange.propTypes = {
   ariaLabelledby: React.PropTypes.string,
@@ -627,6 +634,10 @@ InputRange.propTypes = {
   onChangeComplete: React.PropTypes.func,
   step: React.PropTypes.number,
   value: maxMinValuePropType,
+  Track: React.PropTypes.func,
+  Slider: React.PropTypes.func,
+  Label: React.PropTypes.func,
+  children: React.PropTypes.any,
 };
 
 /**
@@ -641,6 +652,9 @@ InputRange.propTypes = {
  * @property {number} minValue
  * @property {number} step
  * @property {Range|number} value
+ * @property {Function} Track
+ * @property {Function} Slider
+ * @property {Function} Label
  */
 InputRange.defaultProps = {
   classNames: defaultClassNames,
@@ -652,4 +666,7 @@ InputRange.defaultProps = {
   minValue: 0,
   step: 1,
   value: null,
+  Track: DefaultTrack,
+  Slider: DefaultSlider,
+  Label: DefaultLabel,
 };

src/InputRange/Slider.js

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import Label from './Label';
+import { default as DefaultLabel } from './Label';
 import { autobind } from './util';
 
 /**
@@ -144,7 +144,7 @@ export default class Slider extends React.Component {
    * @return {string} Component JSX
    */
   render() {
-    const classNames = this.props.classNames;
+    const { classNames, Label, children } = this.props;
     const style = getStyle(this);
 
     return (
@@ -174,6 +174,8 @@ export default class Slider extends React.Component {
           onTouchStart={ this.handleTouchStart }
           role="slider">
         </a>
+
+        { children }
       </span>
     );
   }
@@ -193,6 +195,8 @@ export default class Slider extends React.Component {
  * @property {Function} percentage
  * @property {Function} type
  * @property {Function} value
+ * @property {Function} Label
+ * @property {Function} children
  */
 Slider.propTypes = {
   ariaLabelledby: React.PropTypes.string,
@@ -206,4 +210,13 @@ Slider.propTypes = {
   percentage: React.PropTypes.number.isRequired,
   type: React.PropTypes.string.isRequired,
   value: React.PropTypes.number.isRequired,
+  Label: React.PropTypes.func,
+  children: React.PropTypes.any,
+};
+
+/**
+ * @property {Function} Label
+ */
+Slider.defaultProps = {
+  Label: DefaultLabel,
 };

src/InputRange/index.js

@@ -3,6 +3,9 @@
  */
 
 import InputRange from './InputRange';
+import Track from './Track';
+import Slider from './Slider';
+import Label from './Label';
 
 /**
  * An object describing the position of a point
@@ -19,3 +22,4 @@ import InputRange from './InputRange';
  */
 
 export default InputRange;
+export {Track, Slider, Label};