Slider: updates story from knobs to control (#33983)

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

@@ -1,30 +1,47 @@
 import React from 'react';
 import { Slider } from '@grafana/ui';
-import { select, number, boolean } from '@storybook/addon-knobs';
+import { SliderProps } from './types';
+import { Story, Meta } from '@storybook/react';
 
 export default {
   title: 'Forms/Slider',
   component: Slider,
-};
+  parameters: {
+    controls: {
+      exclude: ['step', 'formatTooltipResult', 'onChange', 'onAfterChange', 'value', 'tooltipAlwaysVisible'],
+    },
+    knobs: {
+      disabled: true,
+    },
+  },
+  argTypes: {
+    isStep: { name: 'Step' },
+    orientation: { control: { type: 'select', options: ['horizontal', 'vertical'] } },
+  },
+} as Meta;
 
-const getKnobs = () => {
+interface StoryProps extends Partial<SliderProps> {
-  return {
+  isStep: boolean;
-    min: number('min', 0),
+}
-    max: number('max', 100),
-    step: boolean('enable step', false),
-    orientation: select('orientation', ['horizontal', 'vertical'], 'horizontal'),
-    reverse: boolean('reverse', false),
-  };
-};
 
-const SliderWrapper = () => {
+export const Basic: Story<StoryProps> = (args) => {
-  const { min, max, orientation, reverse, step } = getKnobs();
-  const stepValue = step ? 10 : undefined;
   return (
     <div style={{ width: '300px', height: '300px' }}>
-      <Slider min={min} max={max} step={stepValue} orientation={orientation} value={10} reverse={reverse} />
+      <Slider
+        step={args.isStep ? 10 : undefined}
+        value={args.value}
+        min={args.min as number}
+        max={args.max as number}
+        {...args}
+      />
     </div>
   );
 };
-
+Basic.args = {
-export const basic = () => <SliderWrapper />;
+  min: 0,
+  max: 100,
+  value: 10,
+  isStep: false,
+  orientation: 'horizontal',
+  reverse: false,
+};