office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
40 lines • 2.65 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Slider_1 = require("office-ui-fabric-react/lib/Slider");
require("./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_1.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_1.Slider, { label: "Disabled example:", min: 50, max: 500, step: 50, defaultValue: 300, showValue: true, disabled: true }),
React.createElement(Slider_1.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_1.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_1.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_1.Slider, { label: "Controlled example:", max: 10, vertical: true, showValue: true })))));
};
return SliderBasicExample;
}(React.Component));
exports.SliderBasicExample = SliderBasicExample;
//# sourceMappingURL=Slider.Basic.Example.js.map