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

Updates

Browse Source
This commit is contained in:
Benjy Cui
2016-08-12 16:09:32 +08:00
parent de1fc9ad47
commit a6492206d3
25 changed files with 3848 additions and 1559 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/common.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/common.js
+3540 -1285
View File
File diff suppressed because it is too large Load Diff
examples/common.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/custom-handles.html
+25 -22
View File
@@ -2,12 +2,12 @@
<html>
<head>
<title>custom-handles.js - example - rc-slider@3.8.2</title>
<title>custom-handles.js - example - rc-slider@4.0.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"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link href="https://a.alipayobjects.com/normalize.css/3.0.1/normalize.css" rel="stylesheet"/>
<style>
.highlight pre {
padding: .8em 1em;
@@ -251,26 +251,26 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<!--[if lt IE 9]>
<script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="common.css" />
</head>
<body>
<div class="container">
<div class="header">
<h1>rc-slider@3.8.2</h1>
<div class="container">
<div class="header">
<h1>rc-slider@4.0.0</h1>
<p>slider ui component for react</p>
</div>
<div class="example" id="__react-content"></div>
<script src="common.js?nowrap"></script>
<script src="custom-handles.js?nowrap"></script>
<div class="highlight"><pre><code language="js"><span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
<p>slider ui component for react</p>
</div>
<div class="example" id="__react-content"></div>
<div class="highlight"><pre><code language="js"><span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
<span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">const</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>);
<span class="hljs-keyword">const</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
<span class="hljs-keyword">const</span> wrapperStyle = {width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span>};
<span class="hljs-keyword">const</span> wrapperStyle = { width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span> };
<span class="hljs-keyword">const</span> handleStyle = {
position: <span class="hljs-string">'absolute'</span>,
@@ -286,10 +286,10 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
};
<span class="hljs-keyword">const</span> CustomHandle = props =&gt; {
<span class="hljs-keyword">const</span> style = <span class="hljs-built_in">Object</span>.assign({left: props.offset + <span class="hljs-string">'%'</span>}, handleStyle);
<span class="hljs-keyword">const</span> style = <span class="hljs-built_in">Object</span>.assign({ left: props.offset + <span class="hljs-string">'%'</span> }, handleStyle);
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>val: {props.value}<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
);
)</span>;
};
CustomHandle.propTypes = {
value: React.PropTypes.any,
@@ -297,7 +297,7 @@ CustomHandle.propTypes = {
};
ReactDOM.render(
<span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</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">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{wrapperStyle}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Default slider<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">min</span>=<span class="hljs-value">{0}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{3}</span> /&gt;</span>
@@ -309,13 +309,16 @@ ReactDOM.render(
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
, document.getElementById('__react-content'));
</span></code></pre></div>
</div>
<a href="http://github.com/react-component/slider">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
</div>
<a href="http://github.com/react-component/slider">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
<script src="common.js?nowrap"></script>
<script src="custom-handles.js?nowrap"></script>
</body>
</html>
examples/custom-handles.js
+2 -2
View File
@@ -14,8 +14,8 @@ webpackJsonp([0],[
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(35);
var Slider = __webpack_require__(174);
var ReactDOM = __webpack_require__(37);
var Slider = __webpack_require__(177);
var wrapperStyle = { width: 400, margin: 50 };
examples/custom-handles.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sources":["webpack:///./examples/custom-handles.js"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,oBAAO,CAAC,CAA6B,CAAC,CAAC;;AAEvC,KAAM,KAAK,GAAG,mBAAO,CAAC,CAAO,CAAC,CAAC;AAC/B,KAAM,QAAQ,GAAG,mBAAO,CAAC,EAAW,CAAC,CAAC;AACtC,KAAM,MAAM,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;;AAEpC,KAAM,YAAY,GAAG,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAC,CAAC;;AAE9C,KAAM,WAAW,GAAG;AAClB,WAAQ,EAAE,UAAU;AACpB,YAAS,EAAE,uBAAuB;AAClC,SAAM,EAAE,SAAS;AACjB,UAAO,EAAE,KAAK;AACd,SAAM,EAAE,mBAAmB;AAC3B,eAAY,EAAE,KAAK;AACnB,aAAU,EAAE,MAAM;AAClB,WAAQ,EAAE,MAAM;AAChB,YAAS,EAAE,QAAQ;AACnB,SAAM,EAAE,CAAC;EACV,CAAC;;AAEF,KAAM,YAAY,GAAG,SAAf,YAAY,CAAG,KAAK,EAAI;AAC5B,OAAM,KAAK,GAAG,MAAM,CAAC,MAAM,CAAC,EAAC,IAAI,EAAE,KAAK,CAAC,MAAM,GAAG,GAAG,EAAC,EAAE,WAAW,CAAC,CAAC;AACrE,UACE;;OAAK,KAAK,EAAE,KAAM;;KAAO,KAAK,CAAC,KAAK;IAAO,CAC3C;EACH,CAAC;AACF,aAAY,CAAC,SAAS,GAAG;AACvB,QAAK,EAAE,KAAK,CAAC,SAAS,CAAC,GAAG;AAC1B,SAAM,EAAE,KAAK,CAAC,SAAS,CAAC,MAAM;EAC/B,CAAC;;AAEF,SAAQ,CAAC,MAAM,CACb;;;GACE;;OAAK,KAAK,EAAE,YAAa;KACvB;;;;MAAqB;KACrB,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAE,EAAC,GAAG,EAAE,EAAG,EAAC,YAAY,EAAE,CAAE,GAAG;IACxC;GACN;;OAAK,KAAK,EAAE,YAAa;KACvB;;;;MAAgC;KAChC,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAE,EAAC,GAAG,EAAE,EAAG,EAAC,YAAY,EAAE,CAAE,EAAC,MAAM,EAAE,oBAAC,YAAY,OAAI,GAAG;IAClE;EACF,EACJ,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,C","file":"custom-handles.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst wrapperStyle = {width: 400, margin: 50};\n\nconst handleStyle = {\n position: 'absolute',\n transform: 'translate(-50%, -50%)',\n cursor: 'pointer',\n padding: '2px',\n border: '2px solid #abe2fb',\n borderRadius: '3px',\n background: '#fff',\n fontSize: '14px',\n textAlign: 'center',\n zIndex: 3,\n};\n\nconst CustomHandle = props => {\n const style = Object.assign({left: props.offset + '%'}, handleStyle);\n return (\n <div style={style}>val: {props.value}</div>\n );\n};\nCustomHandle.propTypes = {\n value: React.PropTypes.any,\n offset: React.PropTypes.number,\n};\n\nReactDOM.render(\n <div>\n <div style={wrapperStyle}>\n <p>Default slider</p>\n <Slider min={0} max={20} defaultValue={3} />\n </div>\n <div style={wrapperStyle}>\n <p>Slider with custom handle</p>\n <Slider min={0} max={20} defaultValue={3} handle={<CustomHandle />} />\n </div>\n </div>\n , document.getElementById('__react-content'));\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/custom-handles.js\n **/"],"sourceRoot":""}
{"version":3,"sources":["webpack:///./examples/custom-handles.js"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,qBAAQ,CAAR;;AAEA,KAAM,QAAQ,oBAAQ,CAAR,CAAd;AACA,KAAM,WAAW,oBAAQ,EAAR,CAAjB;AACA,KAAM,SAAS,oBAAQ,GAAR,CAAf;;AAEA,KAAM,eAAe,EAAE,OAAO,GAAT,EAAc,QAAQ,EAAtB,EAArB;;AAEA,KAAM,cAAc;AAClB,aAAU,UADQ;AAElB,cAAW,uBAFO;AAGlB,WAAQ,SAHU;AAIlB,YAAS,KAJS;AAKlB,WAAQ,mBALU;AAMlB,iBAAc,KANI;AAOlB,eAAY,MAPM;AAQlB,aAAU,MARQ;AASlB,cAAW,QATO;AAUlB,WAAQ;AAVU,EAApB;;AAaA,KAAM,eAAe,SAAf,YAAe,QAAS;AAC5B,OAAM,QAAQ,OAAO,MAAP,CAAc,EAAE,MAAM,MAAM,MAAN,GAAe,GAAvB,EAAd,EAA4C,WAA5C,CAAd;AACA,UACE;AAAA;AAAA,OAAK,OAAO,KAAZ;AAAA;AAAyB,WAAM;AAA/B,IADF;AAGD,EALD;AAMA,cAAa,SAAb,GAAyB;AACvB,UAAO,MAAM,SAAN,CAAgB,GADA;AAEvB,WAAQ,MAAM,SAAN,CAAgB;AAFD,EAAzB;;AAKA,UAAS,MAAT,CACE;AAAA;AAAA;AACE;AAAA;AAAA,OAAK,OAAO,YAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAb,EAAgB,KAAK,EAArB,EAAyB,cAAc,CAAvC;AAFF,IADF;AAKE;AAAA;AAAA,OAAK,OAAO,YAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAb,EAAgB,KAAK,EAArB,EAAyB,cAAc,CAAvC,EAA0C,QAAQ,oBAAC,YAAD,OAAlD;AAFF;AALF,EADF,EAWI,SAAS,cAAT,CAAwB,iBAAxB,CAXJ,E","file":"custom-handles.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst wrapperStyle = { width: 400, margin: 50 };\n\nconst handleStyle = {\n position: 'absolute',\n transform: 'translate(-50%, -50%)',\n cursor: 'pointer',\n padding: '2px',\n border: '2px solid #abe2fb',\n borderRadius: '3px',\n background: '#fff',\n fontSize: '14px',\n textAlign: 'center',\n zIndex: 3,\n};\n\nconst CustomHandle = props => {\n const style = Object.assign({ left: props.offset + '%' }, handleStyle);\n return (\n <div style={style}>val: {props.value}</div>\n );\n};\nCustomHandle.propTypes = {\n value: React.PropTypes.any,\n offset: React.PropTypes.number,\n};\n\nReactDOM.render(\n <div>\n <div style={wrapperStyle}>\n <p>Default slider</p>\n <Slider min={0} max={20} defaultValue={3} />\n </div>\n <div style={wrapperStyle}>\n <p>Slider with custom handle</p>\n <Slider min={0} max={20} defaultValue={3} handle={<CustomHandle />} />\n </div>\n </div>\n , document.getElementById('__react-content'));\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/custom-handles.js\n **/"],"sourceRoot":""}
examples/marks.html
+22 -19
View File
@@ -2,12 +2,12 @@
<html>
<head>
<title>marks.js - example - rc-slider@3.8.2</title>
<title>marks.js - example - rc-slider@4.0.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"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link href="https://a.alipayobjects.com/normalize.css/3.0.1/normalize.css" rel="stylesheet"/>
<style>
.highlight pre {
padding: .8em 1em;
@@ -251,26 +251,26 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<!--[if lt IE 9]>
<script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="common.css" />
</head>
<body>
<div class="container">
<div class="header">
<h1>rc-slider@3.8.2</h1>
<div class="container">
<div class="header">
<h1>rc-slider@4.0.0</h1>
<p>slider ui component for react</p>
</div>
<div class="example" id="__react-content"></div>
<script src="common.js?nowrap"></script>
<script src="marks.js?nowrap"></script>
<div class="highlight"><pre><code language="js"><span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
<p>slider ui component for react</p>
</div>
<div class="example" id="__react-content"></div>
<div class="highlight"><pre><code language="js"><span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
<span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">const</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>);
<span class="hljs-keyword">const</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
<span class="hljs-keyword">const</span> style = {width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span>};
<span class="hljs-keyword">const</span> style = { width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span> };
<span class="hljs-keyword">const</span> marks = {
<span class="hljs-string">'-10'</span>: <span class="hljs-string">'-10°C'</span>,
<span class="hljs-number">0</span>: <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">strong</span>&gt;</span>0°C<span class="hljs-tag">&lt;/<span class="hljs-title">strong</span>&gt;</span>,
@@ -320,13 +320,16 @@ ReactDOM.render(
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
, document.getElementById('__react-content'));
</span></code></pre></div>
</div>
<a href="http://github.com/react-component/slider">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
</div>
<a href="http://github.com/react-component/slider">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
<script src="common.js?nowrap"></script>
<script src="marks.js?nowrap"></script>
</body>
</html>
examples/marks.js
+4 -4
View File
@@ -3,12 +3,12 @@ webpackJsonp([1],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(218);
module.exports = __webpack_require__(318);
/***/ },
/***/ 218:
/***/ 318:
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -16,8 +16,8 @@ webpackJsonp([1],{
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(35);
var Slider = __webpack_require__(174);
var ReactDOM = __webpack_require__(37);
var Slider = __webpack_require__(177);
var style = { width: 400, margin: 50 };
var marks = {
examples/marks.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sources":["webpack:///./examples/marks.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,oBAAO,CAAC,CAA6B,CAAC,CAAC;;AAEvC,KAAM,KAAK,GAAG,mBAAO,CAAC,CAAO,CAAC,CAAC;AAC/B,KAAM,QAAQ,GAAG,mBAAO,CAAC,EAAW,CAAC,CAAC;AACtC,KAAM,MAAM,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;;AAEpC,KAAM,KAAK,GAAG,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAC,CAAC;AACvC,KAAM,KAAK,GAAG;AACZ,QAAK,EAAE,OAAO;AACd,IAAC,EAAE;;;;IAAoB;AACvB,KAAE,EAAE,MAAM;AACV,KAAE,EAAE,MAAM;AACV,KAAE,EAAE,MAAM;AACV,MAAG,EAAE;AACH,UAAK,EAAE;AACL,YAAK,EAAE,KAAK;MACb;AACD,UAAK,EAAE;;;;MAAsB;IAC9B;EACF,CAAC;;AAEF,UAAS,GAAG,CAAC,KAAK,EAAE;AAClB,UAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;EACpB;;AAED,SAAQ,CAAC,MAAM,CACb;;;GACE;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAqC;KACrC,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,IAAK,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,EAAG,GAAG;IAC3E;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAkC;KAClC,oBAAC,MAAM,IAAC,IAAI,QAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,EAAG,GAAG;IAC9E;GAEN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAA0C;KAC1C,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,QAAQ,EAAE,KAAM,EAAC,YAAY,EAAE,EAAG,GAAG;IACjE;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAoD;KACpD,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,KAAM,EAAC,YAAY,EAAE,EAAG,GAAG;IAC3E;GAEN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAuB;KACvB,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,QAAC,KAAK,EAAE,KAAM,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAE,GAAG;IAC3E;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAiC;KACjC,oBAAC,MAAM,IAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,QAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAE,GAAG;IACrF;EACF,EACJ,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,C","file":"marks.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst style = {width: 400, margin: 50};\nconst marks = {\n '-10': '-10°C',\n 0: <strong>0°C</strong>,\n 26: '26°C',\n 37: '37°C',\n 50: '50°C',\n 100: {\n style: {\n color: 'red',\n },\n label: <strong>100°C</strong>,\n },\n};\n\nfunction log(value) {\n console.log(value);\n}\n\nReactDOM.render(\n <div>\n <div style={style}>\n <p>Slider with marks, `step=null`</p>\n <Slider min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks and steps</p>\n <Slider dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />\n </div>\n\n <div style={style}>\n <p>Slider with marks, `included=false`</p>\n <Slider min={-10} marks={marks} included={false} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks and steps, `included=false`</p>\n <Slider min={-10} marks={marks} step={10} included={false} defaultValue={20} />\n </div>\n\n <div style={style}>\n <p>Range with marks</p>\n <Slider min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />\n </div>\n <div style={style}>\n <p>Range with marks and steps</p>\n <Slider min={-10} range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />\n </div>\n </div>\n , document.getElementById('__react-content'));\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/marks.js\n **/"],"sourceRoot":""}
{"version":3,"sources":["webpack:///./examples/marks.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,qBAAQ,CAAR;;AAEA,KAAM,QAAQ,oBAAQ,CAAR,CAAd;AACA,KAAM,WAAW,oBAAQ,EAAR,CAAjB;AACA,KAAM,SAAS,oBAAQ,GAAR,CAAf;;AAEA,KAAM,QAAQ,EAAE,OAAO,GAAT,EAAc,QAAQ,EAAtB,EAAd;AACA,KAAM,QAAQ;AACZ,UAAO,OADK;AAEZ,MAAG;AAAA;AAAA;AAAA;AAAA,IAFS;AAGZ,OAAI,MAHQ;AAIZ,OAAI,MAJQ;AAKZ,OAAI,MALQ;AAMZ,QAAK;AACH,YAAO;AACL,cAAO;AADF,MADJ;AAIH,YAAO;AAAA;AAAA;AAAA;AAAA;AAJJ;AANO,EAAd;;AAcA,UAAS,GAAT,CAAa,KAAb,EAAoB;AAClB,WAAQ,GAAR,CAAY,KAAZ;AACD;;AAED,UAAS,MAAT,CACE;AAAA;AAAA;AACE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAC,EAAd,EAAkB,OAAO,KAAzB,EAAgC,MAAM,IAAtC,EAA4C,UAAU,GAAtD,EAA2D,cAAc,EAAzE;AAFF,IADF;AAKE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,UAAR,EAAa,KAAK,CAAC,EAAnB,EAAuB,OAAO,KAA9B,EAAqC,MAAM,EAA3C,EAA+C,UAAU,GAAzD,EAA8D,cAAc,EAA5E;AAFF,IALF;AAUE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAC,EAAd,EAAkB,OAAO,KAAzB,EAAgC,UAAU,KAA1C,EAAiD,cAAc,EAA/D;AAFF,IAVF;AAcE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAC,EAAd,EAAkB,OAAO,KAAzB,EAAgC,MAAM,EAAtC,EAA0C,UAAU,KAApD,EAA2D,cAAc,EAAzE;AAFF,IAdF;AAmBE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAC,EAAd,EAAkB,WAAlB,EAAwB,OAAO,KAA/B,EAAsC,UAAU,GAAhD,EAAqD,cAAc,CAAC,EAAD,EAAK,EAAL,CAAnE;AAFF,IAnBF;AAuBE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAC,EAAd,EAAkB,WAAlB,EAAwB,OAAO,KAA/B,EAAsC,MAAM,EAA5C,EAAgD,UAAU,GAA1D,EAA+D,cAAc,CAAC,EAAD,EAAK,EAAL,CAA7E;AAFF;AAvBF,EADF,EA6BI,SAAS,cAAT,CAAwB,iBAAxB,CA7BJ,E","file":"marks.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst style = { width: 400, margin: 50 };\nconst marks = {\n '-10': '-10°C',\n 0: <strong>0°C</strong>,\n 26: '26°C',\n 37: '37°C',\n 50: '50°C',\n 100: {\n style: {\n color: 'red',\n },\n label: <strong>100°C</strong>,\n },\n};\n\nfunction log(value) {\n console.log(value);\n}\n\nReactDOM.render(\n <div>\n <div style={style}>\n <p>Slider with marks, `step=null`</p>\n <Slider min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks and steps</p>\n <Slider dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />\n </div>\n\n <div style={style}>\n <p>Slider with marks, `included=false`</p>\n <Slider min={-10} marks={marks} included={false} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks and steps, `included=false`</p>\n <Slider min={-10} marks={marks} step={10} included={false} defaultValue={20} />\n </div>\n\n <div style={style}>\n <p>Range with marks</p>\n <Slider min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />\n </div>\n <div style={style}>\n <p>Range with marks and steps</p>\n <Slider min={-10} range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />\n </div>\n </div>\n , document.getElementById('__react-content'));\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/marks.js\n **/"],"sourceRoot":""}
examples/range.html
+52 -45
View File
@@ -2,12 +2,12 @@
<html>
<head>
<title>range.js - example - rc-slider@3.8.2</title>
<title>range.js - example - rc-slider@4.0.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"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link href="https://a.alipayobjects.com/normalize.css/3.0.1/normalize.css" rel="stylesheet"/>
<style>
.highlight pre {
padding: .8em 1em;
@@ -251,57 +251,57 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<!--[if lt IE 9]>
<script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="common.css" />
</head>
<body>
<div class="container">
<div class="header">
<h1>rc-slider@3.8.2</h1>
<div class="container">
<div class="header">
<h1>rc-slider@4.0.0</h1>
<p>slider ui component for react</p>
</div>
<div class="example" id="__react-content"></div>
<script src="common.js?nowrap"></script>
<script src="range.js?nowrap"></script>
<div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint react/no-multi-comp: 0 */</span>
<p>slider ui component for react</p>
</div>
<div class="example" id="__react-content"></div>
<div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint react/no-multi-comp: 0 */</span>
<span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
<span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">const</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>);
<span class="hljs-keyword">const</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
<span class="hljs-keyword">const</span> style = {width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span>};
<span class="hljs-keyword">const</span> style = { width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span> };
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span><span class="hljs-params">(value)</span> </span>{
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">value</span>) </span>{
<span class="hljs-built_in">console</span>.log(value);
}
<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>{
getInitialState() {
<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>{
onLowerBoundChange(e) {
<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>{
onUpperBoundChange(e) {
<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>{
onSliderChange(value) {
log(value);
<span class="hljs-keyword">this</span>.setState({
value: value,
value,
});
},
handleApply: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
handleApply() {
<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]});
<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>{
render() {
<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>
@@ -314,33 +314,33 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<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>
);
)</span>;
},
});
const DynamicBounds = React.createClass({
<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
getInitialState() {
return {
min: 0,
max: 100,
<span class="hljs-keyword">return</span> {
min: <span class="hljs-number">0</span>,
max: <span class="hljs-number">100</span>,
};
},
onSliderChange: function(value) {
onSliderChange(value) {
log(value);
},
onMinChange: function(e) {
this.setState({
min: +e.target.value || 0,
onMinChange(e) {
<span class="hljs-keyword">this</span>.setState({
min: +e.target.value || <span class="hljs-number">0</span>,
});
},
onMaxChange: function(e) {
this.setState({
max: +e.target.value || 100,
onMaxChange(e) {
<span class="hljs-keyword">this</span>.setState({
max: +e.target.value || <span class="hljs-number">100</span>,
});
},
render: function() {
return (
<span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</span>
render() {
<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>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>
@@ -349,12 +349,12 @@ const DynamicBounds = React.createClass({
<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">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">50</span>]} <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</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>
);
)</span>;
},
});
ReactDOM.render(
<span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</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">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Range，`allowCross=false`<span class="hljs-tag">&lt;/<span class="hljs-title">p</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">defaultValue</span>=<span class="hljs-value">{[0,</span> <span class="hljs-attribute">20</span>]} <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>
@@ -371,6 +371,10 @@ ReactDOM.render(
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Controlled Range<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<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">{[20,</span> <span class="hljs-attribute">40</span>]} /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Multi Range<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span>=<span class="hljs-value">{3}</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</span>, <span class="hljs-attribute">60</span>, <span class="hljs-attribute">80</span>]} /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Customized Range<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">CustomizedRange</span> /&gt;</span>
@@ -382,13 +386,16 @@ ReactDOM.render(
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
, document.getElementById('__react-content'));
</span></code></pre></div>
</div>
<a href="http://github.com/react-component/slider">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
</div>
<a href="http://github.com/react-component/slider">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
<script src="common.js?nowrap"></script>
<script src="range.js?nowrap"></script>
</body>
</html>
examples/range.js
+15 -7
View File
@@ -3,22 +3,22 @@ webpackJsonp([2],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(219);
module.exports = __webpack_require__(319);
/***/ },
/***/ 219:
/***/ 319:
/***/ function(module, exports, __webpack_require__) {
/* eslint react/no-multi-comp: 0 */
'use strict';
/* eslint react/no-multi-comp: 0 */
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(35);
var Slider = __webpack_require__(174);
var ReactDOM = __webpack_require__(37);
var Slider = __webpack_require__(177);
var style = { width: 400, margin: 50 };
@@ -28,7 +28,6 @@ webpackJsonp([2],{
var CustomizedRange = React.createClass({
displayName: 'CustomizedRange',
getInitialState: function getInitialState() {
return {
lowerBound: 20,
@@ -87,7 +86,6 @@ webpackJsonp([2],{
var DynamicBounds = React.createClass({
displayName: 'DynamicBounds',
getInitialState: function getInitialState() {
return {
min: 0,
@@ -174,6 +172,16 @@ webpackJsonp([2],{
),
React.createElement(Slider, { range: true, value: [20, 40] })
),
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Multi Range'
),
React.createElement(Slider, { range: 3, value: [20, 40, 60, 80] })
),
React.createElement(
'div',
{ style: style },
examples/range.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/slider.html
+36 -33
View File
@@ -2,12 +2,12 @@
<html>
<head>
<title>slider.js - example - rc-slider@3.8.2</title>
<title>slider.js - example - rc-slider@4.0.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"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link href="https://a.alipayobjects.com/normalize.css/3.0.1/normalize.css" rel="stylesheet"/>
<style>
.highlight pre {
padding: .8em 1em;
@@ -251,78 +251,78 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<!--[if lt IE 9]>
<script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="common.css" />
</head>
<body>
<div class="container">
<div class="header">
<h1>rc-slider@3.8.2</h1>
<div class="container">
<div class="header">
<h1>rc-slider@4.0.0</h1>
<p>slider ui component for react</p>
</div>
<div class="example" id="__react-content"></div>
<script src="common.js?nowrap"></script>
<script src="slider.js?nowrap"></script>
<div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint react/no-multi-comp: 0 */</span>
<p>slider ui component for react</p>
</div>
<div class="example" id="__react-content"></div>
<div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint react/no-multi-comp: 0 */</span>
<span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
<span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">const</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>);
<span class="hljs-keyword">const</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
<span class="hljs-keyword">const</span> style = {width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span>};
<span class="hljs-keyword">const</span> style = { width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span> };
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span><span class="hljs-params">(value)</span> </span>{
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">value</span>) </span>{
<span class="hljs-built_in">console</span>.log(value);
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">percentFormatter</span><span class="hljs-params">(v)</span> </span>{
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">percentFormatter</span>(<span class="hljs-params">v</span>) </span>{
<span class="hljs-keyword">return</span> v + <span class="hljs-string">' %'</span>;
}
<span class="hljs-keyword">const</span> CustomizedSlider = React.createClass({
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
getInitialState() {
<span class="hljs-keyword">return</span> {
value: <span class="hljs-number">50</span>,
};
},
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
onSliderChange(value) {
log(value);
<span class="hljs-keyword">this</span>.setState({
value: value,
value,
});
},
onAfterChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
onAfterChange(value) {
<span class="hljs-built_in">console</span>.log(value);
},
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
render() {
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Slider</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> <span class="hljs-attribute">onAfterChange</span>=<span class="hljs-value">{this.onAfterChange}</span> /&gt;</span>;</span>
},
});
<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
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>{
onSliderChange(value) {
log(value);
},
onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
onMinChange(e) {
<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>{
onMaxChange(e) {
<span class="hljs-keyword">this</span>.setState({
max: +e.target.value || <span class="hljs-number">100</span>,
});
},
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
render() {
<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>Min: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
@@ -333,12 +333,12 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<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">defaultValue</span>=<span class="hljs-value">{50}</span> <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</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>
);
)</span>;
},
});
ReactDOM.render(
<span class="hljs-tag">&lt;<span class="hljs-title">div</span>&gt;</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">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Slider<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">tipTransitionName</span>=<span class="hljs-value">"rc-slider-tooltip-zoom-down"</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>
@@ -374,13 +374,16 @@ ReactDOM.render(
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
, document.getElementById('__react-content'));
</span></code></pre></div>
</div>
<a href="http://github.com/react-component/slider">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
</div>
<a href="http://github.com/react-component/slider">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
<script src="common.js?nowrap"></script>
<script src="slider.js?nowrap"></script>
</body>
</html>
examples/slider.js
+5 -7
View File
@@ -3,22 +3,22 @@ webpackJsonp([3],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(220);
module.exports = __webpack_require__(320);
/***/ },
/***/ 220:
/***/ 320:
/***/ function(module, exports, __webpack_require__) {
/* eslint react/no-multi-comp: 0 */
'use strict';
/* eslint react/no-multi-comp: 0 */
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(35);
var Slider = __webpack_require__(174);
var ReactDOM = __webpack_require__(37);
var Slider = __webpack_require__(177);
var style = { width: 400, margin: 50 };
@@ -32,7 +32,6 @@ webpackJsonp([3],{
var CustomizedSlider = React.createClass({
displayName: 'CustomizedSlider',
getInitialState: function getInitialState() {
return {
value: 50
@@ -54,7 +53,6 @@ webpackJsonp([3],{
var DynamicBounds = React.createClass({
displayName: 'DynamicBounds',
getInitialState: function getInitialState() {
return {
min: 0,
examples/slider.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/v-marks.html
+23 -20
View File
@@ -2,12 +2,12 @@
<html>
<head>
<title>v-marks.js - example - rc-slider@3.8.2</title>
<title>v-marks.js - example - rc-slider@4.0.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"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link href="https://a.alipayobjects.com/normalize.css/3.0.1/normalize.css" rel="stylesheet"/>
<style>
.highlight pre {
padding: .8em 1em;
@@ -251,27 +251,27 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<!--[if lt IE 9]>
<script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="common.css" />
</head>
<body>
<div class="container">
<div class="header">
<h1>rc-slider@3.8.2</h1>
<div class="container">
<div class="header">
<h1>rc-slider@4.0.0</h1>
<p>slider ui component for react</p>
</div>
<div class="example" id="__react-content"></div>
<script src="common.js?nowrap"></script>
<script src="v-marks.js?nowrap"></script>
<div class="highlight"><pre><code language="js"><span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
<p>slider ui component for react</p>
</div>
<div class="example" id="__react-content"></div>
<div class="highlight"><pre><code language="js"><span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
<span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">const</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>);
<span class="hljs-keyword">const</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
<span class="hljs-keyword">const</span> style = {float: <span class="hljs-string">'left'</span>, width: <span class="hljs-number">160</span>, height: <span class="hljs-number">400</span>, marginBottom: <span class="hljs-number">160</span>, marginLeft: <span class="hljs-number">50</span>};
<span class="hljs-keyword">const</span> parentStyle = {overflow: <span class="hljs-string">'hidden'</span>};
<span class="hljs-keyword">const</span> style = { float: <span class="hljs-string">'left'</span>, width: <span class="hljs-number">160</span>, height: <span class="hljs-number">400</span>, marginBottom: <span class="hljs-number">160</span>, marginLeft: <span class="hljs-number">50</span> };
<span class="hljs-keyword">const</span> parentStyle = { overflow: <span class="hljs-string">'hidden'</span> };
<span class="hljs-keyword">const</span> marks = {
<span class="hljs-string">'-10'</span>: <span class="hljs-string">'-10°C'</span>,
@@ -320,13 +320,16 @@ ReactDOM.render(
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
, document.getElementById('__react-content'));
</span></code></pre></div>
</div>
<a href="http://github.com/react-component/slider">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
</div>
<a href="http://github.com/react-component/slider">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
<script src="common.js?nowrap"></script>
<script src="v-marks.js?nowrap"></script>
</body>
</html>
examples/v-marks.js
+4 -4
View File
@@ -3,12 +3,12 @@ webpackJsonp([4],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(221);
module.exports = __webpack_require__(321);
/***/ },
/***/ 221:
/***/ 321:
/***/ function(module, exports, __webpack_require__) {
'use strict';
@@ -16,8 +16,8 @@ webpackJsonp([4],{
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(35);
var Slider = __webpack_require__(174);
var ReactDOM = __webpack_require__(37);
var Slider = __webpack_require__(177);
var style = { float: 'left', width: 160, height: 400, marginBottom: 160, marginLeft: 50 };
var parentStyle = { overflow: 'hidden' };
examples/v-marks.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sources":["webpack:///./examples/v-marks.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,oBAAO,CAAC,CAA6B,CAAC,CAAC;;AAEvC,KAAM,KAAK,GAAG,mBAAO,CAAC,CAAO,CAAC,CAAC;AAC/B,KAAM,QAAQ,GAAG,mBAAO,CAAC,EAAW,CAAC,CAAC;AACtC,KAAM,MAAM,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;;AAEpC,KAAM,KAAK,GAAG,EAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,UAAU,EAAE,EAAE,EAAC,CAAC;AAC1F,KAAM,WAAW,GAAG,EAAC,QAAQ,EAAE,QAAQ,EAAC,CAAC;;AAEzC,KAAM,KAAK,GAAG;AACZ,QAAK,EAAE,OAAO;AACd,IAAC,EAAE;;;;IAAoB;AACvB,KAAE,EAAE,MAAM;AACV,KAAE,EAAE,MAAM;AACV,KAAE,EAAE,MAAM;AACV,MAAG,EAAE;AACH,UAAK,EAAE;AACL,YAAK,EAAE,KAAK;MACb;AACD,UAAK,EAAE;;;;MAAsB;IAC9B;EACF,CAAC;;AAEF,UAAS,GAAG,CAAC,KAAK,EAAE;AAClB,UAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;EACpB;;AAED,SAAQ,CAAC,MAAM,CACb;;KAAK,KAAK,EAAE,WAAY;GACtB;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAqC;KACrC,oBAAC,MAAM,IAAC,QAAQ,QAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,IAAK,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,EAAG,GAAG;IACpF;GACN;;OAAK,KAAK,EAAE,KAAM;KACf;;;;MAAkC;KACnC,oBAAC,MAAM,IAAC,QAAQ,QAAC,IAAI,QAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,EAAG,GAAG;IACvF;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAA0C;KAC1C,oBAAC,MAAM,IAAC,QAAQ,QAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,QAAQ,EAAE,KAAM,EAAC,YAAY,EAAE,EAAG,GAAG;IAC1E;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAoD;KACpD,oBAAC,MAAM,IAAC,QAAQ,QAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,KAAM,EAAC,YAAY,EAAE,EAAG,GAAG;IACpF;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAuB;KACvB,oBAAC,MAAM,IAAC,QAAQ,QAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,QAAC,KAAK,EAAE,KAAM,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAE,GAAG;IACpF;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAiC;KACjC,oBAAC,MAAM,IAAC,QAAQ,QAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,QAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAE,GAAG;IAC9F;EACF,EACJ,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,C","file":"v-marks.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst style = {float: 'left', width: 160, height: 400, marginBottom: 160, marginLeft: 50};\nconst parentStyle = {overflow: 'hidden'};\n\nconst marks = {\n '-10': '-10°C',\n 0: <strong>0°C</strong>,\n 26: '26°C',\n 37: '37°C',\n 50: '50°C',\n 100: {\n style: {\n color: 'red',\n },\n label: <strong>100°C</strong>,\n },\n};\n\nfunction log(value) {\n console.log(value);\n}\n\nReactDOM.render(\n <div style={parentStyle}>\n <div style={style}>\n <p>Slider with marks, `step=null`</p>\n <Slider vertical min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks and steps</p>\n <Slider vertical dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks, `included=false`</p>\n <Slider vertical min={-10} marks={marks} included={false} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks and steps, `included=false`</p>\n <Slider vertical min={-10} marks={marks} step={10} included={false} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Range with marks</p>\n <Slider vertical min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />\n </div>\n <div style={style}>\n <p>Range with marks and steps</p>\n <Slider vertical min={-10} range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />\n </div>\n </div>\n , document.getElementById('__react-content'));\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/v-marks.js\n **/"],"sourceRoot":""}
{"version":3,"sources":["webpack:///./examples/v-marks.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,qBAAQ,CAAR;;AAEA,KAAM,QAAQ,oBAAQ,CAAR,CAAd;AACA,KAAM,WAAW,oBAAQ,EAAR,CAAjB;AACA,KAAM,SAAS,oBAAQ,GAAR,CAAf;;AAEA,KAAM,QAAQ,EAAE,OAAO,MAAT,EAAiB,OAAO,GAAxB,EAA6B,QAAQ,GAArC,EAA0C,cAAc,GAAxD,EAA6D,YAAY,EAAzE,EAAd;AACA,KAAM,cAAc,EAAE,UAAU,QAAZ,EAApB;;AAEA,KAAM,QAAQ;AACZ,UAAO,OADK;AAEZ,MAAG;AAAA;AAAA;AAAA;AAAA,IAFS;AAGZ,OAAI,MAHQ;AAIZ,OAAI,MAJQ;AAKZ,OAAI,MALQ;AAMZ,QAAK;AACH,YAAO;AACL,cAAO;AADF,MADJ;AAIH,YAAO;AAAA;AAAA;AAAA;AAAA;AAJJ;AANO,EAAd;;AAcA,UAAS,GAAT,CAAa,KAAb,EAAoB;AAClB,WAAQ,GAAR,CAAY,KAAZ;AACD;;AAED,UAAS,MAAT,CACE;AAAA;AAAA,KAAK,OAAO,WAAZ;AACE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,OAAO,KAAlC,EAAyC,MAAM,IAA/C,EAAqD,UAAU,GAA/D,EAAoE,cAAc,EAAlF;AAFF,IADF;AAKE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACG;AAAA;AAAA;AAAA;AAAA,MADH;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,UAAjB,EAAsB,KAAK,CAAC,EAA5B,EAAgC,OAAO,KAAvC,EAA8C,MAAM,EAApD,EAAwD,UAAU,GAAlE,EAAuE,cAAc,EAArF;AAFF,IALF;AASE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,OAAO,KAAlC,EAAyC,UAAU,KAAnD,EAA0D,cAAc,EAAxE;AAFF,IATF;AAaE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,OAAO,KAAlC,EAAyC,MAAM,EAA/C,EAAmD,UAAU,KAA7D,EAAoE,cAAc,EAAlF;AAFF,IAbF;AAiBE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,WAA3B,EAAiC,OAAO,KAAxC,EAA+C,UAAU,GAAzD,EAA8D,cAAc,CAAC,EAAD,EAAK,EAAL,CAA5E;AAFF,IAjBF;AAqBE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,WAA3B,EAAiC,OAAO,KAAxC,EAA+C,MAAM,EAArD,EAAyD,UAAU,GAAnE,EAAwE,cAAc,CAAC,EAAD,EAAK,EAAL,CAAtF;AAFF;AArBF,EADF,EA2BI,SAAS,cAAT,CAAwB,iBAAxB,CA3BJ,E","file":"v-marks.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst style = { float: 'left', width: 160, height: 400, marginBottom: 160, marginLeft: 50 };\nconst parentStyle = { overflow: 'hidden' };\n\nconst marks = {\n '-10': '-10°C',\n 0: <strong>0°C</strong>,\n 26: '26°C',\n 37: '37°C',\n 50: '50°C',\n 100: {\n style: {\n color: 'red',\n },\n label: <strong>100°C</strong>,\n },\n};\n\nfunction log(value) {\n console.log(value);\n}\n\nReactDOM.render(\n <div style={parentStyle}>\n <div style={style}>\n <p>Slider with marks, `step=null`</p>\n <Slider vertical min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks and steps</p>\n <Slider vertical dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks, `included=false`</p>\n <Slider vertical min={-10} marks={marks} included={false} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks and steps, `included=false`</p>\n <Slider vertical min={-10} marks={marks} step={10} included={false} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Range with marks</p>\n <Slider vertical min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />\n </div>\n <div style={style}>\n <p>Range with marks and steps</p>\n <Slider vertical min={-10} range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />\n </div>\n </div>\n , document.getElementById('__react-content'));\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/v-marks.js\n **/"],"sourceRoot":""}
examples/v-range.html
+49 -46
View File
@@ -2,12 +2,12 @@
<html>
<head>
<title>v-range.js - example - rc-slider@3.8.2</title>
<title>v-range.js - example - rc-slider@4.0.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"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link href="https://a.alipayobjects.com/normalize.css/3.0.1/normalize.css" rel="stylesheet"/>
<style>
.highlight pre {
padding: .8em 1em;
@@ -251,58 +251,58 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<!--[if lt IE 9]>
<script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="common.css" />
</head>
<body>
<div class="container">
<div class="header">
<h1>rc-slider@3.8.2</h1>
<div class="container">
<div class="header">
<h1>rc-slider@4.0.0</h1>
<p>slider ui component for react</p>
</div>
<div class="example" id="__react-content"></div>
<script src="common.js?nowrap"></script>
<script src="v-range.js?nowrap"></script>
<div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint react/no-multi-comp: 0 */</span>
<p>slider ui component for react</p>
</div>
<div class="example" id="__react-content"></div>
<div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint react/no-multi-comp: 0 */</span>
<span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
<span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">const</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>);
<span class="hljs-keyword">const</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
<span class="hljs-keyword">const</span> style = {float: <span class="hljs-string">'left'</span>, width: <span class="hljs-number">180</span>, height: <span class="hljs-number">400</span>, marginBottom: <span class="hljs-number">160</span>, marginLeft: <span class="hljs-number">50</span>};
<span class="hljs-keyword">const</span> parentStyle = {overflow: <span class="hljs-string">'hidden'</span>};
<span class="hljs-keyword">const</span> style = { float: <span class="hljs-string">'left'</span>, width: <span class="hljs-number">180</span>, height: <span class="hljs-number">400</span>, marginBottom: <span class="hljs-number">160</span>, marginLeft: <span class="hljs-number">50</span> };
<span class="hljs-keyword">const</span> parentStyle = { overflow: <span class="hljs-string">'hidden'</span> };
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span><span class="hljs-params">(value)</span> </span>{
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">value</span>) </span>{
<span class="hljs-built_in">console</span>.log(value);
}
<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>{
getInitialState() {
<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>{
onLowerBoundChange(e) {
<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>{
onUpperBoundChange(e) {
<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>{
onSliderChange(value) {
log(value);
<span class="hljs-keyword">this</span>.setState({
value: value,
value,
});
},
handleApply: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
handleApply() {
<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]});
<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>{
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</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>
@@ -314,33 +314,33 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<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">div</span>&gt;</span>
);
)</span>;
},
});
const DynamicBounds = React.createClass({
<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
getInitialState() {
return {
min: 0,
max: 100,
<span class="hljs-keyword">return</span> {
min: <span class="hljs-number">0</span>,
max: <span class="hljs-number">100</span>,
};
},
onSliderChange: function(value) {
onSliderChange(value) {
log(value);
},
onMinChange: function(e) {
this.setState({
min: +e.target.value || 0,
onMinChange(e) {
<span class="hljs-keyword">this</span>.setState({
min: +e.target.value || <span class="hljs-number">0</span>,
});
},
onMaxChange: function(e) {
this.setState({
max: +e.target.value || 100,
onMaxChange(e) {
<span class="hljs-keyword">this</span>.setState({
max: +e.target.value || <span class="hljs-number">100</span>,
});
},
render: function() {
return (
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">50</span>]} <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</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">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>
@@ -348,12 +348,12 @@ const DynamicBounds = React.createClass({
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Max: <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.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMaxChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
);
)</span>;
},
});
ReactDOM.render(
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{parentStyle}</span>&gt;</span>
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{parentStyle}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Range，`allowCross=false`<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">allowCross</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[0,</span> <span class="hljs-attribute">20</span>]} <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>
@@ -381,13 +381,16 @@ ReactDOM.render(
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
, document.getElementById('__react-content'));
</span></code></pre></div>
</div>
<a href="http://github.com/react-component/slider">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
</div>
<a href="http://github.com/react-component/slider">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
<script src="common.js?nowrap"></script>
<script src="v-range.js?nowrap"></script>
</body>
</html>
examples/v-range.js
+5 -7
View File
@@ -3,22 +3,22 @@ webpackJsonp([5],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(222);
module.exports = __webpack_require__(322);
/***/ },
/***/ 222:
/***/ 322:
/***/ function(module, exports, __webpack_require__) {
/* eslint react/no-multi-comp: 0 */
'use strict';
/* eslint react/no-multi-comp: 0 */
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(35);
var Slider = __webpack_require__(174);
var ReactDOM = __webpack_require__(37);
var Slider = __webpack_require__(177);
var style = { float: 'left', width: 180, height: 400, marginBottom: 160, marginLeft: 50 };
var parentStyle = { overflow: 'hidden' };
@@ -29,7 +29,6 @@ webpackJsonp([5],{
var CustomizedRange = React.createClass({
displayName: 'CustomizedRange',
getInitialState: function getInitialState() {
return {
lowerBound: 20,
@@ -86,7 +85,6 @@ webpackJsonp([5],{
var DynamicBounds = React.createClass({
displayName: 'DynamicBounds',
getInitialState: function getInitialState() {
return {
min: 0,
examples/v-range.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/v-slider.html
+36 -33
View File
@@ -2,12 +2,12 @@
<html>
<head>
<title>v-slider.js - example - rc-slider@3.8.2</title>
<title>v-slider.js - example - rc-slider@4.0.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"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<link href="https://a.alipayobjects.com/normalize.css/3.0.1/normalize.css" rel="stylesheet"/>
<style>
.highlight pre {
padding: .8em 1em;
@@ -251,76 +251,76 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<!--[if lt IE 9]>
<script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
<![endif]-->
<link rel="stylesheet" href="common.css" />
</head>
<body>
<div class="container">
<div class="header">
<h1>rc-slider@3.8.2</h1>
<div class="container">
<div class="header">
<h1>rc-slider@4.0.0</h1>
<p>slider ui component for react</p>
</div>
<div class="example" id="__react-content"></div>
<script src="common.js?nowrap"></script>
<script src="v-slider.js?nowrap"></script>
<div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint react/no-multi-comp: 0 */</span>
<p>slider ui component for react</p>
</div>
<div class="example" id="__react-content"></div>
<div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint react/no-multi-comp: 0 */</span>
<span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
<span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">const</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>);
<span class="hljs-keyword">const</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
<span class="hljs-keyword">const</span> style = {float: <span class="hljs-string">'left'</span>, width: <span class="hljs-number">200</span>, height: <span class="hljs-number">400</span>, marginBottom: <span class="hljs-number">160</span>, marginLeft: <span class="hljs-number">50</span>};
<span class="hljs-keyword">const</span> parentStyle = {overflow: <span class="hljs-string">'hidden'</span>};
<span class="hljs-keyword">const</span> style = { float: <span class="hljs-string">'left'</span>, width: <span class="hljs-number">200</span>, height: <span class="hljs-number">400</span>, marginBottom: <span class="hljs-number">160</span>, marginLeft: <span class="hljs-number">50</span> };
<span class="hljs-keyword">const</span> parentStyle = { overflow: <span class="hljs-string">'hidden'</span> };
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span><span class="hljs-params">(value)</span> </span>{
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">value</span>) </span>{
<span class="hljs-built_in">console</span>.log(value);
}
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">percentFormatter</span><span class="hljs-params">(v)</span> </span>{
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">percentFormatter</span>(<span class="hljs-params">v</span>) </span>{
<span class="hljs-keyword">return</span> v + <span class="hljs-string">' %'</span>;
}
<span class="hljs-keyword">const</span> CustomizedSlider = React.createClass({
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
getInitialState() {
<span class="hljs-keyword">return</span> {
value: <span class="hljs-number">50</span>,
};
},
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
onSliderChange(value) {
log(value);
<span class="hljs-keyword">this</span>.setState({
value: value,
value,
});
},
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
render() {
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</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-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
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>{
onSliderChange(value) {
log(value);
},
onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
onMinChange(e) {
<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>{
onMaxChange(e) {
<span class="hljs-keyword">this</span>.setState({
max: +e.target.value || <span class="hljs-number">100</span>,
});
},
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Slider with dynamic `min` `max`<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
@@ -331,12 +331,12 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Max: <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.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMaxChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
);
)</span>;
},
});
ReactDOM.render(
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{parentStyle}</span>&gt;</span>
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{parentStyle}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Slider<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">tipTransitionName</span>=<span class="hljs-value">"rc-slider-tooltip-zoom-down"</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>
@@ -371,13 +371,16 @@ ReactDOM.render(
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
, document.getElementById('__react-content'));
</span></code></pre></div>
</div>
<a href="http://github.com/react-component/slider">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
</div>
<a href="http://github.com/react-component/slider">
<img style="position: absolute; top: 0; right: 0; border: 0;"
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
</a>
<script src="common.js?nowrap"></script>
<script src="v-slider.js?nowrap"></script>
</body>
</html>
examples/v-slider.js
+5 -7
View File
@@ -3,22 +3,22 @@ webpackJsonp([6],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(223);
module.exports = __webpack_require__(323);
/***/ },
/***/ 223:
/***/ 323:
/***/ function(module, exports, __webpack_require__) {
/* eslint react/no-multi-comp: 0 */
'use strict';
/* eslint react/no-multi-comp: 0 */
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(35);
var Slider = __webpack_require__(174);
var ReactDOM = __webpack_require__(37);
var Slider = __webpack_require__(177);
var style = { float: 'left', width: 200, height: 400, marginBottom: 160, marginLeft: 50 };
var parentStyle = { overflow: 'hidden' };
@@ -33,7 +33,6 @@ webpackJsonp([6],{
var CustomizedSlider = React.createClass({
displayName: 'CustomizedSlider',
getInitialState: function getInitialState() {
return {
value: 50
@@ -52,7 +51,6 @@ webpackJsonp([6],{
var DynamicBounds = React.createClass({
displayName: 'DynamicBounds',
getInitialState: function getInitialState() {
return {
min: 0,
examples/v-slider.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
index.html
+16 -9
View File
@@ -7,7 +7,7 @@
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<title>rc-slider@3.8.2 - slider ui component for react</title>
<title>rc-slider@4.0.0 - slider ui component for react</title>
<style>
@font-face {
font-family: octicons-anchor;
@@ -737,7 +737,7 @@
<body>
<div class="header">
<h1>rc-slider@3.8.2</h1>
<h1>rc-slider@4.0.0</h1>
</div>
<div class="examples">
<h3>EXAMPLES</h3>
@@ -777,6 +777,7 @@
<h2>Screenshots<a id="user-content-screenshots" name="screenshots" class="anchor" aria-hidden="true" href="#screenshots"><span class="octicon octicon-link"></span></a></h2><p><img src="https://t.alipayobjects.com/images/T1ki8fXeprXXXXXXXX.png" width="550"/></p>
<p><img src="https://t.alipayobjects.com/images/T1pPhfXhBqXXXXXXXX.png" width="550"/></p>
<p><img src="https://t.alipayobjects.com/images/T1wO8fXd4rXXXXXXXX.png" width="550"/></p>
<p><img src="http://i.giphy.com/l46Cs36c9HrHMExoc.gif"/></p>
<h2>Feature<a id="user-content-feature" name="feature" class="anchor" aria-hidden="true" href="#feature"><span class="octicon octicon-link"></span></a></h2><ul>
<li>support ie8,ie8+,chrome,firefox,safari</li>
</ul>
@@ -828,15 +829,21 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-t
</tr>
<tr>
<td>range</td>
<td>boolean</td>
<td>boolean or number</td>
<td>false</td>
<td>Determines the type of slider. If range is <code>true</code>, two handles will be rendered in order to select a range.</td>
<td>Determines the type of slider. If range is <code>true</code>, two handles will be rendered in order to select a range. If range is a number, multiple handles will be rendered (number + 1). Using <code>range={true}</code> is equivalent to <code>range={1}</code>.</td>
</tr>
<tr>
<td>allowCross</td>
<td>boolean</td>
<td>true</td>
<td>When <code>range</code> is <code>true</code>, <code>allowCross</code> could be set as <code>true</code> to allow those two handles cross.</td>
<td>When <code>range</code> is <code>true</code>, <code>allowCross</code> could be set as <code>true</code> to allow those handles to cross.</td>
</tr>
<tr>
<td>pushable</td>
<td>boolean or number</td>
<td>true</td>
<td>When <code>range</code> is <code>true</code>, <code>pushable</code> could be set as <code>true</code> to allow pushing of surrounding handles when moving an handle. When set to a number, the number will be the minimum ensured distance between handles. Example: <img src="http://i.giphy.com/l46Cs36c9HrHMExoc.gif"/></td>
</tr>
<tr>
<td>vertical</td>
@@ -846,15 +853,15 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-t
</tr>
<tr>
<td>defaultValue</td>
<td>number or [number, number]</td>
<td>number or [number, number, ...]</td>
<td>0 or [0, 0]</td>
<td>Set initial positions of handles. If range is <code>false</code>, the type of <code>defaultValue</code> should be <code>number</code>. Otherwise, <code>[number, number]</code></td>
<td>Set initial positions of handles. If range is <code>false</code>, the type of <code>defaultValue</code> should be <code>number</code>. Otherwise, <code>[number, number, ...]</code></td>
</tr>
<tr>
<td>value</td>
<td>number or [number, number]</td>
<td>number or [number, number, ...]</td>
<td></td>
<td>Set current positions of handles. If range is <code>false</code>, the type of <code>defaultValue</code> should be <code>number</code>. Otherwise, <code>[number, number]</code></td>
<td>Set current positions of handles. If range is <code>false</code>, the type of <code>defaultValue</code> should be <code>number</code>. Otherwise, <code>[number, number, ...]</code></td>
</tr>
<tr>
<td>handle</td>