"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Slider_1 = require("office-ui-fabric-react/lib-commonjs/Slider");
var Stack_1 = require("office-ui-fabric-react/lib-commonjs/Stack");
var stackStyles = { root: { maxWidth: 300 } };
var stackTokens = { childrenGap: 20 };
var sliderAriaValueText = function (value) { return value + " percent"; };
var sliderValueFormat = function (value) { return value + "%"; };
exports.SliderRangedExample = function () {
    var _a = React.useState(0), sliderValue = _a[0], setSliderValue = _a[1];
    var _b = React.useState(0), sliderLowerValue = _b[0], setSliderLowerValue = _b[1];
    var onChange = function (_, range) {
        setSliderLowerValue(range[0]);
        setSliderValue(range[1]);
    };
    return (React.createElement(React.Fragment, null,
        React.createElement(Stack_1.Stack, { tokens: stackTokens, styles: stackStyles },
            React.createElement(Slider_1.Slider, { ranged: true, label: "Range slider", min: 0, max: 10, defaultValue: 8, defaultLowerValue: 2 }),
            React.createElement(Slider_1.Slider, { ranged: true, label: "Snapping Range slider example", min: 0, max: 100, step: 10, defaultValue: 30, defaultLowerValue: 0, snapToStep: true }),
            React.createElement(Slider_1.Slider, { label: "Disabled example", min: 50, max: 500, step: 50, defaultValue: 300, showValue: true, disabled: true, ranged: true }),
            React.createElement(Slider_1.Slider, { label: "Controlled example", max: 100, ranged: true, value: sliderValue, lowerValue: sliderLowerValue, showValue: true, 
                // eslint-disable-next-line react/jsx-no-bind
                onChange: onChange }),
            React.createElement(Slider_1.Slider, { label: "Example with formatted value", max: 100, ariaValueText: sliderAriaValueText, valueFormat: sliderValueFormat, ranged: true, showValue: true }),
            React.createElement(Slider_1.Slider, { label: "Origin from zero", min: -5, max: 5, step: 1, defaultValue: 2, showValue: true, originFromZero: true, ranged: true })),
        React.createElement(Stack_1.Stack, { horizontal: true, tokens: stackTokens, styles: { root: { height: 200 } } },
            React.createElement(Slider_1.Slider // prettier-ignore
            , { label: "Range slider vertical", ranged: true, min: 1, max: 5, step: 1, defaultValue: 2, showValue: true, vertical: true }))));
};
//# sourceMappingURL=Slider.Ranged.Example.js.map