Slider

NPM | Github

Installation

• yarn add @propellerads/slider or npm install @propellerads/slider -S

How to use

• import Slider from '@propellerads/slider';
• And render

const marks = [
    {
        dot: 0,
        label: 0,
        markStyles: {
            position: 'relative',
            top: '-6px',
        },
    },
    {
        dot: 100,
        label: 100,
        markStyles: {
            position: 'relative',
            top: '-6px',
        },
    },
];

    <Slider
        value={number('Value', 0)}
        marks={marks}
        max={number('Max', 100)}
        min={number('Min', 0)}
        step={number('Step', 5)}
        onChange={(value) => {
            alert(value);
            action(value);
        }}
    />

Props

• value (number, required): current slider value
• marks (IMark[], required): array of marks to display
  • IMark: { dot: number; label: string; text?: string; styles?: React.CSSProperties; markStyles?: React.CSSProperties; }
• max (number, required): maximum value
• min (number, default: 0): minimum value
• step (number, default: 1): step between values
• onChange ((value: number) => void): change handler

Notes

• Since v0.2.0 the component is written in TypeScript and ships type definitions.