---
title: tipFormmater
order: 5
---

tipFormatter 示例

````jsx
import { Range } from 'ice';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: 128
    };
  }

  //onChange,移动结束时,如果startValue和endValue不等,会触发这个事件
  onChange(value) {
    console.log('onChange value:', value);
  }

  //mouseDown以及onMove的时候,如果startValue和endValue不等,会触发这个事件.如果是受控组件,改变state要写在这个事件里
  onProcess(value) {
    console.log('onProcess');
    this.setState({ value });
  }

  formatter(value) {
    return '$' + value;
  }
  render() {
    return (
      <div style={{ width: '400px', margin: '50px' }}>
        <p>范围 0 ~ 1024</p>
        <div style={{ width: '400px', marginTop: '50px' }}>

          <Range
            defaultValue={256}
            tipFormatter={this.formatter.bind(this)}
            value={this.state.value}
            onChange={this.onChange.bind(this)}
            onProcess={this.onProcess.bind(this)}
            min={0}
            max={1024}
            marks={[0, 1024]}
          />
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, mountNode);
````