Slider: add step functionality (#27399)

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

@@ -11,6 +11,7 @@ const getKnobs = () => {
   return {
   return {
     min: number('min', 0),
     min: number('min', 0),
     max: number('max', 100),
     max: number('max', 100),
+    step: boolean('enable step', false),
     orientation: select('orientation', ['horizontal', 'vertical'], 'horizontal'),
     orientation: select('orientation', ['horizontal', 'vertical'], 'horizontal'),
     reverse: boolean('reverse', true),
     reverse: boolean('reverse', true),
     singleValue: boolean('single value', false),
     singleValue: boolean('single value', false),
@@ -18,10 +19,18 @@ const getKnobs = () => {
 };
 };
 
 
 const SliderWrapper = () => {
 const SliderWrapper = () => {
-  const { min, max, orientation, reverse, singleValue } = getKnobs();
+  const { min, max, orientation, reverse, singleValue, step } = getKnobs();
+  const stepValue = step ? 10 : undefined;
   return (
   return (
     <div style={{ width: '200px', height: '200px' }}>
     <div style={{ width: '200px', height: '200px' }}>
-      <Slider min={min} max={max} orientation={orientation} value={singleValue ? [10] : undefined} reverse={reverse} />
+      <Slider
+        min={min}
+        max={max}
+        step={stepValue}
+        orientation={orientation}
+        value={singleValue ? [10] : undefined}
+        reverse={reverse}
+      />
     </div>
     </div>
   );
   );
 };
 };

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

@@ -14,6 +14,7 @@ export interface Props {
   /** Set current positions of handle(s). If only 1 value supplied, only 1 handle displayed. */
   /** Set current positions of handle(s). If only 1 value supplied, only 1 handle displayed. */
   value?: number[];
   value?: number[];
   reverse?: boolean;
   reverse?: boolean;
+  step?: number;
   tooltipAlwaysVisible?: boolean;
   tooltipAlwaysVisible?: boolean;
   formatTooltipResult?: (value: number) => number | string;
   formatTooltipResult?: (value: number) => number | string;
   onChange?: (values: number[]) => void;
   onChange?: (values: number[]) => void;
@@ -104,6 +105,7 @@ export const Slider: FunctionComponent<Props> = ({
   onAfterChange,
   onAfterChange,
   orientation = 'horizontal',
   orientation = 'horizontal',
   reverse,
   reverse,
+  step,
   formatTooltipResult,
   formatTooltipResult,
   value,
   value,
   tooltipAlwaysVisible = true,
   tooltipAlwaysVisible = true,
@@ -123,6 +125,7 @@ export const Slider: FunctionComponent<Props> = ({
         }}
         }}
         min={min}
         min={min}
         max={max}
         max={max}
+        step={step}
         defaultValue={value || [min, max]}
         defaultValue={value || [min, max]}
         tipFormatter={(value: number) => (formatTooltipResult ? formatTooltipResult(value) : value)}
         tipFormatter={(value: number) => (formatTooltipResult ? formatTooltipResult(value) : value)}
         onChange={onChange}
         onChange={onChange}