|
@@ -55,27 +55,30 @@ import React from 'react';
|
|
|
import { Slider, InputNumber } from '@douyinfe/semi-ui';
|
|
|
|
|
|
class InputSlider extends React.Component {
|
|
|
- constructor(props) {
|
|
|
- super();
|
|
|
- this.state = { value: 10 };
|
|
|
- this.getSliderValue = this.getSliderValue.bind(this);
|
|
|
- }
|
|
|
+ constructor(props) {
|
|
|
+ super();
|
|
|
+ this.state = { value: 10 };
|
|
|
+ this.getSliderValue = this.getSliderValue.bind(this);
|
|
|
+ }
|
|
|
|
|
|
- getSliderValue(value) {
|
|
|
- this.setState({ value: value / 1 });
|
|
|
- }
|
|
|
+ getSliderValue(value) {
|
|
|
+ if(isNaN(Number(value))){
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.setState({ value: value / 1 });
|
|
|
+ }
|
|
|
|
|
|
- render() {
|
|
|
- const { value } = this.state
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <div style={{ width: 320, marginRight: 15 }}>
|
|
|
- <Slider step={1} value={value} onChange={(value) => (this.getSliderValue(value))} ></Slider>
|
|
|
- </div>
|
|
|
- <InputNumber onChange={(v) => this.getSliderValue(v)} style={{width: 100}} value={value} />
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
+ render() {
|
|
|
+ const { value } = this.state
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <div style={{ width: 320, marginRight: 15 }}>
|
|
|
+ <Slider step={1} value={value} onChange={(value) => (this.getSliderValue(value))} ></Slider>
|
|
|
+ </div>
|
|
|
+ <InputNumber onChange={(v) => this.getSliderValue(v)} style={{width: 100}} value={value} min={0} max={100} />
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+ }
|
|
|
}
|
|
|
```
|
|
|
|
|
@@ -257,4 +260,4 @@ import { Slider } from '@douyinfe/semi-ui';
|
|
|
| onChange | Callback function when slider value changes | (value: number \| number[]) => void | - |- |
|
|
|
|
|
|
## Design Tokens
|
|
|
-<DesignToken/>
|
|
|
+<DesignToken/>
|