Projector: Inspector-panel neighbors slider editable (#733)

Make the neighbors slider editable in the inspector panel of the
projector. This allows for finer-grained control on neighborhood size
when selecting groups, which becomes important during interactive
supervision.

Author: francoisluus

Diff for: tensorboard/plugins/projector/vz_projector/vz-projector-inspector-panel.html

@@ -165,7 +165,14 @@
 }
 
 #nn-slider {
-  margin: 0 -12px 0 10px;
+  margin: 0 -12px 0 0px;
+  --paper-slider-input: {
+    width: 66px
+  };
+  --paper-input-container-input-webkit-spinner: {
+    -webkit-appearance: none;
+    margin: 0;
+  };
 }
 
 .euclidean {
@@ -220,8 +227,7 @@
           <paper-tooltip position="bottom" animation-delay="0" fit-to-visible-bounds>
             The number of neighbors (in the original space) to show when clicking on a point.
           </paper-tooltip>
-          <paper-slider id="nn-slider" pin min="5" max="1000" value="100"></paper-slider>
-          <span class="nn-count"></span>
+          <paper-slider id="nn-slider" pin min="5" max="999" value="100" editable></paper-slider>
         </div>
       </div>
       <div class="distance">

Diff for: tensorboard/plugins/projector/vz_projector/vz-projector-inspector-panel.ts

@@ -303,8 +303,6 @@ export class InspectorPanel extends PolymerClass {
     const numNNInput = this.$$('#nn-slider') as HTMLInputElement;
     const updateNumNN = () => {
       this.numNN = +numNNInput.value;
-      (this.querySelector('.num-nn .nn-count') as HTMLSpanElement).innerText =
-          '' + this.numNN;
       if (this.selectedPointIndices != null) {
         this.projectorEventContext.notifySelectionChanged(
             [this.selectedPointIndices[0]]);