import { jsx as _jsx } from "react/jsx-runtime";
import styled from "styled-components";
import Slider from "./index";
export default {
    title: "Controls/Slider",
};
const Wrapper = styled.div `
  padding: 50px;
`;
const toPrc = (val) => `${(100 * val).toFixed(0)} %`;
export const enabled = () => (_jsx(Wrapper, { children: _jsx(Slider, { defaultValue: 1.5, onChange: (e, val) => console.info(val), step: 0.1, min: 1, max: 3, formatValue: toPrc }) }));
export const disabled = () => (_jsx(Wrapper, { children: _jsx(Slider, { defaultValue: 1.5, onChange: (e, val) => console.info(val), step: 0.1, min: 1, max: 3, disabled: true, formatValue: toPrc }) }));
const toSuffixed = (val) => {
    if (val >= 1_000_000) {
        return `${(val / 1_000_000).toFixed(1)}M`;
    }
    else if (val >= 10_000) {
        return `${(val / 1_000).toFixed(1)}K`;
    }
    else {
        return val.toString();
    }
};
export const withSuffixFormatter = () => (_jsx(Wrapper, { children: _jsx(Slider, { defaultValue: 0, onChange: (e, val) => console.info(val), step: 100, min: 0, max: 1_000_000, formatValue: toSuffixed }) }));
export const withValueLabels = () => (_jsx(Wrapper, { children: _jsx(Slider, { defaultValue: 0, onChange: (e, val) => console.info(val), step: 1 / 3, min: 0, max: 1, formatValue: toPrc, marks: [
            {
                value: 0,
                label: "0%"
            },
            {
                value: 1 / 3,
                label: "33%"
            },
            {
                value: 2 / 3,
                label: "66%"
            },
            {
                value: 1,
                label: "100%"
            },
        ] }) }));
//# sourceMappingURL=index.stories.js.map