import './demo3.css';
import Icon from '../../icon';
import Input from '../../input';
import Range from '..';
import React from 'react';
import ReactDOM from 'react-dom';
const Demo = () => {
    const [valueInc, setValueInc] = React.useState(30);
    return (React.createElement("div", { style: { width: 400 } },
        React.createElement("div", { style: { display: 'flex' } },
            React.createElement(Range, { value: valueInc, 
                // @ts-ignore
                onChange: setValueInc, min: 0, max: 100, step: 5, style: { marginRight: 10 } }),
            React.createElement(Input, { style: { width: '60px' }, value: valueInc, onChange: setValueInc })),
        React.createElement("div", { style: { display: 'flex', marginTop: 20 } },
            React.createElement(Icon, { type: "cry", style: {
                    marginRight: 10,
                    color: `rgba(50,50,50, ${(100 - valueInc) / 100})`,
                } }),
            React.createElement(Range, { value: valueInc, 
                // @ts-ignore
                onProcess: setValueInc, min: 0, max: 100, style: { marginRight: 10 } }),
            React.createElement(Icon, { type: "smile", style: { color: `rgba(50,50,50, ${valueInc / 100})` } }))));
};
ReactDOM.render(React.createElement(Demo, null), document.getElementById('range-demo-3'));
