--- order: 2 title: zh-CN: 带 icon 的滑块 en-US: Slider with icon --- ## zh-CN 滑块左右可以设置图标来表达业务含义。 ## en-US You can add an icon beside the slider to make it meaningful. ````jsx import { Slider, Icon } from 'antd'; class IconSlider extends React.Component { state = { value: 0, } handleChange = (value) => { this.setState({ value }); } render() { const { max, min } = this.props; const { value } = this.state; const mid = ((max - min) / 2).toFixed(5); const preColor = value >= mid ? '' : 'rgba(0, 0, 0, .45)'; const nextColor = value >= mid ? 'rgba(0, 0, 0, .45)' : ''; return (