import Range from '..';
import React from 'react';
import ReactDOM from 'react-dom';
const style = {
    marginBottom: '15px',
};
const styleX3 = {
    marginBottom: '45px',
};
class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: [10, 300],
        };
    }
    // Controlled. onChange will be triggered when startValue isn't equal to endValue after sliding
    onChange(value) {
        console.log('onChange value:', value);
        this.setState({ value });
    }
    // This callback will be triggered when startValue and endValue aren't equal after mousedown/mousemove. You shouldn't call setState here.
    onProcess(value) {
        // this.setState({value});
        console.log('onProcess: ', value);
    }
    render() {
        return (React.createElement("div", { style: { width: '400px', margin: '50px' } },
            React.createElement(Range, { fixedWidth: true, defaultValue: [20, 40], style: style }),
            React.createElement("h4", null, "with tooltipVisible"),
            React.createElement(Range, { tooltipVisible: true, fixedWidth: true, defaultValue: [70, 90], style: styleX3 }),
            React.createElement("h4", null, "with marks"),
            React.createElement(Range, { fixedWidth: true, step: 10, defaultValue: [20, 40], marks: 10, style: styleX3 }),
            React.createElement("h4", null, "with 0.01 step"),
            React.createElement(Range, { fixedWidth: true, defaultValue: [0.6, 0.7], min: 0.5, max: 1, step: 0.01 })));
    }
}
ReactDOM.render(React.createElement(App, null), document.getElementById('range-demo-2'));
