wassname/slider
1
0
Fork 0
mirror of https://github.com/wassname/slider.git synced 2026-09-13 13:02:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

Updates

Browse Source
This commit is contained in:
Benjy Cui
2016-04-10 08:55:10 +08:00
parent 9b82f695c4
commit 2a34b28739
19 changed files with 1823 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/range.html
+50 -26
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>range.js - example - rc-slider@3.5.1</title>
<title>range.js - example - rc-slider@3.6.0</title>
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta charset="utf-8"/>
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@3.5.1</h1>
<h1>rc-slider@3.6.0</h1>
<p>slider ui component for react</p>
</div>
@@ -280,43 +280,67 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-keyword">const</span> CustomizedRange = React.createClass({
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> {
lowerBound: <span class="hljs-number">20</span>,
upperBound: <span class="hljs-number">40</span>,
value: [<span class="hljs-number">20</span>, <span class="hljs-number">40</span>],
};
},
onLowerBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
<span class="hljs-keyword">this</span>.setState({ lowerBound: +e.target.value });
},
onUpperBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
<span class="hljs-keyword">this</span>.setState({ upperBound: +e.target.value });
},
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
log(value);
<span class="hljs-keyword">this</span>.setState({
value: value,
});
},
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>;</span>
},
});
<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
getInitialState() {
<span class="hljs-keyword">return</span> {
min: <span class="hljs-number">0</span>,
max: <span class="hljs-number">100</span>,
};
},
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
log(value);
},
onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
<span class="hljs-keyword">this</span>.setState({
min: +e.target.value || <span class="hljs-number">0</span>,
});
},
onMaxChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
<span class="hljs-keyword">this</span>.setState({
max: +e.target.value || <span class="hljs-number">100</span>,
});
handleApply: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">const</span> { lowerBound, upperBound } = <span class="hljs-keyword">this</span>.state;
<span class="hljs-keyword">this</span>.setState({ value: [lowerBound, upperBound]});
},
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>LowerBound: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.lowerBound}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onLowerBoundChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>UpperBound: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.upperBound}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onUpperBoundChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">button</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.handleApply}</span>&gt;</span>Apply<span class="hljs-tag">&lt;/<span class="hljs-title">button</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">allowCross</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
);
},
});
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) {
this.setState({
max: +e.target.value || 100,
});
},
render: function() {
return (
<span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Min: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMinChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>