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:
再飞
2015-11-23 16:28:35 +08:00
parent fe817ef1c6
commit f13e546df1
17 changed files with 24890 additions and 26129 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/simple.css → examples/common.css
+47 -47
View File
@@ -101,52 +101,6 @@
.rc-slider-disabled .rc-slider-dot {
cursor: not-allowed !important;
}
.rc-slider-tooltip {
position: absolute;
left: -9999px;
top: -9999px;
z-index: 4;
visibility: visible;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-slider-tooltip-hidden {
display: none;
}
.rc-slider-tooltip-placement-top {
padding: 4px 0 8px 0;
}
.rc-slider-tooltip-inner {
padding: 6px 2px;
min-width: 24px;
height: 24px;
font-size: 12px;
line-height: 1;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #6c6c6c;
border-radius: 6px;
box-shadow: 0 0 4px #d9d9d9;
}
.rc-slider-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.rc-slider-tooltip-placement-top .rc-slider-tooltip-arrow {
bottom: 4px;
left: 50%;
margin-left: -4px;
border-width: 4px 4px 0;
border-top-color: #6c6c6c;
}
.rc-slider-tooltip-zoom-down-enter,
.rc-slider-tooltip-zoom-down-appear {
-webkit-animation-duration: .3s;
@@ -251,5 +205,51 @@
transform: scale(0, 0);
}
}
.rc-tooltip {
position: absolute;
left: -9999px;
top: -9999px;
z-index: 4;
visibility: visible;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-tooltip * {
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.rc-tooltip-hidden {
display: none;
}
.rc-tooltip-placement-top {
padding: 4px 0 8px 0;
}
.rc-tooltip-inner {
padding: 6px 2px;
min-width: 24px;
height: 24px;
font-size: 12px;
line-height: 1;
color: #fff;
text-align: center;
text-decoration: none;
background-color: #6c6c6c;
border-radius: 6px;
box-shadow: 0 0 4px #d9d9d9;
}
.rc-tooltip-arrow {
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.rc-tooltip-placement-top .rc-tooltip-arrow {
bottom: 4px;
left: 50%;
margin-left: -4px;
border-width: 4px 4px 0;
border-top-color: #6c6c6c;
}
/*# sourceMappingURL=simple.css.map*/
/*# sourceMappingURL=common.css.map*/
examples/common.css.map
+1
View File
File diff suppressed because one or more lines are too long
examples/common.js
+23801 -3
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/marks.html
+328
View File
@@ -0,0 +1,328 @@
<!DOCTYPE html>
<html>
<head>
<title>marks.js - example - rc-slider@3.1.2</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"/>
<style>
.highlight pre {
padding: .8em 1em;
font: 14px/20px Consolas, Monaco, 'Andale Mono', monospace;
border: 1px solid #e5e8ec;
border-radius: 3px;
background-color: #21221d;
background-image: -webkit-linear-gradient(#21221d 50%, #272822 50%);
background-image: -moz-linear-gradient(#21221d 50%, #272822 50%);
background-image: -ms-linear-gradient(#21221d 50%, #272822 50%);
background-image: -o-linear-gradient(#21221d 50%, #272822 50%);
background-image: linear-gradient(#21221d 50%, #272822 50%);
background-size: 40px 40px;
background-origin: content-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.highlight pre > code {
font-family: inherit;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
vertical-align: 2px;
display: block;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
color: #E5E5C2;
}
</style>
<style>
/*
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #23241f;
-webkit-text-size-adjust: none;
}
.hljs,
.hljs-tag,
.css .hljs-rule,
.css .hljs-value,
.aspectj .hljs-function,
.css .hljs-function
.hljs-preprocessor,
.hljs-pragma {
color: #f8f8f2;
}
.hljs-strongemphasis,
.hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
}
.hljs-bullet,
.hljs-blockquote,
.hljs-horizontal_rule,
.hljs-number,
.hljs-regexp,
.alias .hljs-keyword,
.hljs-literal,
.hljs-hexcolor {
color: #ae81ff;
}
.hljs-code,
.hljs-title,
.css .hljs-class,
.hljs-class .hljs-title:last-child {
color: #a6e22e;
/*color: #e6db74;*/
}
.hljs-link_url {
font-size: 80%;
}
.hljs-strong,
.hljs-strongemphasis {
font-weight: bold;
}
.hljs-emphasis,
.hljs-strongemphasis,
.hljs-class .hljs-title:last-child,
.hljs-typename {
font-style: italic;
}
.hljs-keyword,
.ruby .hljs-class .hljs-keyword:first-child,
.ruby .hljs-function .hljs-keyword,
.hljs-function,
.hljs-change,
.hljs-winutils,
.hljs-flow,
.nginx .hljs-title,
.tex .hljs-special,
.hljs-header,
.hljs-symbol,
.hljs-symbol .hljs-string,
.hljs-tag .hljs-title,
.hljs-value,
.alias .hljs-keyword:first-child,
.css .hljs-tag,
.css .unit,
.css .hljs-important {
color: #f92672;
}
.hljs-function .hljs-keyword,
.hljs-class .hljs-keyword:first-child,
.hljs-aspect .hljs-keyword:first-child,
.hljs-constant,
.hljs-typename,
.hljs-name,
.css .hljs-attribute {
color: #66d9ef;
}
.hljs-variable,
.hljs-params,
.hljs-class .hljs-title,
.hljs-aspect .hljs-title {
color: #f8f8f2;
}
.hljs-tag .hljs-value,
.hljs-string,
.css .hljs-id,
.hljs-subst,
.hljs-type,
.ruby .hljs-class .hljs-parent,
.django .hljs-template_tag,
.django .hljs-variable,
.smalltalk .hljs-class,
.django .hljs-filter .hljs-argument,
.smalltalk .hljs-localvars,
.smalltalk .hljs-array,
.hljs-attr_selector,
.hljs-pseudo,
.hljs-addition,
.hljs-stream,
.hljs-envvar,
.apache .hljs-tag,
.apache .hljs-cbracket,
.tex .hljs-command,
.hljs-prompt,
.hljs-link_label,
.hljs-link_url {
color: #e6db74;
}
.hljs-comment,
.hljs-annotation,
.hljs-decorator,
.hljs-pi,
.hljs-doctype,
.hljs-deletion,
.hljs-shebang,
.apache .hljs-sqbracket,
.tex .hljs-formula {
color: #75715e;
}
.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata,
.xml .php,
.php .xml {
opacity: 0.5;
}
/***********/
.hljs-attribute{
color: #a6e22e;
}
/***** node keyword ******/
.hljs-built_in{
color: #3396dc;
font-weight: bold;
}
</style>
<style>
.container {
width: 86%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.header p {
color: #666;
}
.example {
padding: 20px 0;
}
</style>
<script>
// Console-polyfill. MIT license.
// https://github.com/paulmillr/console-polyfill
// Make it safe to do console.log() always.
(function (global) {
'use strict';
global.console = global.console || {};
var con = global.console;
var prop, method;
var empty = {};
var dummy = function () {
};
var properties = 'memory'.split(',');
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
while (prop = properties.pop()) con[prop] = con[prop] || empty;
while (method = methods.pop()) con[method] = con[method] || dummy;
})(typeof window === 'undefined' ? this : window);
// Using `this` for web workers while maintaining compatibility with browser
// targeted script loaders such as Browserify or Webpack where the only way to
// get to the global object is via `window`.
</script>
<!--[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.1.2</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-pi">'use strict'</span>;
<span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
<span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>);
<span class="hljs-keyword">var</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
<span class="hljs-keyword">var</span> style = {width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span>};
<span class="hljs-keyword">var</span> marks = {
<span class="hljs-string">'-10'</span>: <span class="hljs-string">'-10°C'</span>,
<span class="hljs-number">0</span>: <span class="hljs-string">'0°C'</span>,
<span class="hljs-number">26</span>: <span class="hljs-string">'26°C'</span>,
<span class="hljs-number">37</span>: <span class="hljs-string">'37°C'</span>,
<span class="hljs-number">100</span>: <span class="hljs-string">'100°C'</span>
};
<span class="hljs-keyword">var</span> log = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
<span class="hljs-built_in">console</span>.log(value);
};
ReactDOM.render(
<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>Slider with marks, `step=null`<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">{-10}</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{null}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{20}</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>Slider with marks and steps<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">{-10}</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{10}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{20}</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>Slider with marks, `included=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">min</span>=<span class="hljs-value">{-10}</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">included</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{20}</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>Slider with marks and steps, `included=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">min</span>=<span class="hljs-value">{-10}</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{10}</span> <span class="hljs-attribute">included</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{20}</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>Range with marks<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">{-10}</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">defaultValue</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>Range with marks and steps<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">{-10}</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{10}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">defaultValue</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>&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>
</body>
</html>
examples/marks.js
+100
View File
@@ -0,0 +1,100 @@
webpackJsonp([0],[
/* 0 */
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(1);
/***/ },
/* 1 */
/***/ function(module, exports, __webpack_require__) {
'use strict';
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(160);
var Slider = __webpack_require__(161);
var style = { width: 400, margin: 50 };
var marks = {
'-10': '-10°C',
0: '0°C',
26: '26°C',
37: '37°C',
100: '100°C'
};
var log = function log(value) {
console.log(value);
};
ReactDOM.render(React.createElement(
'div',
null,
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Slider with marks, `step=null`'
),
React.createElement(Slider, { min: -10, marks: marks, step: null, onChange: log, defaultValue: 20 })
),
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Slider with marks and steps'
),
React.createElement(Slider, { min: -10, marks: marks, step: 10, onChange: log, defaultValue: 20 })
),
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Slider with marks, `included=false`'
),
React.createElement(Slider, { min: -10, marks: marks, included: false, defaultValue: 20 })
),
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Slider with marks and steps, `included=false`'
),
React.createElement(Slider, { min: -10, marks: marks, step: 10, included: false, defaultValue: 20 })
),
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Range with marks'
),
React.createElement(Slider, { min: -10, range: true, marks: marks, onChange: log, defaultValue: [20, 40] })
),
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Range with marks and steps'
),
React.createElement(Slider, { min: -10, range: true, marks: marks, step: 10, onChange: log, defaultValue: [20, 40] })
)
), document.getElementById('__react-content'));
/***/ }
]);
//# sourceMappingURL=marks.js.map
examples/marks.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["webpack:///./examples/marks.js"],"names":[],"mappings":";;;;;;;;;;;AAAA,aAAY,CAAC;;AAEb,oBAAO,CAAC,CAA6B,CAAC,CAAC;;AAEvC,KAAI,KAAK,GAAG,mBAAO,CAAC,CAAO,CAAC,CAAC;AAC7B,KAAI,QAAQ,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;AACpC,KAAI,MAAM,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;;AAElC,KAAI,KAAK,GAAG,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAC,CAAC;AACrC,KAAI,KAAK,GAAG;AACV,QAAK,EAAE,OAAO;AACd,IAAC,EAAE,KAAK;AACR,KAAE,EAAE,MAAM;AACV,KAAE,EAAE,MAAM;AACV,MAAG,EAAE,OAAO;EACb,CAAC;;AAEF,KAAI,GAAG,GAAG,SAAN,GAAG,CAAY,KAAK,EAAE;AACxB,UAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;EACpB,CAAC;;AAEF,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,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,EAAG,GAAG;IACzE;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":["'use strict';\n\nrequire('rc-slider/assets/index.less');\n\nvar React = require('react');\nvar ReactDOM = require('react-dom');\nvar Slider = require('rc-slider');\n\nvar style = {width: 400, margin: 50};\nvar marks = {\n '-10': '-10°C',\n 0: '0°C',\n 26: '26°C',\n 37: '37°C',\n 100: '100°C'\n};\n\nvar log = function(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 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
+331
View File
@@ -0,0 +1,331 @@
<!DOCTYPE html>
<html>
<head>
<title>range.js - example - rc-slider@3.1.2</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"/>
<style>
.highlight pre {
padding: .8em 1em;
font: 14px/20px Consolas, Monaco, 'Andale Mono', monospace;
border: 1px solid #e5e8ec;
border-radius: 3px;
background-color: #21221d;
background-image: -webkit-linear-gradient(#21221d 50%, #272822 50%);
background-image: -moz-linear-gradient(#21221d 50%, #272822 50%);
background-image: -ms-linear-gradient(#21221d 50%, #272822 50%);
background-image: -o-linear-gradient(#21221d 50%, #272822 50%);
background-image: linear-gradient(#21221d 50%, #272822 50%);
background-size: 40px 40px;
background-origin: content-box;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
.highlight pre > code {
font-family: inherit;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
vertical-align: 2px;
display: block;
-moz-tab-size: 2;
-o-tab-size: 2;
tab-size: 2;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
color: #E5E5C2;
}
</style>
<style>
/*
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
.hljs {
display: block;
overflow-x: auto;
padding: 0.5em;
background: #23241f;
-webkit-text-size-adjust: none;
}
.hljs,
.hljs-tag,
.css .hljs-rule,
.css .hljs-value,
.aspectj .hljs-function,
.css .hljs-function
.hljs-preprocessor,
.hljs-pragma {
color: #f8f8f2;
}
.hljs-strongemphasis,
.hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
}
.hljs-bullet,
.hljs-blockquote,
.hljs-horizontal_rule,
.hljs-number,
.hljs-regexp,
.alias .hljs-keyword,
.hljs-literal,
.hljs-hexcolor {
color: #ae81ff;
}
.hljs-code,
.hljs-title,
.css .hljs-class,
.hljs-class .hljs-title:last-child {
color: #a6e22e;
/*color: #e6db74;*/
}
.hljs-link_url {
font-size: 80%;
}
.hljs-strong,
.hljs-strongemphasis {
font-weight: bold;
}
.hljs-emphasis,
.hljs-strongemphasis,
.hljs-class .hljs-title:last-child,
.hljs-typename {
font-style: italic;
}
.hljs-keyword,
.ruby .hljs-class .hljs-keyword:first-child,
.ruby .hljs-function .hljs-keyword,
.hljs-function,
.hljs-change,
.hljs-winutils,
.hljs-flow,
.nginx .hljs-title,
.tex .hljs-special,
.hljs-header,
.hljs-symbol,
.hljs-symbol .hljs-string,
.hljs-tag .hljs-title,
.hljs-value,
.alias .hljs-keyword:first-child,
.css .hljs-tag,
.css .unit,
.css .hljs-important {
color: #f92672;
}
.hljs-function .hljs-keyword,
.hljs-class .hljs-keyword:first-child,
.hljs-aspect .hljs-keyword:first-child,
.hljs-constant,
.hljs-typename,
.hljs-name,
.css .hljs-attribute {
color: #66d9ef;
}
.hljs-variable,
.hljs-params,
.hljs-class .hljs-title,
.hljs-aspect .hljs-title {
color: #f8f8f2;
}
.hljs-tag .hljs-value,
.hljs-string,
.css .hljs-id,
.hljs-subst,
.hljs-type,
.ruby .hljs-class .hljs-parent,
.django .hljs-template_tag,
.django .hljs-variable,
.smalltalk .hljs-class,
.django .hljs-filter .hljs-argument,
.smalltalk .hljs-localvars,
.smalltalk .hljs-array,
.hljs-attr_selector,
.hljs-pseudo,
.hljs-addition,
.hljs-stream,
.hljs-envvar,
.apache .hljs-tag,
.apache .hljs-cbracket,
.tex .hljs-command,
.hljs-prompt,
.hljs-link_label,
.hljs-link_url {
color: #e6db74;
}
.hljs-comment,
.hljs-annotation,
.hljs-decorator,
.hljs-pi,
.hljs-doctype,
.hljs-deletion,
.hljs-shebang,
.apache .hljs-sqbracket,
.tex .hljs-formula {
color: #75715e;
}
.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata,
.xml .php,
.php .xml {
opacity: 0.5;
}
/***********/
.hljs-attribute{
color: #a6e22e;
}
/***** node keyword ******/
.hljs-built_in{
color: #3396dc;
font-weight: bold;
}
</style>
<style>
.container {
width: 86%;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
}
.header p {
color: #666;
}
.example {
padding: 20px 0;
}
</style>
<script>
// Console-polyfill. MIT license.
// https://github.com/paulmillr/console-polyfill
// Make it safe to do console.log() always.
(function (global) {
'use strict';
global.console = global.console || {};
var con = global.console;
var prop, method;
var empty = {};
var dummy = function () {
};
var properties = 'memory'.split(',');
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
while (prop = properties.pop()) con[prop] = con[prop] || empty;
while (method = methods.pop()) con[method] = con[method] || dummy;
})(typeof window === 'undefined' ? this : window);
// Using `this` for web workers while maintaining compatibility with browser
// targeted script loaders such as Browserify or Webpack where the only way to
// get to the global object is via `window`.
</script>
<!--[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.1.2</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-pi">'use strict'</span>;
<span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
<span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>);
<span class="hljs-keyword">var</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
<span class="hljs-keyword">var</span> style = {width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span>};
<span class="hljs-keyword">var</span> log = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
<span class="hljs-built_in">console</span>.log(value);
};
<span class="hljs-keyword">var</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> {
value: [<span class="hljs-number">20</span>, <span class="hljs-number">40</span>]
}
},
onChange: <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.onChange}</span> /&gt;</span>;</span>
}
});
ReactDOM.render(
<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<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">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>
<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，`step=20` <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">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</span>]} <span class="hljs-attribute">onBeforeChange</span>=<span class="hljs-value">{log}</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>Basic Range，`step=20, dots` <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">dots</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</span>]} <span class="hljs-attribute">onAfterChange</span>=<span class="hljs-value">{log}</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>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>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>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<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>
</body>
</html>
examples/range.js
+104
View File
@@ -0,0 +1,104 @@
webpackJsonp([1],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(202);
/***/ },
/***/ 202:
/***/ function(module, exports, __webpack_require__) {
'use strict';
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(160);
var Slider = __webpack_require__(161);
var style = { width: 400, margin: 50 };
var log = function log(value) {
console.log(value);
};
var CustomizedRange = React.createClass({
displayName: 'CustomizedRange',
getInitialState: function getInitialState() {
return {
value: [20, 40]
};
},
onChange: function onChange(value) {
log(value);
this.setState({
value: value
});
},
render: function render() {
return React.createElement(Slider, { range: true, value: this.state.value, onChange: this.onChange });
}
});
ReactDOM.render(React.createElement(
'div',
null,
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Basic Range'
),
React.createElement(Slider, { range: true, defaultValue: [0, 20], onChange: log })
),
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Basic Range，`step=20` '
),
React.createElement(Slider, { range: true, step: 20, defaultValue: [20, 40], onBeforeChange: log })
),
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Basic Range，`step=20, dots` '
),
React.createElement(Slider, { range: true, dots: true, step: 20, defaultValue: [20, 40], onAfterChange: log })
),
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Controlled Range'
),
React.createElement(Slider, { range: true, value: [20, 40] })
),
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Customized Range'
),
React.createElement(CustomizedRange, null)
)
), document.getElementById('__react-content'));
/***/ }
});
//# sourceMappingURL=range.js.map
examples/range.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["webpack:///./examples/range.js"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,aAAY,CAAC;;AAEb,oBAAO,CAAC,CAA6B,CAAC,CAAC;;AAEvC,KAAI,KAAK,GAAG,mBAAO,CAAC,CAAO,CAAC,CAAC;AAC7B,KAAI,QAAQ,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;AACpC,KAAI,MAAM,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;;AAElC,KAAI,KAAK,GAAG,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAC,CAAC;AACrC,KAAI,GAAG,GAAG,SAAN,GAAG,CAAY,KAAK,EAAE;AACxB,UAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;EACpB,CAAC;;AAEF,KAAI,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC;;;AACtC,kBAAe,EAAE,2BAAW;AAC1B,YAAO;AACL,YAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC;MAChB;IACF;AACD,WAAQ,EAAE,kBAAS,KAAK,EAAE;AACxB,QAAG,CAAC,KAAK,CAAC,CAAC;AACX,SAAI,CAAC,QAAQ,CAAC;AACZ,YAAK,EAAE,KAAK;MACb,CAAC,CAAC;IACJ;AACD,SAAM,EAAE,kBAAW;AACjB,YAAO,oBAAC,MAAM,IAAC,KAAK,QAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAS,GAAG,CAAC;IAC3E;EACF,CAAC,CAAC;;AAEH,SAAQ,CAAC,MAAM,CACb;;;GACE;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAkB;KAClB,oBAAC,MAAM,IAAC,KAAK,QAAC,YAAY,EAAE,CAAC,CAAC,EAAE,EAAE,CAAE,EAAC,QAAQ,EAAE,GAAI,GAAG;IAClD;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAA6B;KAC7B,oBAAC,MAAM,IAAC,KAAK,QAAC,IAAI,EAAE,EAAG,EAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAE,EAAC,cAAc,EAAE,GAAI,GAAG;IACnE;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAmC;KACnC,oBAAC,MAAM,IAAC,KAAK,QAAC,IAAI,QAAC,IAAI,EAAE,EAAG,EAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAE,EAAC,aAAa,EAAE,GAAI,GAAG;IACvE;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAuB;KACvB,oBAAC,MAAM,IAAC,KAAK,QAAC,KAAK,EAAE,CAAC,EAAE,EAAE,EAAE,CAAE,GAAG;IAC7B;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAuB;KACvB,oBAAC,eAAe,OAAG;IACf;EACF,EACJ,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,C","file":"range.js","sourcesContent":["'use strict';\n\nrequire('rc-slider/assets/index.less');\n\nvar React = require('react');\nvar ReactDOM = require('react-dom');\nvar Slider = require('rc-slider');\n\nvar style = {width: 400, margin: 50};\nvar log = function(value) {\n console.log(value);\n};\n\nvar CustomizedRange = React.createClass({\n getInitialState: function() {\n return {\n value: [20, 40]\n }\n },\n onChange: function(value) {\n log(value);\n this.setState({\n value: value\n });\n },\n render: function() {\n return <Slider range value={this.state.value} onChange={this.onChange} />;\n }\n});\n\nReactDOM.render(\n <div>\n <div style={style}>\n <p>Basic Range</p>\n <Slider range defaultValue={[0, 20]} onChange={log} />\n </div>\n <div style={style}>\n <p>Basic Range，`step=20` </p>\n <Slider range step={20} defaultValue={[20, 40]} onBeforeChange={log} />\n </div>\n <div style={style}>\n <p>Basic Range，`step=20, dots` </p>\n <Slider range dots step={20} defaultValue={[20, 40]} onAfterChange={log} />\n </div>\n <div style={style}>\n <p>Controlled Range</p>\n <Slider range value={[20, 40]} />\n </div>\n <div style={style}>\n <p>Customized Range</p>\n <CustomizedRange />\n </div>\n </div>\n , document.getElementById('__react-content'));\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/range.js\n **/"],"sourceRoot":""}
examples/simple.css.map
-1
View File
File diff suppressed because one or more lines are too long
examples/simple.js
-26017
View File
File diff suppressed because it is too large Load Diff
examples/simple.js.map
-1
View File
File diff suppressed because one or more lines are too long
examples/simple.html → examples/slider.html
+38 -33
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>simple.js - example - rc-slider@2.3.2</title>
<title>slider.js - example - rc-slider@3.1.2</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"/>
@@ -251,19 +251,19 @@ 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="simple.css" />
<link rel="stylesheet" href="common.css" />
</head>
<body>
<div class="container">
<div class="header">
<h1>rc-slider@2.3.2</h1>
<h1>rc-slider@3.1.2</h1>
<p>slider ui component for react</p>
</div>
<div class="example" id="__react-content"></div>
<script src="common.js?nowrap"></script>
<script src="simple.js?nowrap"></script>
<script src="slider.js?nowrap"></script>
<div class="highlight"><pre><code language="js"><span class="hljs-pi">'use strict'</span>;
<span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
@@ -271,54 +271,59 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>);
<span class="hljs-keyword">var</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
<span class="hljs-keyword">var</span> style = {width:<span class="hljs-number">400</span>,margin:<span class="hljs-number">50</span>};
<span class="hljs-keyword">var</span> log = <span class="hljs-built_in">console</span>.log.bind(<span class="hljs-built_in">console</span>);
<span class="hljs-keyword">var</span> style = {width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span>};
<span class="hljs-keyword">var</span> log = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">value</span>) </span>{
<span class="hljs-built_in">console</span>.log(value);
};
<span class="hljs-keyword">var</span> marks = [<span class="hljs-string">"状态1"</span>,<span class="hljs-string">"状态2"</span>,<span class="hljs-string">"状态3"</span>,<span class="hljs-string">"状态4"</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">return</span> v + <span class="hljs-string">' %'</span>;
}
<span class="hljs-keyword">var</span> CustomizedSlider = 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> {
value: <span class="hljs-number">50</span>
}
},
onChange: <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">value</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onChange}</span> /&gt;</span>;</span>
}
});
ReactDOM.render(
<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>基础滑块<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">onChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">tipTransitionName</span>=<span class="hljs-value">'rc-slider-tooltip-zoom-down'</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>
<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>基础滑块，step=20<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">step</span>=<span class="hljs-value">{20}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Slider，`step=20`<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">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{50}</span> <span class="hljs-attribute">onBeforeChange</span>=<span class="hljs-value">{log}</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>基础滑块，step=20 带圆点<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">dots</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{20}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Slider，`step=20, dots`<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">dots</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{100}</span> <span class="hljs-attribute">onAfterChange</span>=<span class="hljs-value">{log}</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>双滑块<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">min</span>=<span class="hljs-value">{10}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{90}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[0,</span> <span class="hljs-attribute">30</span>]} <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Slider with `tipFormatter`<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">tipFormatter</span>=<span class="hljs-value">{percentFormatter}</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>
<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>双滑块，step=20 <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">dots</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[0,</span> <span class="hljs-attribute">30</span>]} <span class="hljs-attribute">onAfterChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">included</span>=<span class="hljs-value">{false}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Controlled 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">value</span>=<span class="hljs-value">{50}</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>分段式滑块（包含关系）<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">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">defaultIndex</span>=<span class="hljs-value">{1}</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>分段式滑块 (双)<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">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">defaultIndex</span>=<span class="hljs-value">{[1,2]}</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>分段式滑块（并列关系）<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">marks</span>=<span class="hljs-value">{marks}</span> <span class="hljs-attribute">included</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultIndex</span>=<span class="hljs-value">{1}</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>基础滑块<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">onChange</span>=<span class="hljs-value">{log}</span> <span class="hljs-attribute">tipFormatter</span>=<span class="hljs-value">{percentFormatter}</span> <span class="hljs-attribute">tipTransitionName</span>=<span class="hljs-value">'rc-slider-tooltip-zoom-down'</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Customized Slider<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">CustomizedSlider</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>&gt;</span>
, document.getElementById('__react-content'));
examples/slider.js
+118
View File
@@ -0,0 +1,118 @@
webpackJsonp([2],{
/***/ 0:
/***/ function(module, exports, __webpack_require__) {
module.exports = __webpack_require__(203);
/***/ },
/***/ 203:
/***/ function(module, exports, __webpack_require__) {
'use strict';
__webpack_require__(2);
var React = __webpack_require__(3);
var ReactDOM = __webpack_require__(160);
var Slider = __webpack_require__(161);
var style = { width: 400, margin: 50 };
var log = function log(value) {
console.log(value);
};
function percentFormatter(v) {
return v + ' %';
}
var CustomizedSlider = React.createClass({
displayName: 'CustomizedSlider',
getInitialState: function getInitialState() {
return {
value: 50
};
},
onChange: function onChange(value) {
log(value);
this.setState({
value: value
});
},
render: function render() {
return React.createElement(Slider, { value: this.state.value, onChange: this.onChange });
}
});
ReactDOM.render(React.createElement(
'div',
null,
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Basic Slider'
),
React.createElement(Slider, { tipTransitionName: 'rc-slider-tooltip-zoom-down', onChange: log })
),
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Basic Slider，`step=20`'
),
React.createElement(Slider, { step: 20, defaultValue: 50, onBeforeChange: log })
),
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Basic Slider，`step=20, dots`'
),
React.createElement(Slider, { dots: true, step: 20, defaultValue: 100, onAfterChange: log })
),
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Basic Slider with `tipFormatter`'
),
React.createElement(Slider, { tipFormatter: percentFormatter, tipTransitionName: 'rc-slider-tooltip-zoom-down', onChange: log })
),
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Controlled Slider'
),
React.createElement(Slider, { value: 50 })
),
React.createElement(
'div',
{ style: style },
React.createElement(
'p',
null,
'Customized Slider'
),
React.createElement(CustomizedSlider, null)
)
), document.getElementById('__react-content'));
/***/ }
});
//# sourceMappingURL=slider.js.map
examples/slider.js.map
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["webpack:///./examples/slider.js"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,aAAY,CAAC;;AAEb,oBAAO,CAAC,CAA6B,CAAC,CAAC;;AAEvC,KAAI,KAAK,GAAG,mBAAO,CAAC,CAAO,CAAC,CAAC;AAC7B,KAAI,QAAQ,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;AACpC,KAAI,MAAM,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;;AAElC,KAAI,KAAK,GAAG,EAAC,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,EAAC,CAAC;AACrC,KAAI,GAAG,GAAG,SAAN,GAAG,CAAY,KAAK,EAAE;AACxB,UAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;EACpB,CAAC;;AAGF,UAAS,gBAAgB,CAAC,CAAC,EAAE;AAC3B,UAAO,CAAC,GAAG,IAAI,CAAC;EACjB;;AAED,KAAI,gBAAgB,GAAG,KAAK,CAAC,WAAW,CAAC;;;AACvC,kBAAe,EAAE,2BAAW;AAC1B,YAAO;AACL,YAAK,EAAE,EAAE;MACV;IACF;AACD,WAAQ,EAAE,kBAAS,KAAK,EAAE;AACxB,QAAG,CAAC,KAAK,CAAC,CAAC;AACX,SAAI,CAAC,QAAQ,CAAC;AACZ,YAAK,EAAE,KAAK;MACb,CAAC,CAAC;IACJ;AACD,SAAM,EAAE,kBAAW;AACjB,YAAO,oBAAC,MAAM,IAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAM,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAS,GAAG,CAAC;IACrE;EACF,CAAC,CAAC;;AAEH,SAAQ,CAAC,MAAM,CACb;;;GACE;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAmB;KACnB,oBAAC,MAAM,IAAC,iBAAiB,EAAC,6BAA6B,EAAC,QAAQ,EAAE,GAAI,GAAG;IACrE;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAA6B;KAC7B,oBAAC,MAAM,IAAC,IAAI,EAAE,EAAG,EAAC,YAAY,EAAE,EAAG,EAAC,cAAc,EAAE,GAAI,GAAG;IACvD;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAmC;KACnC,oBAAC,MAAM,IAAC,IAAI,QAAC,IAAI,EAAE,EAAG,EAAC,YAAY,EAAE,GAAI,EAAC,aAAa,EAAE,GAAI,GAAG;IAC5D;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAuC;KACvC,oBAAC,MAAM,IAAC,YAAY,EAAE,gBAAiB,EAAC,iBAAiB,EAAC,6BAA6B,EAAC,QAAQ,EAAE,GAAI,GAAG;IACrG;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAwB;KACxB,oBAAC,MAAM,IAAC,KAAK,EAAE,EAAG,GAAG;IACjB;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAwB;KACxB,oBAAC,gBAAgB,OAAG;IAChB;EACF,EACJ,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,C","file":"slider.js","sourcesContent":["'use strict';\n\nrequire('rc-slider/assets/index.less');\n\nvar React = require('react');\nvar ReactDOM = require('react-dom');\nvar Slider = require('rc-slider');\n\nvar style = {width: 400, margin: 50};\nvar log = function(value) {\n console.log(value);\n};\n\n\nfunction percentFormatter(v) {\n return v + ' %';\n}\n\nvar CustomizedSlider = React.createClass({\n getInitialState: function() {\n return {\n value: 50\n }\n },\n onChange: function(value) {\n log(value);\n this.setState({\n value: value\n });\n },\n render: function() {\n return <Slider value={this.state.value} onChange={this.onChange} />;\n }\n});\n\nReactDOM.render(\n <div>\n <div style={style}>\n <p>Basic Slider</p>\n <Slider tipTransitionName='rc-slider-tooltip-zoom-down' onChange={log} />\n </div>\n <div style={style}>\n <p>Basic Slider，`step=20`</p>\n <Slider step={20} defaultValue={50} onBeforeChange={log} />\n </div>\n <div style={style}>\n <p>Basic Slider，`step=20, dots`</p>\n <Slider dots step={20} defaultValue={100} onAfterChange={log} />\n </div>\n <div style={style}>\n <p>Basic Slider with `tipFormatter`</p>\n <Slider tipFormatter={percentFormatter} tipTransitionName='rc-slider-tooltip-zoom-down' onChange={log} />\n </div>\n <div style={style}>\n <p>Controlled Slider</p>\n <Slider value={50} />\n </div>\n <div style={style}>\n <p>Customized Slider</p>\n <CustomizedSlider />\n </div>\n </div>\n , document.getElementById('__react-content'));\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/slider.js\n **/"],"sourceRoot":""}
index.html
+18 -26
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@2.3.2 - slider ui component for react</title>
<title>rc-slider@3.1.2 - slider ui component for react</title>
<style>
@font-face {
font-family: octicons-anchor;
@@ -737,14 +737,18 @@
<body>
<div class="header">
<h1>rc-slider@2.3.2</h1>
<h1>rc-slider@3.1.2</h1>
</div>
<div class="examples">
<h3>EXAMPLES</h3>
<div class="examples-body">
<ul>
<li><a href="examples/simple.html">simple</a></li>
<li><a href="examples/marks.html">marks</a></li>
<li><a href="examples/range.html">range</a></li>
<li><a href="examples/slider.html">slider</a></li>
</ul>
</div>
@@ -800,11 +804,17 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-t
<td>100</td>
<td>The maximum value of the slider</td>
</tr>
<tr>
<td>marks</td>
<td>object {number: string}</td>
<td>{}</td>
<td>Mark on the slider. The key determines the position, and the value determines what will show.</td>
</tr>
<tr>
<td>step</td>
<td>number</td>
<td>number or <code>null</code></td>
<td>1</td>
<td>Value to be added or subtracted on each step the slider makes. Must be greater than zero. max - min should be evenly divisible by the step value.</td>
<td>Value to be added or subtracted on each step the slider makes. Must be greater than zero. max - min should be evenly divisible by the step value. When <code>marks</code> is not an empty object, <code>step</code> can be set to <code>null</code>, to make marks as steps.</td>
</tr>
<tr>
<td>range</td>
@@ -824,35 +834,17 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-t
<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>
</tr>
<tr>
<td>marks</td>
<td>array</td>
<td>[]</td>
<td>Mark every step for the slider, it will ignore the <code>step</code> parameter if it has been defined. Does not work with <code>range</code></td>
</tr>
<tr>
<td>included</td>
<td>boolean</td>
<td>true</td>
<td>If the value is <code>true</code>, it means a continuous value interval, otherwise, it is a independent value.</td>
</tr>
<tr>
<td>defaultIndex</td>
<td>number</td>
<td>0</td>
<td>For step or marks slider, determines the initial position of the handle. Does not work with <code>range</code></td>
</tr>
<tr>
<td>index</td>
<td>number</td>
<td></td>
<td>For step or marks slider, determines current position of the handle. Does not work with <code>range</code></td>
</tr>
<tr>
<td>disabled</td>
<td>boolean</td>
<td>false</td>
<td>If true the handles can&#39;t be moved.</td>
<td>If <code>true</code>, handles can&#39;t be moved.</td>
</tr>
<tr>
<td>tipTransitionName</td>
@@ -862,7 +854,7 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-t
</tr>
<tr>
<td>tipFormatter</td>
<td>func</td>
<td>function</td>
<td></td>
<td>Format the value of the tooltip if it shows.</td>
</tr>
@@ -870,7 +862,7 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-t
<td>dots</td>
<td>bool</td>
<td>false</td>
<td>For linear slider, when the <code>step</code> value is greater than 1, you can set the <code>dots</code> to <code>true</code> if you want to render the slider bar with dots.</td>
<td>When the <code>step</code> value is greater than 1, you can set the <code>dots</code> to <code>true</code> if you want to render the slider with dots.</td>
</tr>
</tbody>
</table>