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 (
    <div style={{ width: 400 }}>
      <div style={{ display: 'flex' }}>
        <Range
          value={valueInc}
          // @ts-ignore
          onChange={setValueInc}
          min={0}
          max={100}
          step={5}
          style={{ marginRight: 10 }}
        />

        <Input
          style={{ width: '60px' }}
          value={valueInc}
          onChange={setValueInc as any}
        />
      </div>
      <div style={{ display: 'flex', marginTop: 20 }}>
        <Icon
          type="cry"
          style={{
            marginRight: 10,
            color: `rgba(50,50,50, ${(100 - valueInc) / 100})`,
          }}
        />
        <Range
          value={valueInc}
          // @ts-ignore
          onProcess={setValueInc}
          min={0}
          max={100}
          style={{ marginRight: 10 }}
        />
        <Icon
          type="smile"
          style={{ color: `rgba(50,50,50, ${valueInc / 100})` }}
        />
      </div>
    </div>
  );
};

ReactDOM.render(
  <Demo />,
  document.getElementById('range-demo-3'),
);