From 248c195cca34d8432ec2c8b309f52d27420ed49a Mon Sep 17 00:00:00 2001
From: Russ <8377044+rdubrock@users.noreply.github.com>
Date: Tue, 8 Sep 2020 09:00:16 -0700
Subject: [PATCH] Slider: add step functionality (#27399)

---
 .../src/components/Slider/Slider.story.tsx          | 13 +++++++++++--
 .../grafana-ui/src/components/Slider/Slider.tsx     |  3 +++
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Slider/Slider.story.tsx b/packages/grafana-ui/src/components/Slider/Slider.story.tsx
index 3dc2fbf4725..d659092e86b 100644
--- a/packages/grafana-ui/src/components/Slider/Slider.story.tsx
+++ b/packages/grafana-ui/src/components/Slider/Slider.story.tsx
@@ -11,6 +11,7 @@ const getKnobs = () => {
   return {
     min: number('min', 0),
     max: number('max', 100),
+    step: boolean('enable step', false),
     orientation: select('orientation', ['horizontal', 'vertical'], 'horizontal'),
     reverse: boolean('reverse', true),
     singleValue: boolean('single value', false),
@@ -18,10 +19,18 @@ const getKnobs = () => {
 };
 
 const SliderWrapper = () => {
-  const { min, max, orientation, reverse, singleValue } = getKnobs();
+  const { min, max, orientation, reverse, singleValue, step } = getKnobs();
+  const stepValue = step ? 10 : undefined;
   return (
     <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>
   );
 };
diff --git a/packages/grafana-ui/src/components/Slider/Slider.tsx b/packages/grafana-ui/src/components/Slider/Slider.tsx
index 5b766c5f2a6..f0095930b3b 100644
--- a/packages/grafana-ui/src/components/Slider/Slider.tsx
+++ b/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. */
   value?: number[];
   reverse?: boolean;
+  step?: number;
   tooltipAlwaysVisible?: boolean;
   formatTooltipResult?: (value: number) => number | string;
   onChange?: (values: number[]) => void;
@@ -104,6 +105,7 @@ export const Slider: FunctionComponent<Props> = ({
   onAfterChange,
   orientation = 'horizontal',
   reverse,
+  step,
   formatTooltipResult,
   value,
   tooltipAlwaysVisible = true,
@@ -123,6 +125,7 @@ export const Slider: FunctionComponent<Props> = ({
         }}
         min={min}
         max={max}
+        step={step}
         defaultValue={value || [min, max]}
         tipFormatter={(value: number) => (formatTooltipResult ? formatTooltipResult(value) : value)}
         onChange={onChange}