require('rc-slider/assets/index.css');
+
+require('rc-slider/assets/index.css');
const React = require('react');
const ReactDOM = require('react-dom');
@@ -272,33 +273,48 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
const style = {width: 400, margin: 50};
-function log(value) {
+function log(value) {
console.log(value);
}
const CustomizedRange = React.createClass({
- getInitialState: function() {
+ getInitialState: function() {
return {
value: [20, 40],
};
},
- onSliderChange: function(value) {
+ onSliderChange: function(value) {
log(value);
this.setState({
value: value,
});
},
- onMinChange: function(e) {
+ render: function() {
+ return <Slider range value={this.state.value} onChange={this.onSliderChange} />;
+ },
+});
+
+const DynamicBounds = React.createClass({
+ getInitialState() {
+ return {
+ min: 0,
+ max: 100,
+ };
+ },
+ onSliderChange: function(value) {
+ log(value);
+ },
+ onMinChange: function(e) {
this.setState({
min: +e.target.value || 0,
});
},
- onMaxChange: function(e) {
+ onMaxChange: function(e) {
this.setState({
max: +e.target.value || 100,
});
},
- render: function() {
+ render: function() {
return (
<div>
<label>Min: </label>
@@ -307,17 +323,17 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<label>Max: </label>
<input type="number" value={this.state.max} onChange={this.onMaxChange} />
<br /><br />
- <Slider range value={this.state.value} min={this.state.min} max={this.state.max} onChange={this.onSliderChange} />
+ <Slider range defaultValue={[20, 50]} min={this.state.min} max={this.state.max} onChange={this.onSliderChange} />
</div>
- );
+ );
},
});
ReactDOM.render(
- <div>
+ <div>
<div style={style}>
- <p>Basic Range</p>
- <Slider range defaultValue={[0, 20]} onChange={log} />
+ <p>Basic Range，`allowCross=false`</p>
+ <Slider range allowCross={false} defaultValue={[0, 20]} onChange={log} />
</div>
<div style={style}>
<p>Basic Range，`step=20` </p>
@@ -335,6 +351,10 @@ ReactDOM.render(
<p>Customized Range</p>
<CustomizedRange />
</div>
+ <div style={style}>
+ <p>Range with dynamic `max` `min`</p>
+ <DynamicBounds />
+ </div>
</div>
, document.getElementById('__react-content'));
\n \n \n
\n \n \n
\n \n
\n );\n },\n});\n\nReactDOM.render(\n \n
\n
\n
Basic Range，`step=20`
\n
\n
\n
\n
Basic Range，`step=20, dots`
\n
\n
\n
\n
\n
\n \n \n
\n \n \n
\n \n
\n );\n },\n});\n\nReactDOM.render(\n \n
\n
Basic Range，`allowCross=false`
\n
\n
\n
\n
Basic Range，`step=20`
\n
\n
\n
\n
Basic Range，`step=20, dots`
\n
\n
\n
\n
\n
\n
Range with dynamic `max` `min`
\n
\n
\n
-
require('rc-slider/assets/index.css');
+
+require('rc-slider/assets/index.css');
const React = require('react');
const ReactDOM = require('react-dom');
@@ -272,40 +273,53 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
const style = {width: 400, margin: 50};
-function log(value) {
+function log(value) {
console.log(value);
}
-function percentFormatter(v) {
+function percentFormatter(v) {
return v + ' %';
}
const CustomizedSlider = React.createClass({
- getInitialState: function() {
+ getInitialState: function() {
return {
value: 50,
- min: 0,
- max: 100,
};
},
- onSliderChange: function(value) {
+ onSliderChange: function(value) {
log(value);
this.setState({
value: value,
});
},
- onMinChange: function(e) {
+ render: function() {
+ return <Slider value={this.state.value} onChange={this.onSliderChange} />;
+ },
+});
+
+const DynamicBounds = React.createClass({
+ getInitialState: function() {
+ return {
+ min: 0,
+ max: 100,
+ };
+ },
+ onSliderChange: function(value) {
+ log(value);
+ },
+ onMinChange: function(e) {
this.setState({
min: +e.target.value || 0,
});
},
- onMaxChange: function(e) {
+ onMaxChange: function(e) {
this.setState({
max: +e.target.value || 100,
});
},
- render: function() {
+ render: function() {
return (
<div>
<label>Min: </label>
@@ -314,14 +328,14 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<label>Max: </label>
<input type="number" value={this.state.max} onChange={this.onMaxChange} />
<br /><br />
- <Slider value={this.state.value} min={this.state.min} max={this.state.max} onChange={this.onSliderChange} />
+ <Slider defaultValue={50} min={this.state.min} max={this.state.max} onChange={this.onSliderChange} />
</div>
- );
+ );
},
});
ReactDOM.render(
- <div>
+ <div>
<div style={style}>
<p>Basic Slider</p>
<Slider tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log} />
@@ -346,6 +360,10 @@ ReactDOM.render(
<p>Customized Slider</p>
<CustomizedSlider />
</div>
+ <div style={style}>
+ <p>Slider with dynamic `min` `max`</p>
+ <DynamicBounds />
+ </div>
</div>
, document.getElementById('__react-content'));
\n \n \n
\n \n \n
\n \n
\n );\n },\n});\n\nReactDOM.render(\n \n
\n
\n
Basic Slider，`step=20`
\n
\n
\n
\n
Basic Slider，`step=20, dots`
\n
\n
\n
\n
Basic Slider with `tipFormatter`
\n
\n
\n
\n
Controlled Slider
\n
\n
\n
\n
Customized Slider
\n
\n
\n
\n \n \n
\n \n \n
\n \n
\n );\n },\n});\n\nReactDOM.render(\n \n
\n
\n
Basic Slider，`step=20`
\n
\n
\n
\n
Basic Slider，`step=20, dots`
\n
\n
\n
\n
Basic Slider with `tipFormatter`
\n
\n
\n
\n
Controlled Slider
\n
\n
\n
\n
Customized Slider
\n
\n
\n
\n
Slider with dynamic `min` `max`
\n
\n
\n