Commit 248c195c by Russ Committed by GitHub

Slider: add step functionality (#27399)

parent 32f99669
...@@ -11,6 +11,7 @@ const getKnobs = () => { ...@@ -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 = () => { ...@@ -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>
); );
}; };
......
...@@ -14,6 +14,7 @@ export interface Props { ...@@ -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> = ({ ...@@ -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> = ({ ...@@ -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}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment