From c0cc7308576968f5c72ca30f8b02b8df888d3d7b Mon Sep 17 00:00:00 2001
From: Alex Paxton <thealexpaxton@gmail.com>
Date: Tue, 1 Aug 2017 20:43:45 -0700
Subject: [PATCH] WIP Pass values from GrooveKnob to parent

Signed-off-by: Jared Scheib <jared.scheib@gmail.com>
---
 ui/src/dashboards/components/Ranger.js | 25 +++++++++----------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/ui/src/dashboards/components/Ranger.js b/ui/src/dashboards/components/Ranger.js
index b755494ee6..70cd9aeb9d 100644
--- a/ui/src/dashboards/components/Ranger.js
+++ b/ui/src/dashboards/components/Ranger.js
@@ -1,6 +1,8 @@
 import React, {PropTypes} from 'react'
 import _ from 'lodash'
 
+import GrooveKnob from 'shared/components/GrooveKnob'
+
 // TODO: add logic for for Prefix, Suffix, Scale, and Multiplier
 const Ranger = ({onSetRange, axes}) => {
   const min = _.get(axes, ['y', 'bounds', '0'], '')
@@ -21,22 +23,13 @@ const Ranger = ({onSetRange, axes}) => {
         </div> */}
         <div className="form-group col-sm-6">
           <label htmlFor="min">Lower Bound</label>
-          <div className="one-or-any">
-            <div className="one-or-any--auto">auto</div>
-            <div className="one-or-any--toggle">
-              <div className="one-or-any--groove-knob" />
-            </div>
-            <input
-              className="form-control input-sm"
-              type="number"
-              name="min"
-              id="min"
-              value={min}
-              onChange={onSetRange}
-              placeholder="Custom Value"
-              disabled={true}
-            />
-          </div>
+          <GrooveKnob
+            onSetValues={({leftValue, rightValue}) => {
+              console.log(leftValue, rightValue)
+              // onSetRange()
+            }}
+            rightValue={Number(min)}
+          />
         </div>
         <div className="form-group col-sm-6">
           <label htmlFor="max">Upper Bound</label>