|
|
|
@ -8,6 +8,7 @@
|
|
|
|
|
|
|
|
|
|
````jsx
|
|
|
|
|
var Slider = antd.Slider;
|
|
|
|
|
var Icon = antd.Icon;
|
|
|
|
|
|
|
|
|
|
var IconSlider = React.createClass({
|
|
|
|
|
getInitialState() {
|
|
|
|
@ -15,18 +16,9 @@ var IconSlider = React.createClass({
|
|
|
|
|
var min = this.props.min;
|
|
|
|
|
var mid = ((max - min) / 2).toFixed(5);
|
|
|
|
|
|
|
|
|
|
var preIcon, nextIcon;
|
|
|
|
|
if (this.props.value >= mid) {
|
|
|
|
|
preIcon = this.props.icon[0];
|
|
|
|
|
nextIcon = this.props.icon[1] + ' anticon-highlight';
|
|
|
|
|
} else {
|
|
|
|
|
preIcon = this.props.icon[0] + ' anticon-highlight';
|
|
|
|
|
nextIcon = this.props.icon[1];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
preIcon: preIcon,
|
|
|
|
|
nextIcon: nextIcon,
|
|
|
|
|
preIconClass: this.props.value >= mid ? '' : 'anticon-highlight',
|
|
|
|
|
nextIconClass: this.props.value >= mid ? 'anticon-highlight' : '',
|
|
|
|
|
mid: mid,
|
|
|
|
|
sliderValue: this.props.value
|
|
|
|
|
};
|
|
|
|
@ -34,18 +26,11 @@ var IconSlider = React.createClass({
|
|
|
|
|
|
|
|
|
|
handleChange(v) {
|
|
|
|
|
var preIcon, nextIcon;
|
|
|
|
|
if (v >= this.state.mid) {
|
|
|
|
|
preIcon = this.props.icon[0];
|
|
|
|
|
nextIcon = this.props.icon[1] + ' anticon-highlight';
|
|
|
|
|
} else {
|
|
|
|
|
preIcon = this.props.icon[0] + ' anticon-highlight';
|
|
|
|
|
nextIcon = this.props.icon[1];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
this.setState(
|
|
|
|
|
{
|
|
|
|
|
preIcon: preIcon,
|
|
|
|
|
nextIcon: nextIcon,
|
|
|
|
|
preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
|
|
|
|
|
nextIconClass: v >= this.state.mid ? 'anticon-highlight': '',
|
|
|
|
|
sliderValue: v
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
@ -54,8 +39,8 @@ var IconSlider = React.createClass({
|
|
|
|
|
render() {
|
|
|
|
|
return (
|
|
|
|
|
<div className="iconWrapper">
|
|
|
|
|
<i className={this.state.preIcon}></i>
|
|
|
|
|
<i className={this.state.nextIcon}></i>
|
|
|
|
|
<Icon className={this.state.preIconClass} type={this.props.icon[0]} />
|
|
|
|
|
<Icon className={this.state.nextIconClass} type={this.props.icon[1]} />
|
|
|
|
|
<Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} />
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
@ -63,7 +48,7 @@ var IconSlider = React.createClass({
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
React.render(
|
|
|
|
|
<IconSlider min={0} max={20} value={0} icon={['anticon anticon-lock', 'anticon anticon-unlock']} />
|
|
|
|
|
<IconSlider min={0} max={20} value={0} icon={['lock', 'unlock']} />
|
|
|
|
|
, document.getElementById('components-slider-demo-icon-slider'));
|
|
|
|
|
````
|
|
|
|
|
|
|
|
|
|