"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SliderBasicExample = void 0;
var React = require("react");
var react_1 = require("@fluentui/react");
var stackStyles = { root: { maxWidth: 300 } };
var stackTokens = { childrenGap: 20 };
var sliderAriaValueText = function (value) { return value + " percent"; };
var sliderValueFormat = function (value) { return value + "%"; };
var SliderBasicExample = function () {
    var _a = React.useState(0), sliderValue = _a[0], setSliderValue = _a[1];
    var sliderOnChange = function (value) { return setSliderValue(value); };
    return (React.createElement(react_1.Stack, { tokens: stackTokens, styles: stackStyles },
        React.createElement(react_1.Slider, null),
        React.createElement(react_1.Slider, { label: "Snapping slider example", min: 0, max: 50, step: 10, defaultValue: 20, showValue: true, snapToStep: true }),
        React.createElement(react_1.Slider, { label: "Disabled example", min: 50, max: 500, step: 50, defaultValue: 300, showValue: true, disabled: true }),
        React.createElement(react_1.Slider, { label: "Controlled example", max: 10, value: sliderValue, showValue: true, 
            // eslint-disable-next-line react/jsx-no-bind
            onChange: sliderOnChange }),
        React.createElement(react_1.Slider, { label: "Example with formatted value", max: 100, ariaValueText: sliderAriaValueText, valueFormat: sliderValueFormat, showValue: true }),
        React.createElement(react_1.Slider, { label: "Origin from zero", min: -5, max: 5, step: 1, defaultValue: 2, showValue: true, originFromZero: true })));
};
exports.SliderBasicExample = SliderBasicExample;
//# sourceMappingURL=Slider.Basic.Example.js.map