fix: render prop should be passed in

src/withLogic.js

@@ -144,7 +144,11 @@ function withLogic(Template = ChoicesDisplay) {
         typeof this.props.render === 'function' ||
         typeof this.props.children === 'function'
       ) {
-        children = withRenderProp(templateProps)
+        children = withRenderProp({
+          ...templateProps,
+          render: this.props.render,
+          children: this.props.children
+        })
       } else if (Template) {
         children = <Template {...templateProps} />
       }

stories/index.js

@@ -2,9 +2,11 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 
+import cx from 'classnames-es'
 import Choices from '..'
 
-import './styles.css'
+import './styles/basic.css'
+import './styles/slider-like.css'
 
 const choices = storiesOf('Choices', module)
 
@@ -13,7 +15,7 @@ choices.add('with default template', () => (
     <input type="text" name="thing_1" value="unrelated" />
     <input type="text" name="thing_2" value="fields" />
     <Choices
-      name="speed"
+      name="basic_speed"
       availableStates={[
         { value: '<S', settable: false },
         { value: 'S' },
@@ -27,3 +29,67 @@ choices.add('with default template', () => (
     />
   </div>
 ))
+
+choices.add('with slider-like template', () => (
+  <div className="choices__container">
+    <input type="text" name="thing_1" value="unrelated" />
+    <input type="text" name="thing_2" value="fields" />
+    <Choices
+      name="slider_like_speed"
+      availableStates={[
+        { value: '<S', settable: false },
+        { value: 'S' },
+        { value: 'S<M', settable: false },
+        { value: 'M' },
+        { value: 'M<F', settable: false },
+        { value: 'F' },
+        { value: '>F', settable: false }
+      ]}
+      defaultValue="M"
+    >
+      {({
+        states,
+        defaultValue,
+        focusedValue,
+        hoveredValue,
+        selectedValue,
+        setValue,
+        hoverValue,
+        previousValue,
+        nextValue
+      }) => (
+        <div className="speed-choices-container">
+          <div className="speed-choices">
+            {states.map((state, idx) => (
+              <div
+                key={`choice-${idx}`}
+                id={`choice-${state.value}`}
+                onMouseOver={hoverValue.bind(null, state.value)}
+                onClick={setValue.bind(null, state.value)}
+                className={cx('speed-choice', {
+                  'speed-choice__not-settable': state.settable === false,
+                  'speed-choice__focused': state.value === focusedValue,
+                  'speed-choice__hovered': state.value === hoveredValue,
+                  'speed-choice__selected':
+                    state.value === (selectedValue || defaultValue)
+                })}
+              >
+                <div className="speed-choice__input-container">
+                  <button
+                    tabIndex={state.value === selectedValue ? 0 : -1}
+                    className={cx('speed-choice__input', state.inputClassName)}
+                  >
+                    <span className="speed-choice__label">{state.value}</span>
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+          <div className="speed-choices-background">
+            <div className="speed-choices-horizontal-bar" />
+          </div>
+        </div>
+      )}
+    </Choices>
+  </div>
+))

stories/styles/slider-like.css

@@ -0,0 +1,115 @@
+.speed-choices-container {
+  position: relative;
+  width: 120px;
+
+  padding: 5px; /* TODO: This is temporary... */
+}
+.speed-choices-background {
+  position: absolute;
+
+  display: flex;
+  z-index: -1;
+
+  height: 14px;
+  width: 100%;
+}
+.speed-choices-horizontal-bar {
+  align-self: center;
+  background-color: lightgrey;
+  display: block;
+  z-index: -1;
+  height: 2px;
+  width: 100%;
+}
+
+.speed-choices {
+  position: absolute;
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+.speed-choice {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  height: 100%;
+  flex: 1 0 10%;
+
+  cursor: pointer;
+}
+.speed-choice__not-settable {
+  visibility: hidden;
+  cursor: default;
+}
+.speed-choice__input-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+.speed-choice__input {
+  align-self: center;
+  background-color: #beccdc;
+  border: none;
+  border-radius: 4px;
+  outline: none;
+  padding: 0;
+  cursor: pointer;
+
+  height: 4px;
+  width: 4px;
+
+  margin-left: -2px;
+}
+.speed-choice__input:active {
+  padding: 0;
+}
+.speed-choice:first-child {
+  flex: 0 0 4px;
+}
+.speed-choice:first-child .speed-choice__input {
+  align-self: flex-start;
+}
+.speed-choice:last-child {
+  flex: 0 0 4px;
+}
+.speed-choice:last-child .speed-choice__input {
+  align-self: flex-end;
+}
+
+.speed-choice__label {
+  display: none;
+}
+.speed-choice__hovered .speed-choice__input {
+  border: 2px solid lightblue;
+  border-radius: 8px;
+
+  height: 8px;
+  width: 8px;
+
+  margin-left: -4px;
+}
+
+.speed-choice__focused .speed-choice__input {
+  display: inline-block;
+  border: 2px solid lightgreen;
+}
+.speed-choice__input::-moz-focus-inner {
+  border: 0;
+  outline: none;
+}
+
+.speed-choice__selected .speed-choice__input {
+  background-color: red;
+  border-radius: 14px;
+  color: white;
+
+  height: 14px;
+  width: 14px;
+
+  margin-left: -7px;
+}
+.speed-choice__selected .speed-choice__label {
+  display: block;
+  color: white;
+  font-size: 8px;
+}