Bug Fix: update the range input widget to only show the slider when m…

…in and max are different (#6591)

## Motivation for features / changes
When teamfooding the hparams in timeseries feature we discovered that
the interval filter widget doesn't look good when there is only a single
value. This is actually due to the `tb-range-input` widget looking bad
when the min and the max are equal. I'm opting to simply not show the
slider when `min === max`

For Googlers:
https://screenshot.googleplex.com/5rZbjsd6ijp8dkY

tensorboard/webapp/widgets/range_input/range_input_component.ng.html

@@ -42,7 +42,7 @@
 ></mat-slider>
 
 <ng-template #range>
-  <span class="container" #container>
+  <span *ngIf="min !== max" class="container" #container>
     <span class="slider-track"></span>
     <span
       class="slider-track-fill"

tensorboard/webapp/widgets/range_input/range_input_test.ts

@@ -147,6 +147,7 @@ describe('range input test', () => {
         return debugEl.style.left;
       });
     }
+
     describe('single selection', () => {
       it('renders correct slider value', () => {
         const {fixture} = createComponent({lowerValue: 2});
@@ -182,15 +183,26 @@ describe('range input test', () => {
         expect(getRangeThumbsStyleLeft(fixture)).toEqual(['80%', '40%']);
       });
 
-      it('puts thumb at 50% when min === max', () => {
+      it('render slider when min !== max', () => {
         const {fixture} = createComponent({
-          min: 10,
-          max: 10,
-          lowerValue: 10,
-          upperValue: 10,
+          lowerValue: 2,
+          upperValue: 4,
+          min: 3,
+          max: 4,
         });
+        expect(
+          fixture.debugElement.query(By.css('.slider-track'))
+        ).toBeTruthy();
+      });
 
-        expect(getRangeThumbsStyleLeft(fixture)).toEqual(['50%', '50%']);
+      it('does not render slider when min === max', () => {
+        const {fixture} = createComponent({
+          lowerValue: 2,
+          upperValue: 4,
+          min: 3,
+          max: 3,
+        });
+        expect(fixture.debugElement.query(By.css('.slider-track'))).toBeNull();
       });
     });
   });
@@ -463,21 +475,6 @@ describe('range input test', () => {
           source: RangeInputSource.SLIDER,
         });
       });
-
-      it('does not change anything when min === max', () => {
-        const {fixture, onRangeValuesChanged} = createComponent({
-          min: 10,
-          max: 10,
-          lowerValue: 10,
-          upperValue: 10,
-        });
-
-        const [leftThumb] = getThumbsOnRange(fixture);
-        startMovingThumb(leftThumb);
-
-        moveThumb(leftThumb, 250);
-        expect(onRangeValuesChanged).not.toHaveBeenCalled();
-      });
     });
   });