ant-design/components/slider/demo/basic.md

48 lines
973 B
Markdown

---
order: 0
title:
zh-CN: 基本
en-US: Basic
---
## zh-CN
基本滑动条。当 `range``true` 时,渲染为双滑块。当 `disabled``true` 时,滑块处于不可用状态。
## en-US
Basic slider. When `range` is `true`, display as dual thumb mode. When `disable` is `true`, the slider will not be interactable.
```jsx
import { Slider, Switch } from 'antd';
class Demo extends React.Component {
state = {
disabled: false,
};
handleDisabledChange = disabled => {
this.setState({ disabled });
};
render() {
const { disabled } = this.state;
return (
<>
<Slider defaultValue={30} disabled={disabled} />
<Slider range defaultValue={[20, 50]} disabled={disabled} />
Disabled: <Switch size="small" checked={disabled} onChange={this.handleDisabledChange} />
</>
);
}
}
ReactDOM.render(<Demo />, mountNode);
```
<style>
.code-box-demo .ant-slider {
margin-bottom: 16px;
}
</style>