office-ui-fabric-react/lib/components/Slider/examples/Slider.Basic.Example.js

Reusable React components for building experiences for Office 365.

import * as tslib_1 from "tslib";
import * as React from 'react';
import { Slider } from 'office-ui-fabric-react/lib/Slider';
import './Slider.Basic.Example.scss';
var SliderBasicExample = /** @class */ (function (_super) {
    tslib_1.__extends(SliderBasicExample, _super);
    function SliderBasicExample(props) {
        var _this = _super.call(this, props) || this;
        _this.state = {
            value: 0
        };
        return _this;
    }
    SliderBasicExample.prototype.render = function () {
        var _this = this;
        return (React.createElement("div", { className: "ms-basicSlider" },
            React.createElement("div", { className: "ms-SliderBasicExample" },
                React.createElement(Slider, { label: "Basic example:", min: 1, max: 3, step: 1, defaultValue: 2, showValue: true, 
                    // tslint:disable-next-line:jsx-no-lambda
                    onChange: function (value) { return console.log(value); } }),
                React.createElement(Slider, { label: "Disabled example:", min: 50, max: 500, step: 50, defaultValue: 300, showValue: true, disabled: true }),
                React.createElement(Slider, { label: "Controlled example:", max: 10, value: this.state.value, 
                    // tslint:disable-next-line:jsx-no-lambda
                    onChange: function (value) { return _this.setState({ value: value }); }, showValue: true })),
            React.createElement("div", { className: "ms-SliderVertical " },
                React.createElement("div", { className: "ms-verticalBox" },
                    React.createElement(Slider, { label: "Basic example:", min: 1, max: 3, step: 1, defaultValue: 2, showValue: true, vertical: true, 
                        // tslint:disable-next-line:jsx-no-lambda
                        onChange: function (value) { return console.log(value); } })),
                React.createElement("div", { className: "ms-verticalBox" },
                    React.createElement(Slider, { label: "Disabled example:", min: 50, max: 500, step: 50, defaultValue: 300, showValue: true, vertical: true, disabled: true })),
                React.createElement("div", { className: "ms-verticalBox" },
                    React.createElement(Slider, { label: "Controlled example:", max: 10, vertical: true, showValue: true })))));
    };
    return SliderBasicExample;
}(React.Component));
export { SliderBasicExample };
//# sourceMappingURL=Slider.Basic.Example.js.map