Slider: Expose prop to control visibility of input (#113084)

expose prop to control visibility of slider input

packages/grafana-ui/src/components/Slider/Slider.test.tsx

@@ -33,6 +33,18 @@ describe('Slider', () => {
     expect(sliderInput).toHaveValue('10');
   });
 
+  it('hides the slider input if showInput is false', () => {
+    render(<Slider {...sliderProps} showInput={false} />);
+
+    const slider = screen.getByRole('slider');
+    const sliderInput = screen.queryByRole('textbox');
+
+    expect(slider).toHaveAttribute('aria-valuemin', '10');
+    expect(slider).toHaveAttribute('aria-valuemax', '20');
+    expect(slider).toHaveAttribute('aria-valuenow', '10');
+    expect(sliderInput).not.toBeInTheDocument();
+  });
+
   it('renders correct contents with a value', () => {
     render(<Slider {...sliderProps} value={15} />);
 

packages/grafana-ui/src/components/Slider/Slider.tsx

@@ -29,6 +29,7 @@ export const Slider = ({
   marks,
   included,
   inputId,
+  showInput = true,
 }: SliderProps) => {
   const isHorizontal = orientation === 'horizontal';
   const styles = useStyles2(getStyles, isHorizontal, Boolean(marks));
@@ -114,17 +115,19 @@ export const Slider = ({
           included={included}
         />
 
-        <Input
-          type="text"
-          width={7.5}
-          className={cx(styles.sliderInputField, ...sliderInputFieldClassNames)}
-          value={sliderValue}
-          onChange={onSliderInputChange}
-          onBlur={onSliderInputBlur}
-          min={min}
-          max={max}
-          id={inputId}
-        />
+        {showInput && (
+          <Input
+            type="text"
+            width={7.5}
+            className={cx(styles.sliderInputField, ...sliderInputFieldClassNames)}
+            value={sliderValue}
+            onChange={onSliderInputChange}
+            onBlur={onSliderInputBlur}
+            min={min}
+            max={max}
+            id={inputId}
+          />
+        )}
       </div>
     </div>
   );

packages/grafana-ui/src/components/Slider/types.ts

@@ -14,6 +14,8 @@ interface CommonSliderProps {
   marks?: SliderMarks;
   /** If the value is true, it means a continuous value interval, otherwise, it is a independent value. */
   included?: boolean;
+  /** Controls visibility of the input field. Defaults to true. */
+  showInput?: boolean;
 }
 export interface SliderProps extends CommonSliderProps {
   value?: number;