mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-12-05 05:28:20 +08:00
1.6 KiB
1.6 KiB
order | title | ||||
---|---|---|---|---|---|
2 |
|
zh-CN
滑块左右可以设置图标来表达业务含义。
en-US
You can add an icon beside the slider to make it meaningful.
import { Slider, Icon } from 'antd';
const IconSlider = React.createClass({
getInitialState() {
const max = this.props.max;
const min = this.props.min;
const mid = ((max - min) / 2).toFixed(5);
return {
preIconClass: this.props.value >= mid ? '' : 'anticon-highlight',
nextIconClass: this.props.value >= mid ? 'anticon-highlight' : '',
mid,
sliderValue: this.props.value,
};
},
handleChange(v) {
this.setState({
preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
nextIconClass: v >= this.state.mid ? 'anticon-highlight' : '',
sliderValue: v,
});
},
render() {
return (
<div className="icon-wrapper">
<Icon className={this.state.preIconClass} type={this.props.icon[0]} />
<Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} />
<Icon className={this.state.nextIconClass} type={this.props.icon[1]} />
</div>
);
},
});
ReactDOM.render(<IconSlider min={0} max={20} value={0} icon={['frown-o', 'smile-o']} />, mountNode);
.icon-wrapper {
position: relative;
padding: 0px 30px;
}
.icon-wrapper .anticon {
position: absolute;
top: -3px;
width: 16px;
height: 16px;
line-height: 1;
font-size: 16px;
color: #ccc;
}
.icon-wrapper .anticon:first-child {
left: 0;
}
.icon-wrapper .anticon:last-child {
right: 0;
}
.anticon.anticon-highlight {
color: #666;
}