@cimpress/react-components
Version:
React components to support the MCP styleguide
39 lines • 1.84 kB
JavaScript
import React, { Component } from 'react';
import { Slider } from '@cimpress/react-components';
export default class SliderDemo extends Component {
constructor() {
super(...arguments);
Object.defineProperty(this, "state", {
enumerable: true,
configurable: true,
writable: true,
value: {
slider1: 0,
slider2: 100,
slider3: 0,
slider4: 30,
}
});
Object.defineProperty(this, "onSelect", {
enumerable: true,
configurable: true,
writable: true,
value: variable => value => {
this.setState({ [variable]: value });
}
});
}
render() {
const { slider1, slider2, slider3, slider4 } = this.state;
return (React.createElement("div", { className: "row" },
React.createElement("div", { className: "col-md-3" },
React.createElement(Slider, { label: "Default Slider", value: slider1, onSelect: this.onSelect('slider1') })),
React.createElement("div", { className: "col-md-3" },
React.createElement(Slider, { label: "Variable range and increment", min: 50, max: 150, increment: 2, value: slider2, onSelect: this.onSelect('slider2') })),
React.createElement("div", { className: "col-md-3" },
React.createElement(Slider, { label: "Negative numbers and decimals", min: -1, max: 1, increment: 0.01, value: slider3, onSelect: this.onSelect('slider3') })),
React.createElement("div", { className: "col-md-3" },
React.createElement(Slider, { label: "Disabled Slider", disabled: true, value: slider4, onSelect: this.onSelect('slider4') }))));
}
}
//# sourceMappingURL=slider.js.map