diff --git a/packages/grafana-ui/src/components/Slider/Slider.test.tsx b/packages/grafana-ui/src/components/Slider/Slider.test.tsx
index e24ccd7e751..1fb4ab1c03a 100644
--- a/packages/grafana-ui/src/components/Slider/Slider.test.tsx
+++ b/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();
+
+ 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();
diff --git a/packages/grafana-ui/src/components/Slider/Slider.tsx b/packages/grafana-ui/src/components/Slider/Slider.tsx
index b41f41d0af7..d8d310fa92b 100644
--- a/packages/grafana-ui/src/components/Slider/Slider.tsx
+++ b/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}
/>
-
+ {showInput && (
+
+ )}
);
diff --git a/packages/grafana-ui/src/components/Slider/types.ts b/packages/grafana-ui/src/components/Slider/types.ts
index 812a8bed7d7..880bfd2f712 100644
--- a/packages/grafana-ui/src/components/Slider/types.ts
+++ b/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;