IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Slider: add step functionality (#27399)

Browse Source
This commit is contained in:
Russ 2020-09-08 09:00:16 -07:00 committed by GitHub
parent 32f99669ff
commit 248c195cca
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 14 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
packages/grafana-ui/src/components/Slider/Slider.story.tsx
View File

@ -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>
);
};

3
packages/grafana-ui/src/components/Slider/Slider.tsx
View File

@ -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}