mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Slider: add step functionality (#27399)
This commit is contained in:
parent
32f99669ff
commit
248c195cca
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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}
|
||||
|
Loading…
Reference in New Issue
Block a user