Modify number() to support a range slider as an input type for a knob. (

#77)

* Modify number() to support a range slider as an input type for a knob.

* Style changes and lint fixes.

* Remove unwanted vars

README.md

@@ -113,6 +113,23 @@ const defaultValue = 78;
 const value = number(label, defaultValue);
 ```
 
+### number bound by range
+
+Allows you to get a number from the user using a range slider.
+
+```js
+const label = 'Temperature';
+const defaultValue = 73;
+const options = {
+   range: true,
+   min: 60,
+   max: 90,
+   step: 1,
+};
+
+const value = number(label, defaultValue, options);
+```
+
 ### color
 
 Allows you to get a color from the user.

example/stories/index.js

@@ -27,6 +27,8 @@ stories.add('with all knobs', () => {
 
   const bold = boolean('Bold', false);
   const selectedColor = color('Color', 'black');
+  const favoriteNumber = number('Favorite Number', 42);
+  const comfortTemp = number('Comfort Temp', 72, {range:true, min: 60, max: 90, step: 1});
 
   const passions = array('Passions', ['Fishing', 'Skiing']);
 
@@ -38,13 +40,16 @@ stories.add('with all knobs', () => {
   const style = {
     ...customStyle,
     fontWeight: bold ? 800: 400,
+    favoriteNumber: favoriteNumber,
     color: selectedColor,
   };
 
   return (
     <div style={style}>
       I'm {name} and I was born on "{moment(dob).format("DD MMM YYYY")}"
       I like: <ul>{passions.map((p, i) => <li key={i}>{p}</li>)}</ul>
+      <p>My favorite number is {favoriteNumber}.</p>
+      <p>My most comfortable room temperature is {comfortTemp} degrees Fahrenheit.</p>
     </div>
   );
 })

src/components/types/Number.js

@@ -14,20 +14,48 @@ const styles = {
   color: '#444',
 };
 
+
 class NumberType extends React.Component {
-  render() {
+
+  constructor(props) {
+    super(props);
+    this.renderNormal = this.renderNormal.bind(this);
+    this.renderRange = this.renderRange.bind(this);
+  }
+
+  renderNormal() {
     const { knob, onChange } = this.props;
 
-    return (
-      <input
-        id={knob.name}
-        ref="input"
-        style={styles}
-        value={knob.value}
-        type="number"
-        onChange={() => onChange(parseFloat(this.refs.input.value))}
-      />
-    );
+    return (<input
+      id={knob.name}
+      ref="input"
+      style={styles}
+      value={knob.value}
+      type="number"
+      onChange={() => onChange(parseFloat(this.refs.input.value))}
+    />);
+  }
+
+  renderRange() {
+    const { knob, onChange } = this.props;
+
+    return (<input
+      id={knob.name}
+      ref="input"
+      style={styles}
+      value={knob.value}
+      type="range"
+      min={knob.min}
+      max={knob.max}
+      step={knob.step}
+      onChange={() => onChange(parseFloat(this.refs.input.value))}
+    />);
+  }
+
+  render() {
+    const { knob } = this.props;
+
+    return knob.range ? this.renderRange() : this.renderNormal();
   }
 }
 

src/index.js

@@ -15,8 +15,23 @@ export function boolean(name, value) {
   return manager.knob(name, { type: 'boolean', value });
 }
 
-export function number(name, value) {
-  return manager.knob(name, { type: 'number', value });
+export function number(name, value, options = {}) {
+  const defaults = {
+    range: false,
+    min: 0,
+    max: 10,
+    step: 1,
+  };
+
+  const mergedOptions = { ...defaults, ...options };
+
+  const finalOptions = {
+    ...mergedOptions,
+    type: 'number',
+    value,
+  };
+
+  return manager.knob(name, ...finalOptions);
 }
 
 export function color(name, value) {