mirror of
https://github.com/wassname/slider.git
synced 2026-09-10 12:38:09 +08:00
Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Benjy Cui
|
ac4c969e46 | ||
|
Benjy Cui
|
3676e86d32 | ||
|
Benjy Cui
|
c1a4dc0cc1 | ||
|
Benjy Cui
|
1d19ad65f8 | ||
|
Benjy Cui
|
ed840dc26a | ||
|
Benjy Cui
|
e255d964ed | ||
|
Benjy Cui
|
b9134866ef | ||
|
Benjy Cui
|
5f5240efe1 | ||
|
Benjy Cui
|
22032d227b | ||
|
Benjy Cui
|
4b46bcb74f | ||
|
Benjy Cui
|
db6857da49 | ||
|
Benjy Cui
|
0777f8027a | ||
|
Benjy Cui
|
01afe71ead | ||
|
Benjy Cui
|
8ff0380dc4 | ||
|
Benjy Cui
|
6a1c904ca8 | ||
|
Benjy Cui
|
a6492206d3 | ||
|
Benjy Cui
|
de1fc9ad47 | ||
|
Benjy Cui
|
a27b83dcfd | ||
|
Benjy Cui
|
1a35d4f13e | ||
|
Benjy Cui
|
a699d786d0 | ||
|
Benjy Cui
|
5639f2f164 | ||
|
Benjy Cui
|
bdf28b05e8 | ||
|
Benjy Cui
|
e3a646ec44 | ||
|
Benjy Cui
|
b1953aded7 | ||
|
Benjy Cui
|
0819b6b96f | ||
|
Benjy Cui
|
2a34b28739 | ||
|
Benjy Cui
|
9b82f695c4 | ||
|
Benjy Cui
|
ac78842e48 | ||
|
Benjy Cui
|
5e86c515d2 | ||
|
yiminghe
|
bd68f5e3da | ||
|
Benjy Cui
|
5c5324e224 | ||
|
Benjy Cui
|
2d007bf00e | ||
|
Benjy Cui
|
60e150d0a2 | ||
|
Benjy Cui
|
77b24c3ddc | ||
|
Benjy Cui
|
3a6c31ad30 | ||
|
Benjy Cui
|
5e0eb477a6 | ||
|
再飞
|
2c958eb830 | ||
|
再飞
|
f13e546df1 | ||
|
yiminghe
|
fe817ef1c6 | ||
|
yiminghe
|
7458332d2c | ||
|
再飞
|
b3172401f3 | ||
|
再飞
|
a50a090607 | ||
|
再飞
|
ab7ad4b377 | ||
|
yiminghe
|
25502c7c38 | ||
|
再飞
|
0fe07f26f4 | ||
|
yiminghe
|
69b3bfb555 | ||
|
simaQ
|
da1d833b33 | ||
|
simaQ
|
6b3b0d7eb4 | ||
|
simaQ
|
0b1ec0e466 | ||
|
yiminghe
|
a15b766dbe | ||
|
yiminghe
|
75fdc0f7e4 | ||
|
yiminghe
|
ccd03a5d6b | ||
|
yiminghe
|
5fcf3da019 | ||
|
Weixing Zhang
|
4582ab233d | ||
|
Weixing Zhang
|
3cac1b5490 | ||
|
Weixing Zhang
|
c891985634 | ||
|
yiminghe
|
88585411a9 | ||
|
yiminghe
|
db01284294 | ||
|
yiminghe
|
76ba795e0d |
@@ -1,9 +0,0 @@
|
||||
# top-most EditorConfig file
|
||||
root = true
|
||||
|
||||
# Unix-style newlines with a newline ending every file
|
||||
[*.{js,css}]
|
||||
end_of_line = lf
|
||||
insert_final_newline = true
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
-27
@@ -1,27 +0,0 @@
|
||||
*.iml
|
||||
*.log
|
||||
.idea/
|
||||
.ipr
|
||||
.iws
|
||||
*~
|
||||
~*
|
||||
*.diff
|
||||
*.patch
|
||||
*.bak
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
.project
|
||||
.*proj
|
||||
.svn/
|
||||
*.swp
|
||||
*.swo
|
||||
*.pyc
|
||||
*.pyo
|
||||
.build
|
||||
node_modules
|
||||
.cache
|
||||
dist
|
||||
assets/**/*.css
|
||||
build
|
||||
lib
|
||||
/coverage
|
||||
-42
@@ -1,42 +0,0 @@
|
||||
language: node_js
|
||||
|
||||
sudo: false
|
||||
|
||||
notifications:
|
||||
email:
|
||||
- yiminghe@gmail.com
|
||||
|
||||
node_js:
|
||||
- 4.0.0
|
||||
|
||||
before_install:
|
||||
- |
|
||||
if ! git diff --name-only $TRAVIS_COMMIT_RANGE | grep -qvE '(\.md$)|(^(docs|examples))/'
|
||||
then
|
||||
echo "Only docs were updated, stopping build process."
|
||||
exit
|
||||
fi
|
||||
phantomjs --version
|
||||
|
||||
script:
|
||||
- |
|
||||
if [ "$TEST_TYPE" = test ]; then
|
||||
npm test
|
||||
else
|
||||
npm run $TEST_TYPE
|
||||
fi
|
||||
|
||||
env:
|
||||
matrix:
|
||||
- TEST_TYPE=lint
|
||||
- TEST_TYPE=browser-test
|
||||
- TEST_TYPE=browser-test-cover
|
||||
- TEST_TYPE=saucelabs
|
||||
global:
|
||||
- secure: S1VwbaPzLnSH/IUT/wlJulxAX5VHRIDmSt53h/ycHcZsszUpWcLCJRQAe0fTVB2dAx5MdBbSZ+o+tr3tRwVB5TRAYm0oTCsYAkOZaWOB28RuUQtdGt3wf9xxTG1UiPiaLLUW3waX9zAaf3yqKBcJGf1op0RD8dksxbCFw/7xVbU=
|
||||
- secure: EBEDg8k///IlEsnx0AE8X3mbFl0QE5+xGKbG4AxXlGZda12uTIPUSMKJzdZQ2hVbZXduTzf1cQl9rcu9nGoSnkL/DWnIax9cvHi+1orx5+YPlxPHNWAwWByTnHosBn2MJhfy1s5paJfHC9cUzmmEL6x4fYthWxjsPUo+irEZH6E=
|
||||
|
||||
|
||||
matrix:
|
||||
allow_failures:
|
||||
- env: "TEST_TYPE=saucelabs"
|
||||
-18
@@ -1,18 +0,0 @@
|
||||
# History
|
||||
----
|
||||
|
||||
## 4.0.0 / 2016-08-12
|
||||
|
||||
[#133](https://github.com/react-component/slider/pull/133) support multi-range ([@sosz](https://github.com/sosz))
|
||||
|
||||
## 3.6.0 / 2016-04-01
|
||||
|
||||
[#18](https://github.com/react-component/slider/issues/18) add `vertical` props ([@wnlee](https://github.com/WNLee))
|
||||
|
||||
...
|
||||
|
||||
## 1.2.5 / 2015-07-13
|
||||
|
||||
[#8](https://github.com/react-component/slider/issues/8) add `isIncluded` props ([@simaQ](https://github.com/simaQ))
|
||||
|
||||
[#7](https://github.com/react-component/slider/issues/7) add tooltip for handler when slider has no `marks` props ([@simaQ](https://github.com/simaQ))
|
||||
@@ -1,20 +0,0 @@
|
||||
The MIT License (MIT)
|
||||
Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
||||
OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
|
||||
IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
||||
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@@ -1,217 +0,0 @@
|
||||
# rc-slider
|
||||
---
|
||||
|
||||
slider ui component for react
|
||||
|
||||
[![NPM version][npm-image]][npm-url]
|
||||
[![build status][travis-image]][travis-url]
|
||||
[![Test coverage][coveralls-image]][coveralls-url]
|
||||
[![gemnasium deps][gemnasium-image]][gemnasium-url]
|
||||
[![node version][node-image]][node-url]
|
||||
[![npm download][download-image]][download-url]
|
||||
[](https://saucelabs.com/u/rc-slider)
|
||||
|
||||
[](https://saucelabs.com/u/rc-slider)
|
||||
|
||||
[npm-image]: http://img.shields.io/npm/v/rc-slider.svg?style=flat-square
|
||||
[npm-url]: http://npmjs.org/package/rc-slider
|
||||
[travis-image]: https://img.shields.io/travis/react-component/slider.svg?style=flat-square
|
||||
[travis-url]: https://travis-ci.org/react-component/slider
|
||||
[coveralls-image]: https://img.shields.io/coveralls/react-component/slider.svg?style=flat-square
|
||||
[coveralls-url]: https://coveralls.io/r/react-component/slider?branch=master
|
||||
[gemnasium-image]: http://img.shields.io/gemnasium/react-component/slider.svg?style=flat-square
|
||||
[gemnasium-url]: https://gemnasium.com/react-component/slider
|
||||
[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
|
||||
[node-url]: http://nodejs.org/download/
|
||||
[download-image]: https://img.shields.io/npm/dm/rc-slider.svg?style=flat-square
|
||||
[download-url]: https://npmjs.org/package/rc-slider
|
||||
|
||||
## Screenshots
|
||||
|
||||
<img src="https://t.alipayobjects.com/images/T1ki8fXeprXXXXXXXX.png" width="550"/>
|
||||
|
||||
<img src="https://t.alipayobjects.com/images/T1pPhfXhBqXXXXXXXX.png" width="550"/>
|
||||
|
||||
<img src="https://t.alipayobjects.com/images/T1wO8fXd4rXXXXXXXX.png" width="550"/>
|
||||
|
||||
<img src="http://i.giphy.com/l46Cs36c9HrHMExoc.gif"/>
|
||||
|
||||
|
||||
## Feature
|
||||
|
||||
* support ie8,ie8+,chrome,firefox,safari
|
||||
|
||||
### Keyboard
|
||||
|
||||
|
||||
|
||||
## install
|
||||
|
||||
[](https://npmjs.org/package/rc-slider)
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
require('rc-slider/assets/index.css');
|
||||
|
||||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
var Rcslider = require('rc-slider');
|
||||
ReactDOM.render(<Rcslider />, container);
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### props
|
||||
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>String</td>
|
||||
<td>rc-slider</td>
|
||||
<td>Additional css class for the root dom node</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>min</td>
|
||||
<td>number</td>
|
||||
<td>0</td>
|
||||
<td>The minimum value of the slider</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>max</td>
|
||||
<td>number</td>
|
||||
<td>100</td>
|
||||
<td>The maximum value of the slider</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>marks</td>
|
||||
<td>object{number: string} or object{number: object{ style, label }}</td>
|
||||
<td>{}</td>
|
||||
<td>Mark on the slider. The key determines the position, and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains `style` and `label` properties.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>step</td>
|
||||
<td>number or `null`</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. When `marks` is not an empty object, `step` can be set to `null`, to make marks as steps.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>range</td>
|
||||
<td>boolean or number</td>
|
||||
<td>false</td>
|
||||
<td>Determines the type of slider. If range is `true`, two handles will be rendered in order to select a range. If range is a number, multiple handles will be rendered (number + 1). Using `range={true}` is equivalent to `range={1}`.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>allowCross</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>When `range` is `true`, `allowCross` could be set as `true` to allow those handles to cross.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>pushable</td>
|
||||
<td>boolean or number</td>
|
||||
<td>true</td>
|
||||
<td>When `range` is `true`, `pushable` could be set as `true` 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>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>If vertical is `true`, the slider will be vertical.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>defaultValue</td>
|
||||
<td>number or [number, number, ...]</td>
|
||||
<td>0 or [0, 0]</td>
|
||||
<td>Set initial positions of handles. If range is `false`, the type of `defaultValue` should be `number`. Otherwise, `[number, number, ...]`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>value</td>
|
||||
<td>number or [number, number, ...]</td>
|
||||
<td></td>
|
||||
<td>Set current positions of handles. If range is `false`, the type of `defaultValue` should be `number`. Otherwise, `[number, number, ...]`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>handle</td>
|
||||
<td>Component</td>
|
||||
<td></td>
|
||||
<td>Provide a custom Handle to use in the slider by passing a component. This component will have a `value` and `offset` props used to define custom styling/content.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>included</td>
|
||||
<td>boolean</td>
|
||||
<td>true</td>
|
||||
<td>If the value is `true`, it means a continuous value interval, otherwise, it is a independent value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>If `true`, handles can't be moved.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>tipTransitionName</td>
|
||||
<td>string</td>
|
||||
<td>''</td>
|
||||
<td>Set the animation for tooltip if it shows.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>tipFormatter</td>
|
||||
<td>function or `null`</td>
|
||||
<td></td>
|
||||
<td>Format the value of the tooltip if it shows. If `null` the tooltip will always be hidden.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>dots</td>
|
||||
<td>bool</td>
|
||||
<td>false</td>
|
||||
<td>When the `step` value is greater than 1, you can set the `dots` to `true` if you want to render the slider with dots.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onChange</td>
|
||||
<td>function</td>
|
||||
<td>NOOP</td>
|
||||
<td>`onChange` will be triggered while the value of Slider changing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onAfterChange</td>
|
||||
<td>function</td>
|
||||
<td>NOOP</td>
|
||||
<td>`onAfterChange` will be triggered when `ontouchend` or `onmouseup` is triggered.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
## Development
|
||||
|
||||
```
|
||||
npm install
|
||||
npm start
|
||||
```
|
||||
|
||||
## Example
|
||||
|
||||
http://localhost:8005/examples/
|
||||
|
||||
online example: http://react-component.github.io/slider/
|
||||
|
||||
## Test Case
|
||||
|
||||
http://localhost:8005/tests/runner.html?coverage
|
||||
|
||||
## Coverage
|
||||
|
||||
http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage
|
||||
|
||||
## License
|
||||
|
||||
rc-slider is released under the MIT license.
|
||||
@@ -1,281 +0,0 @@
|
||||
@prefixClass: rc-slider;
|
||||
|
||||
@disabledColor: #ccc;
|
||||
@border-radius-base: 6px;
|
||||
@primary-color: #2db7f5;
|
||||
@tooltip-color: #fff;
|
||||
@tooltip-bg: tint(#666, 4%);
|
||||
@tooltip-arrow-width: 4px;
|
||||
@tooltip-distance: @tooltip-arrow-width+4;
|
||||
@tooltip-arrow-color: @tooltip-bg;
|
||||
@ease-out-quint : cubic-bezier(0.23, 1, 0.32, 1);
|
||||
@ease-in-quint : cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
|
||||
.borderBox() {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); // remove tap highlight color for mobile safari
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixClass} {
|
||||
position: relative;
|
||||
height: 4px;
|
||||
width: 100%;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: #e9e9e9;
|
||||
|
||||
.borderBox();
|
||||
|
||||
&-track {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
border-radius: @border-radius-base;
|
||||
background-color: tint(@primary-color, 60%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-handle {
|
||||
position: absolute;
|
||||
margin-left: -7px;
|
||||
margin-top: -5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
border: solid 2px tint(@primary-color, 50%);
|
||||
background-color: #fff;
|
||||
z-index: 2;
|
||||
|
||||
&:hover {
|
||||
border-color: tint(@primary-color, 20%);
|
||||
}
|
||||
&-active {
|
||||
&:active {
|
||||
border-color: tint(@primary-color, 20%);
|
||||
box-shadow: 0 0 5px tint(@primary-color, 20%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-mark {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&-mark-text {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
|
||||
&-active {
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
&-step {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: transparent;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-dot {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
margin-left: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 2px solid #e9e9e9;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
&:first-child {
|
||||
margin-left: -4px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-left: -4px;
|
||||
}
|
||||
&-active {
|
||||
border-color: tint(@primary-color, 50%);
|
||||
}
|
||||
}
|
||||
|
||||
&-disabled {
|
||||
background-color: #e9e9e9;
|
||||
|
||||
.@{prefixClass}-track {
|
||||
background-color: @disabledColor;
|
||||
}
|
||||
|
||||
.@{prefixClass}-handle, .@{prefixClass}-dot {
|
||||
border-color: @disabledColor;
|
||||
background-color: #fff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.@{prefixClass}-mark-text, .@{prefixClass}-dot {
|
||||
cursor: not-allowed!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefixClass}-vertical {
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
.@{prefixClass} {
|
||||
&-track {
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&-handle {
|
||||
position: absolute;
|
||||
margin-left: -5px;
|
||||
margin-bottom: -7px;
|
||||
}
|
||||
|
||||
&-mark {
|
||||
top: 0;
|
||||
left: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-step {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
}
|
||||
|
||||
&-dot {
|
||||
left: 2px;
|
||||
margin-bottom: -4px;
|
||||
&:first-child {
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.motion-common() {
|
||||
animation-duration: .3s;
|
||||
animation-fill-mode: both;
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.make-motion(@className, @keyframeName) {
|
||||
.@{className}-enter, .@{className}-appear {
|
||||
.motion-common();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{className}-leave {
|
||||
.motion-common();
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {
|
||||
animation-name: ~"@{keyframeName}In";
|
||||
animation-play-state: running;
|
||||
}
|
||||
.@{className}-leave.@{className}-leave-active {
|
||||
animation-name: ~"@{keyframeName}Out";
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
.zoom-motion(@className, @keyframeName) {
|
||||
.make-motion(@className, @keyframeName);
|
||||
.@{className}-enter, .@{className}-appear {
|
||||
transform: scale(0, 0); // need this by yiminghe
|
||||
animation-timing-function: @ease-out-quint;
|
||||
}
|
||||
.@{className}-leave {
|
||||
animation-timing-function: @ease-in-quint;
|
||||
}
|
||||
}
|
||||
.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);
|
||||
|
||||
@keyframes rcSliderTooltipZoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rcSliderTooltipZoomDownOut {
|
||||
0% {
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform-origin: 50% 100%;
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.rc-tooltip {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
z-index: 4;
|
||||
visibility: visible;
|
||||
|
||||
.borderBox();
|
||||
|
||||
&-hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&-placement-top {
|
||||
padding: @tooltip-arrow-width 0 @tooltip-distance 0;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
padding: 6px 2px;
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: @tooltip-color;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
background-color: @tooltip-bg;
|
||||
border-radius: @border-radius-base;
|
||||
box-shadow: 0 0 4px #d9d9d9;
|
||||
}
|
||||
|
||||
&-arrow {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
}
|
||||
|
||||
&-placement-top &-arrow {
|
||||
bottom: @tooltip-distance - @tooltip-arrow-width;
|
||||
left: 50%;
|
||||
margin-left: -@tooltip-arrow-width;
|
||||
border-width: @tooltip-arrow-width @tooltip-arrow-width 0;
|
||||
border-top-color: @tooltip-arrow-color;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,292 @@
|
||||
.rc-slider {
|
||||
position: relative;
|
||||
height: 14px;
|
||||
padding: 5px 0;
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.rc-slider * {
|
||||
box-sizing: border-box;
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
.rc-slider-rail {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
background-color: #e9e9e9;
|
||||
height: 4px;
|
||||
}
|
||||
.rc-slider-track {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 4px;
|
||||
border-radius: 6px;
|
||||
background-color: #abe2fb;
|
||||
}
|
||||
.rc-slider-handle {
|
||||
position: absolute;
|
||||
margin-left: -7px;
|
||||
margin-top: -5px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
border: solid 2px #96dbfa;
|
||||
background-color: #fff;
|
||||
}
|
||||
.rc-slider-handle:hover {
|
||||
border-color: #57c5f7;
|
||||
}
|
||||
.rc-slider-handle-active:active {
|
||||
border-color: #57c5f7;
|
||||
box-shadow: 0 0 5px #57c5f7;
|
||||
}
|
||||
.rc-slider-mark {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
}
|
||||
.rc-slider-mark-text {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
color: #999;
|
||||
}
|
||||
.rc-slider-mark-text-active {
|
||||
color: #666;
|
||||
}
|
||||
.rc-slider-step {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: transparent;
|
||||
}
|
||||
.rc-slider-dot {
|
||||
position: absolute;
|
||||
bottom: -2px;
|
||||
margin-left: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border: 2px solid #e9e9e9;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
border-radius: 50%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.rc-slider-dot:first-child {
|
||||
margin-left: -4px;
|
||||
}
|
||||
.rc-slider-dot:last-child {
|
||||
margin-left: -4px;
|
||||
}
|
||||
.rc-slider-dot-active {
|
||||
border-color: #96dbfa;
|
||||
}
|
||||
.rc-slider-disabled {
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
.rc-slider-disabled .rc-slider-track {
|
||||
background-color: #ccc;
|
||||
}
|
||||
.rc-slider-disabled .rc-slider-handle,
|
||||
.rc-slider-disabled .rc-slider-dot {
|
||||
border-color: #ccc;
|
||||
background-color: #fff;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.rc-slider-disabled .rc-slider-mark-text,
|
||||
.rc-slider-disabled .rc-slider-dot {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
.rc-slider-vertical {
|
||||
width: 14px;
|
||||
height: 100%;
|
||||
padding: 0 5px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-rail {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-track {
|
||||
left: 5px;
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-handle {
|
||||
margin-left: -5px;
|
||||
margin-bottom: -7px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-mark {
|
||||
top: 0;
|
||||
left: 18px;
|
||||
height: 100%;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-step {
|
||||
height: 100%;
|
||||
width: 4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-dot {
|
||||
left: 2px;
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-dot:first-child {
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-dot:last-child {
|
||||
margin-bottom: -4px;
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-enter,
|
||||
.rc-slider-tooltip-zoom-down-appear {
|
||||
-webkit-animation-duration: .3s;
|
||||
animation-duration: .3s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
display: block !important;
|
||||
-webkit-animation-play-state: paused;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-leave {
|
||||
-webkit-animation-duration: .3s;
|
||||
animation-duration: .3s;
|
||||
-webkit-animation-fill-mode: both;
|
||||
animation-fill-mode: both;
|
||||
display: block !important;
|
||||
-webkit-animation-play-state: paused;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-enter.rc-slider-tooltip-zoom-down-enter-active,
|
||||
.rc-slider-tooltip-zoom-down-appear.rc-slider-tooltip-zoom-down-appear-active {
|
||||
-webkit-animation-name: rcSliderTooltipZoomDownIn;
|
||||
animation-name: rcSliderTooltipZoomDownIn;
|
||||
-webkit-animation-play-state: running;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-leave.rc-slider-tooltip-zoom-down-leave-active {
|
||||
-webkit-animation-name: rcSliderTooltipZoomDownOut;
|
||||
animation-name: rcSliderTooltipZoomDownOut;
|
||||
-webkit-animation-play-state: running;
|
||||
animation-play-state: running;
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-enter,
|
||||
.rc-slider-tooltip-zoom-down-appear {
|
||||
-webkit-transform: scale(0, 0);
|
||||
transform: scale(0, 0);
|
||||
-webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
|
||||
}
|
||||
.rc-slider-tooltip-zoom-down-leave {
|
||||
-webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
|
||||
}
|
||||
@-webkit-keyframes rcSliderTooltipZoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(0, 0);
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
@keyframes rcSliderTooltipZoomDownIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(0, 0);
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes rcSliderTooltipZoomDownOut {
|
||||
0% {
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(0, 0);
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
@keyframes rcSliderTooltipZoomDownOut {
|
||||
0% {
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(1, 1);
|
||||
transform: scale(1, 1);
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
-webkit-transform-origin: 50% 100%;
|
||||
transform-origin: 50% 100%;
|
||||
-webkit-transform: scale(0, 0);
|
||||
transform: scale(0, 0);
|
||||
}
|
||||
}
|
||||
.rc-slider-tooltip {
|
||||
position: absolute;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
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;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=common.css.map*/
|
||||
File diff suppressed because one or more lines are too long
+28307
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -1 +1,332 @@
|
||||
placeholder
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>custom-handles.js - example - rc-slider@5.4.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="https://a.alipayobjects.com/normalize.css/3.0.1/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]-->
|
||||
<script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
|
||||
<script>
|
||||
if(!window.Promise) {
|
||||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="common.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>rc-slider@5.4.0</h1>
|
||||
|
||||
<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> handleStyle = {
|
||||
position: <span class="hljs-string">'absolute'</span>,
|
||||
transform: <span class="hljs-string">'translate(-50%, -50%)'</span>,
|
||||
cursor: <span class="hljs-string">'pointer'</span>,
|
||||
padding: <span class="hljs-string">'2px'</span>,
|
||||
border: <span class="hljs-string">'2px solid #abe2fb'</span>,
|
||||
borderRadius: <span class="hljs-string">'3px'</span>,
|
||||
background: <span class="hljs-string">'#fff'</span>,
|
||||
fontSize: <span class="hljs-string">'14px'</span>,
|
||||
textAlign: <span class="hljs-string">'center'</span>,
|
||||
};
|
||||
|
||||
<span class="hljs-keyword">const</span> CustomHandle = React.createClass({
|
||||
propTypes: {
|
||||
value: React.PropTypes.any,
|
||||
offset: React.PropTypes.number,
|
||||
},
|
||||
render() {
|
||||
<span class="hljs-keyword">const</span> props = <span class="hljs-keyword">this</span>.props;
|
||||
<span class="hljs-keyword">const</span> style = <span class="hljs-built_in">Object</span>.assign({ left: <span class="hljs-string">`<span class="hljs-subst">${props.offset}</span>%`</span> }, handleStyle);
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>val: {props.value}<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
)</span>;
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{wrapperStyle}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Default slider<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{wrapperStyle}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Slider with custom handle<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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> <span class="hljs-attribute">handle</span>=<span class="hljs-value">{<CustomHandle</span> /></span>} />
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></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>
|
||||
<script>FastClick.attach(document.body);</script>
|
||||
<script src="common.js?nowrap"></script>
|
||||
<script src="custom-handles.js?nowrap"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
+75
-39
@@ -1,44 +1,80 @@
|
||||
require('rc-slider/assets/index.less');
|
||||
webpackJsonp([0],[
|
||||
/* 0 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
const Slider = require('rc-slider');
|
||||
module.exports = __webpack_require__(1);
|
||||
|
||||
const wrapperStyle = { width: 400, margin: 50 };
|
||||
|
||||
const handleStyle = {
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
cursor: 'pointer',
|
||||
padding: '2px',
|
||||
border: '2px solid #abe2fb',
|
||||
borderRadius: '3px',
|
||||
background: '#fff',
|
||||
fontSize: '14px',
|
||||
textAlign: 'center',
|
||||
zIndex: 3,
|
||||
};
|
||||
/***/ },
|
||||
/* 1 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
const CustomHandle = props => {
|
||||
const style = Object.assign({ left: props.offset + '%' }, handleStyle);
|
||||
return (
|
||||
<div style={style}>val: {props.value}</div>
|
||||
);
|
||||
};
|
||||
CustomHandle.propTypes = {
|
||||
value: React.PropTypes.any,
|
||||
offset: React.PropTypes.number,
|
||||
};
|
||||
'use strict';
|
||||
|
||||
__webpack_require__(2);
|
||||
|
||||
var React = __webpack_require__(3);
|
||||
var ReactDOM = __webpack_require__(34);
|
||||
var Slider = __webpack_require__(180);
|
||||
|
||||
var wrapperStyle = { width: 400, margin: 50 };
|
||||
|
||||
var handleStyle = {
|
||||
position: 'absolute',
|
||||
transform: 'translate(-50%, -50%)',
|
||||
cursor: 'pointer',
|
||||
padding: '2px',
|
||||
border: '2px solid #abe2fb',
|
||||
borderRadius: '3px',
|
||||
background: '#fff',
|
||||
fontSize: '14px',
|
||||
textAlign: 'center'
|
||||
};
|
||||
|
||||
var CustomHandle = React.createClass({
|
||||
displayName: 'CustomHandle',
|
||||
|
||||
propTypes: {
|
||||
value: React.PropTypes.any,
|
||||
offset: React.PropTypes.number
|
||||
},
|
||||
render: function render() {
|
||||
var props = this.props;
|
||||
var style = Object.assign({ left: props.offset + '%' }, handleStyle);
|
||||
return React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
'val: ',
|
||||
props.value
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
'div',
|
||||
null,
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: wrapperStyle },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Default slider'
|
||||
),
|
||||
React.createElement(Slider, { min: 0, max: 20, defaultValue: 3 })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: wrapperStyle },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Slider with custom handle'
|
||||
),
|
||||
React.createElement(Slider, { min: 0, max: 20, defaultValue: 3, handle: React.createElement(CustomHandle, null) })
|
||||
)
|
||||
), document.getElementById('__react-content'));
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<div style={wrapperStyle}>
|
||||
<p>Default slider</p>
|
||||
<Slider min={0} max={20} defaultValue={3} />
|
||||
</div>
|
||||
<div style={wrapperStyle}>
|
||||
<p>Slider with custom handle</p>
|
||||
<Slider min={0} max={20} defaultValue={3} handle={<CustomHandle />} />
|
||||
</div>
|
||||
</div>
|
||||
, document.getElementById('__react-content'));
|
||||
/***/ }
|
||||
]);
|
||||
//# sourceMappingURL=custom-handles.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["webpack:///./examples/custom-handles.js"],"names":["require","React","ReactDOM","Slider","wrapperStyle","width","margin","handleStyle","position","transform","cursor","padding","border","borderRadius","background","fontSize","textAlign","CustomHandle","createClass","propTypes","value","PropTypes","any","offset","number","render","props","style","Object","assign","left","document","getElementById"],"mappings":";;;;;;;;;;;;;AAAA,oBAAAA,CAAQ,CAAR;;AAEA,KAAMC,QAAQ,mBAAAD,CAAQ,CAAR,CAAd;AACA,KAAME,WAAW,mBAAAF,CAAQ,EAAR,CAAjB;AACA,KAAMG,SAAS,mBAAAH,CAAQ,GAAR,CAAf;;AAEA,KAAMI,eAAe,EAAEC,OAAO,GAAT,EAAcC,QAAQ,EAAtB,EAArB;;AAEA,KAAMC,cAAc;AAClBC,aAAU,UADQ;AAElBC,cAAW,uBAFO;AAGlBC,WAAQ,SAHU;AAIlBC,YAAS,KAJS;AAKlBC,WAAQ,mBALU;AAMlBC,iBAAc,KANI;AAOlBC,eAAY,MAPM;AAQlBC,aAAU,MARQ;AASlBC,cAAW;AATO,EAApB;;AAYA,KAAMC,eAAehB,MAAMiB,WAAN,CAAkB;AAAA;;AACrCC,cAAW;AACTC,YAAOnB,MAAMoB,SAAN,CAAgBC,GADd;AAETC,aAAQtB,MAAMoB,SAAN,CAAgBG;AAFf,IAD0B;AAKrCC,SALqC,oBAK5B;AACP,SAAMC,QAAQ,KAAKA,KAAnB;AACA,SAAMC,QAAQC,OAAOC,MAAP,CAAc,EAAEC,MAASJ,MAAMH,MAAf,MAAF,EAAd,EAA4ChB,WAA5C,CAAd;AACA,YACI;AAAA;AAAA,SAAK,OAAOoB,KAAZ;AAAA;AAAyBD,aAAMN;AAA/B,MADJ;AAGD;AAXoC,EAAlB,CAArB;;AAcAlB,UAASuB,MAAT,CACE;AAAA;AAAA;AACE;AAAA;AAAA,OAAK,OAAOrB,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,OAAOA,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,EAWE2B,SAASC,cAAT,CAAwB,iBAAxB,CAXF,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};\n\nconst CustomHandle = React.createClass({\n propTypes: {\n value: React.PropTypes.any,\n offset: React.PropTypes.number,\n },\n render() {\n const props = this.props;\n const style = Object.assign({ left: `${props.offset}%` }, handleStyle);\n return (\n <div style={style}>val: {props.value}</div>\n );\n },\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\n// WEBPACK FOOTER //\n// ./examples/custom-handles.js"],"sourceRoot":""}
|
||||
@@ -0,0 +1 @@
|
||||
<script>location.href="../";</script>
|
||||
+340
-1
@@ -1 +1,340 @@
|
||||
placeholder
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>marks.js - example - rc-slider@5.4.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="https://a.alipayobjects.com/normalize.css/3.0.1/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]-->
|
||||
<script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
|
||||
<script>
|
||||
if(!window.Promise) {
|
||||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="common.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>rc-slider@5.4.0</h1>
|
||||
|
||||
<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> 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"><<span class="hljs-title">strong</span>></span>0°C<span class="hljs-tag"></<span class="hljs-title">strong</span>></span>,
|
||||
26: '26°C',
|
||||
37: '37°C',
|
||||
50: '50°C',
|
||||
100: {
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
label: <span class="hljs-tag"><<span class="hljs-title">strong</span>></span>100°C<span class="hljs-tag"></<span class="hljs-title">strong</span>></span>,
|
||||
},
|
||||
};
|
||||
|
||||
function log(value) {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Slider with marks, `step=null`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Slider with marks and steps<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">dots</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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Slider with marks, `included=false`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Slider with marks and steps, `included=false`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Range with marks<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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>]} /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Range with marks and steps<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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>]} /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></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>
|
||||
<script>FastClick.attach(document.body);</script>
|
||||
<script src="common.js?nowrap"></script>
|
||||
<script src="marks.js?nowrap"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
+111
-49
@@ -1,55 +1,117 @@
|
||||
require('rc-slider/assets/index.less');
|
||||
webpackJsonp([1],{
|
||||
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
const Slider = require('rc-slider');
|
||||
/***/ 0:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
const style = { width: 400, margin: 50 };
|
||||
const marks = {
|
||||
'-10': '-10°C',
|
||||
0: <strong>0°C</strong>,
|
||||
26: '26°C',
|
||||
37: '37°C',
|
||||
50: '50°C',
|
||||
100: {
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
label: <strong>100°C</strong>,
|
||||
},
|
||||
};
|
||||
module.exports = __webpack_require__(323);
|
||||
|
||||
function log(value) {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<div style={style}>
|
||||
<p>Slider with marks, `step=null`</p>
|
||||
<Slider min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Slider with marks and steps</p>
|
||||
<Slider dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />
|
||||
</div>
|
||||
/***/ },
|
||||
|
||||
<div style={style}>
|
||||
<p>Slider with marks, `included=false`</p>
|
||||
<Slider min={-10} marks={marks} included={false} defaultValue={20} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Slider with marks and steps, `included=false`</p>
|
||||
<Slider min={-10} marks={marks} step={10} included={false} defaultValue={20} />
|
||||
</div>
|
||||
/***/ 323:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
<div style={style}>
|
||||
<p>Range with marks</p>
|
||||
<Slider min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Range with marks and steps</p>
|
||||
<Slider min={-10} range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />
|
||||
</div>
|
||||
</div>
|
||||
, document.getElementById('__react-content'));
|
||||
'use strict';
|
||||
|
||||
__webpack_require__(2);
|
||||
|
||||
var React = __webpack_require__(3);
|
||||
var ReactDOM = __webpack_require__(34);
|
||||
var Slider = __webpack_require__(180);
|
||||
|
||||
var style = { width: 400, margin: 50 };
|
||||
var marks = {
|
||||
'-10': '-10°C',
|
||||
0: React.createElement(
|
||||
'strong',
|
||||
null,
|
||||
'0\xB0C'
|
||||
),
|
||||
26: '26°C',
|
||||
37: '37°C',
|
||||
50: '50°C',
|
||||
100: {
|
||||
style: {
|
||||
color: 'red'
|
||||
},
|
||||
label: React.createElement(
|
||||
'strong',
|
||||
null,
|
||||
'100\xB0C'
|
||||
)
|
||||
}
|
||||
};
|
||||
|
||||
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, { dots: true, 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
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["webpack:///./examples/marks.js"],"names":["require","React","ReactDOM","Slider","style","width","margin","marks","color","label","log","value","console","render","document","getElementById"],"mappings":";;;;;;;;;;;;;;;AAAA,oBAAAA,CAAQ,CAAR;;AAEA,KAAMC,QAAQ,mBAAAD,CAAQ,CAAR,CAAd;AACA,KAAME,WAAW,mBAAAF,CAAQ,EAAR,CAAjB;AACA,KAAMG,SAAS,mBAAAH,CAAQ,GAAR,CAAf;;AAEA,KAAMI,QAAQ,EAAEC,OAAO,GAAT,EAAcC,QAAQ,EAAtB,EAAd;AACA,KAAMC,QAAQ;AACZ,UAAO,OADK;AAEZ,MAAG;AAAA;AAAA;AAAA;AAAA,IAFS;AAGZ,OAAI,MAHQ;AAIZ,OAAI,MAJQ;AAKZ,OAAI,MALQ;AAMZ,QAAK;AACHH,YAAO;AACLI,cAAO;AADF,MADJ;AAIHC,YAAO;AAAA;AAAA;AAAA;AAAA;AAJJ;AANO,EAAd;;AAcA,UAASC,GAAT,CAAaC,KAAb,EAAoB;AAClBC,WAAQF,GAAR,CAAYC,KAAZ;AACD;;AAEDT,UAASW,MAAT,CACE;AAAA;AAAA;AACE;AAAA;AAAA,OAAK,OAAOT,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAC,EAAd,EAAkB,OAAOG,KAAzB,EAAgC,MAAM,IAAtC,EAA4C,UAAUG,GAAtD,EAA2D,cAAc,EAAzE;AAFF,IADF;AAKE;AAAA;AAAA,OAAK,OAAON,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,UAAR,EAAa,KAAK,CAAC,EAAnB,EAAuB,OAAOG,KAA9B,EAAqC,MAAM,EAA3C,EAA+C,UAAUG,GAAzD,EAA8D,cAAc,EAA5E;AAFF,IALF;AAUE;AAAA;AAAA,OAAK,OAAON,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAC,EAAd,EAAkB,OAAOG,KAAzB,EAAgC,UAAU,KAA1C,EAAiD,cAAc,EAA/D;AAFF,IAVF;AAcE;AAAA;AAAA,OAAK,OAAOH,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAC,EAAd,EAAkB,OAAOG,KAAzB,EAAgC,MAAM,EAAtC,EAA0C,UAAU,KAApD,EAA2D,cAAc,EAAzE;AAFF,IAdF;AAmBE;AAAA;AAAA,OAAK,OAAOH,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAC,EAAd,EAAkB,WAAlB,EAAwB,OAAOG,KAA/B,EAAsC,UAAUG,GAAhD,EAAqD,cAAc,CAAC,EAAD,EAAK,EAAL,CAAnE;AAFF,IAnBF;AAuBE;AAAA;AAAA,OAAK,OAAON,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAC,EAAd,EAAkB,WAAlB,EAAwB,OAAOG,KAA/B,EAAsC,MAAM,EAA5C,EAAgD,UAAUG,GAA1D,EAA+D,cAAc,CAAC,EAAD,EAAK,EAAL,CAA7E;AAFF;AAvBF,EADF,EA6BII,SAASC,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"],"sourceRoot":""}
|
||||
+408
-1
@@ -1 +1,408 @@
|
||||
placeholder
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>range.js - example - rc-slider@5.4.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="https://a.alipayobjects.com/normalize.css/3.0.1/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]-->
|
||||
<script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
|
||||
<script>
|
||||
if(!window.Promise) {
|
||||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="common.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>rc-slider@5.4.0</h1>
|
||||
|
||||
<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-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-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(e) {
|
||||
<span class="hljs-keyword">this</span>.setState({ lowerBound: +e.target.value });
|
||||
},
|
||||
onUpperBoundChange(e) {
|
||||
<span class="hljs-keyword">this</span>.setState({ upperBound: +e.target.value });
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
value,
|
||||
});
|
||||
},
|
||||
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] });
|
||||
},
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>LowerBound: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.lowerBound}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onLowerBoundChange}</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>UpperBound: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.upperBound}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onUpperBoundChange}</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.handleApply}</span>></span>Apply<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
)</span>;
|
||||
},
|
||||
});
|
||||
|
||||
<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
|
||||
getInitialState() {
|
||||
<span class="hljs-keyword">return</span> {
|
||||
min: <span class="hljs-number">0</span>,
|
||||
max: <span class="hljs-number">100</span>,
|
||||
};
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
},
|
||||
onMinChange(e) {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
min: +e.target.value || <span class="hljs-number">0</span>,
|
||||
});
|
||||
},
|
||||
onMaxChange(e) {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
max: +e.target.value || <span class="hljs-number">100</span>,
|
||||
});
|
||||
},
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Min: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Max: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||||
<span class="hljs-tag"><<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>
|
||||
/></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
)</span>;
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Range，`allowCross=false`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Range，`step=20` <span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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">20</span>]} <span class="hljs-attribute">onBeforeChange</span>=<span class="hljs-value">{log}</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Range，`step=20, dots` <span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Controlled Range<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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>]} /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Multi Range<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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>]} /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Customized Range<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">CustomizedRange</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Range with dynamic `max` `min`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">DynamicBounds</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></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>
|
||||
<script>FastClick.attach(document.body);</script>
|
||||
<script src="common.js?nowrap"></script>
|
||||
<script src="range.js?nowrap"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
+207
-116
@@ -1,121 +1,212 @@
|
||||
/* eslint react/no-multi-comp: 0 */
|
||||
require('rc-slider/assets/index.less');
|
||||
webpackJsonp([2],{
|
||||
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
const Slider = require('rc-slider');
|
||||
/***/ 0:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
const style = { width: 400, margin: 50 };
|
||||
module.exports = __webpack_require__(324);
|
||||
|
||||
function log(value) {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
const CustomizedRange = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
lowerBound: 20,
|
||||
upperBound: 40,
|
||||
value: [20, 40],
|
||||
};
|
||||
},
|
||||
onLowerBoundChange(e) {
|
||||
this.setState({ lowerBound: +e.target.value });
|
||||
},
|
||||
onUpperBoundChange(e) {
|
||||
this.setState({ upperBound: +e.target.value });
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
this.setState({
|
||||
value,
|
||||
});
|
||||
},
|
||||
handleApply() {
|
||||
const { lowerBound, upperBound } = this.state;
|
||||
this.setState({ value: [lowerBound, upperBound] });
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<label>LowerBound: </label>
|
||||
<input type="number" value={this.state.lowerBound} onChange={this.onLowerBoundChange} />
|
||||
<br />
|
||||
<label>UpperBound: </label>
|
||||
<input type="number" value={this.state.upperBound} onChange={this.onUpperBoundChange} />
|
||||
<br />
|
||||
<button onClick={this.handleApply}>Apply</button>
|
||||
<br /><br />
|
||||
<Slider range allowCross={false} value={this.state.value} onChange={this.onSliderChange} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
/***/ },
|
||||
|
||||
/***/ 324:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/* eslint react/no-multi-comp: 0 */
|
||||
__webpack_require__(2);
|
||||
|
||||
var React = __webpack_require__(3);
|
||||
var ReactDOM = __webpack_require__(34);
|
||||
var Slider = __webpack_require__(180);
|
||||
|
||||
var style = { width: 400, margin: 50 };
|
||||
|
||||
function log(value) {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
var CustomizedRange = React.createClass({
|
||||
displayName: 'CustomizedRange',
|
||||
getInitialState: function getInitialState() {
|
||||
return {
|
||||
lowerBound: 20,
|
||||
upperBound: 40,
|
||||
value: [20, 40]
|
||||
};
|
||||
},
|
||||
onLowerBoundChange: function onLowerBoundChange(e) {
|
||||
this.setState({ lowerBound: +e.target.value });
|
||||
},
|
||||
onUpperBoundChange: function onUpperBoundChange(e) {
|
||||
this.setState({ upperBound: +e.target.value });
|
||||
},
|
||||
onSliderChange: function onSliderChange(value) {
|
||||
log(value);
|
||||
this.setState({
|
||||
value: value
|
||||
});
|
||||
},
|
||||
handleApply: function handleApply() {
|
||||
var _state = this.state,
|
||||
lowerBound = _state.lowerBound,
|
||||
upperBound = _state.upperBound;
|
||||
|
||||
this.setState({ value: [lowerBound, upperBound] });
|
||||
},
|
||||
render: function render() {
|
||||
return React.createElement(
|
||||
'div',
|
||||
null,
|
||||
React.createElement(
|
||||
'label',
|
||||
null,
|
||||
'LowerBound: '
|
||||
),
|
||||
React.createElement('input', { type: 'number', value: this.state.lowerBound, onChange: this.onLowerBoundChange }),
|
||||
React.createElement('br', null),
|
||||
React.createElement(
|
||||
'label',
|
||||
null,
|
||||
'UpperBound: '
|
||||
),
|
||||
React.createElement('input', { type: 'number', value: this.state.upperBound, onChange: this.onUpperBoundChange }),
|
||||
React.createElement('br', null),
|
||||
React.createElement(
|
||||
'button',
|
||||
{ onClick: this.handleApply },
|
||||
'Apply'
|
||||
),
|
||||
React.createElement('br', null),
|
||||
React.createElement('br', null),
|
||||
React.createElement(Slider, { range: true, allowCross: false, value: this.state.value, onChange: this.onSliderChange })
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var DynamicBounds = React.createClass({
|
||||
displayName: 'DynamicBounds',
|
||||
getInitialState: function getInitialState() {
|
||||
return {
|
||||
min: 0,
|
||||
max: 100
|
||||
};
|
||||
},
|
||||
onSliderChange: function onSliderChange(value) {
|
||||
log(value);
|
||||
},
|
||||
onMinChange: function onMinChange(e) {
|
||||
this.setState({
|
||||
min: +e.target.value || 0
|
||||
});
|
||||
},
|
||||
onMaxChange: function onMaxChange(e) {
|
||||
this.setState({
|
||||
max: +e.target.value || 100
|
||||
});
|
||||
},
|
||||
render: function render() {
|
||||
return React.createElement(
|
||||
'div',
|
||||
null,
|
||||
React.createElement(
|
||||
'label',
|
||||
null,
|
||||
'Min: '
|
||||
),
|
||||
React.createElement('input', { type: 'number', value: this.state.min, onChange: this.onMinChange }),
|
||||
React.createElement('br', null),
|
||||
React.createElement(
|
||||
'label',
|
||||
null,
|
||||
'Max: '
|
||||
),
|
||||
React.createElement('input', { type: 'number', value: this.state.max, onChange: this.onMaxChange }),
|
||||
React.createElement('br', null),
|
||||
React.createElement('br', null),
|
||||
React.createElement(Slider, { range: true, defaultValue: [20, 50], min: this.state.min, max: this.state.max,
|
||||
onChange: this.onSliderChange
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
'div',
|
||||
null,
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Basic Range\uFF0C`allowCross=false`'
|
||||
),
|
||||
React.createElement(Slider, { range: true, allowCross: false, defaultValue: [0, 20], onChange: log })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Basic Range\uFF0C`step=20` '
|
||||
),
|
||||
React.createElement(Slider, { range: true, step: 20, defaultValue: [20, 20], onBeforeChange: log })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Basic Range\uFF0C`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,
|
||||
'Multi Range'
|
||||
),
|
||||
React.createElement(Slider, { range: 3, value: [20, 40, 60, 80] })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Customized Range'
|
||||
),
|
||||
React.createElement(CustomizedRange, null)
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Range with dynamic `max` `min`'
|
||||
),
|
||||
React.createElement(DynamicBounds, null)
|
||||
)
|
||||
), document.getElementById('__react-content'));
|
||||
|
||||
/***/ }
|
||||
|
||||
});
|
||||
|
||||
const DynamicBounds = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
min: 0,
|
||||
max: 100,
|
||||
};
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
},
|
||||
onMinChange(e) {
|
||||
this.setState({
|
||||
min: +e.target.value || 0,
|
||||
});
|
||||
},
|
||||
onMaxChange(e) {
|
||||
this.setState({
|
||||
max: +e.target.value || 100,
|
||||
});
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<label>Min: </label>
|
||||
<input type="number" value={this.state.min} onChange={this.onMinChange} />
|
||||
<br />
|
||||
<label>Max: </label>
|
||||
<input type="number" value={this.state.max} onChange={this.onMaxChange} />
|
||||
<br /><br />
|
||||
<Slider range defaultValue={[20, 50]} min={this.state.min} max={this.state.max} onChange={this.onSliderChange} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<div style={style}>
|
||||
<p>Basic Range，`allowCross=false`</p>
|
||||
<Slider range allowCross={false} defaultValue={[0, 20]} onChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Basic Range，`step=20` </p>
|
||||
<Slider range step={20} defaultValue={[20, 20]} onBeforeChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Basic Range，`step=20, dots` </p>
|
||||
<Slider range dots step={20} defaultValue={[20, 40]} onAfterChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Controlled Range</p>
|
||||
<Slider range value={[20, 40]} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Multi Range</p>
|
||||
<Slider range={3} value={[20, 40, 60, 80]} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Customized Range</p>
|
||||
<CustomizedRange />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Range with dynamic `max` `min`</p>
|
||||
<DynamicBounds />
|
||||
</div>
|
||||
</div>
|
||||
, document.getElementById('__react-content'));
|
||||
//# sourceMappingURL=range.js.map
|
||||
File diff suppressed because one or more lines are too long
+402
-1
@@ -1 +1,402 @@
|
||||
placeholder
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>slider.js - example - rc-slider@5.4.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="https://a.alipayobjects.com/normalize.css/3.0.1/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]-->
|
||||
<script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
|
||||
<script>
|
||||
if(!window.Promise) {
|
||||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="common.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>rc-slider@5.4.0</h1>
|
||||
|
||||
<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-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-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${v}</span> %`</span>;
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">const</span> CustomizedSlider = React.createClass({
|
||||
getInitialState() {
|
||||
<span class="hljs-keyword">return</span> {
|
||||
value: <span class="hljs-number">50</span>,
|
||||
};
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
value,
|
||||
});
|
||||
},
|
||||
onAfterChange(value) {
|
||||
<span class="hljs-built_in">console</span>.log(value);
|
||||
},
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<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>
|
||||
/></span>
|
||||
)</span>;
|
||||
},
|
||||
});
|
||||
|
||||
<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
|
||||
getInitialState() {
|
||||
<span class="hljs-keyword">return</span> {
|
||||
min: <span class="hljs-number">0</span>,
|
||||
max: <span class="hljs-number">100</span>,
|
||||
};
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
},
|
||||
onMinChange(e) {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
min: +e.target.value || <span class="hljs-number">0</span>,
|
||||
});
|
||||
},
|
||||
onMaxChange(e) {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
max: +e.target.value || <span class="hljs-number">100</span>,
|
||||
});
|
||||
},
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Min: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Max: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||||
<span class="hljs-tag"><<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>
|
||||
/></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
)</span>;
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Slider<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Slider，`step=20`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Slider，`step=20, dots`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Slider with `tipFormatter`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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>
|
||||
/></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Slider without tooltip<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">tipFormatter</span>=<span class="hljs-value">{null}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Controlled Slider<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{50}</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Customized Slider<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">CustomizedSlider</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Slider with dynamic `min` `max`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">DynamicBounds</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></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>
|
||||
<script>FastClick.attach(document.body);</script>
|
||||
<script src="common.js?nowrap"></script>
|
||||
<script src="slider.js?nowrap"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
+187
-103
@@ -1,109 +1,193 @@
|
||||
/* eslint react/no-multi-comp: 0 */
|
||||
require('rc-slider/assets/index.less');
|
||||
webpackJsonp([3],{
|
||||
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
const Slider = require('rc-slider');
|
||||
/***/ 0:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
const style = { width: 400, margin: 50 };
|
||||
|
||||
function log(value) {
|
||||
console.log(value);
|
||||
}
|
||||
module.exports = __webpack_require__(325);
|
||||
|
||||
|
||||
function percentFormatter(v) {
|
||||
return v + ' %';
|
||||
}
|
||||
/***/ },
|
||||
|
||||
/***/ 325:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/* eslint react/no-multi-comp: 0 */
|
||||
__webpack_require__(2);
|
||||
|
||||
var React = __webpack_require__(3);
|
||||
var ReactDOM = __webpack_require__(34);
|
||||
var Slider = __webpack_require__(180);
|
||||
|
||||
var style = { width: 400, margin: 50 };
|
||||
|
||||
function log(value) {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
function percentFormatter(v) {
|
||||
return v + ' %';
|
||||
}
|
||||
|
||||
var CustomizedSlider = React.createClass({
|
||||
displayName: 'CustomizedSlider',
|
||||
getInitialState: function getInitialState() {
|
||||
return {
|
||||
value: 50
|
||||
};
|
||||
},
|
||||
onSliderChange: function onSliderChange(value) {
|
||||
log(value);
|
||||
this.setState({
|
||||
value: value
|
||||
});
|
||||
},
|
||||
onAfterChange: function onAfterChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
render: function render() {
|
||||
return React.createElement(Slider, { value: this.state.value,
|
||||
onChange: this.onSliderChange, onAfterChange: this.onAfterChange
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
var DynamicBounds = React.createClass({
|
||||
displayName: 'DynamicBounds',
|
||||
getInitialState: function getInitialState() {
|
||||
return {
|
||||
min: 0,
|
||||
max: 100
|
||||
};
|
||||
},
|
||||
onSliderChange: function onSliderChange(value) {
|
||||
log(value);
|
||||
},
|
||||
onMinChange: function onMinChange(e) {
|
||||
this.setState({
|
||||
min: +e.target.value || 0
|
||||
});
|
||||
},
|
||||
onMaxChange: function onMaxChange(e) {
|
||||
this.setState({
|
||||
max: +e.target.value || 100
|
||||
});
|
||||
},
|
||||
render: function render() {
|
||||
return React.createElement(
|
||||
'div',
|
||||
null,
|
||||
React.createElement(
|
||||
'label',
|
||||
null,
|
||||
'Min: '
|
||||
),
|
||||
React.createElement('input', { type: 'number', value: this.state.min, onChange: this.onMinChange }),
|
||||
React.createElement('br', null),
|
||||
React.createElement(
|
||||
'label',
|
||||
null,
|
||||
'Max: '
|
||||
),
|
||||
React.createElement('input', { type: 'number', value: this.state.max, onChange: this.onMaxChange }),
|
||||
React.createElement('br', null),
|
||||
React.createElement('br', null),
|
||||
React.createElement(Slider, { defaultValue: 50, min: this.state.min, max: this.state.max,
|
||||
onChange: this.onSliderChange
|
||||
})
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
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\uFF0C`step=20`'
|
||||
),
|
||||
React.createElement(Slider, { step: 20, defaultValue: 50, onBeforeChange: log })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Basic Slider\uFF0C`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,
|
||||
'Basic Slider without tooltip'
|
||||
),
|
||||
React.createElement(Slider, { tipFormatter: null, 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)
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Slider with dynamic `min` `max`'
|
||||
),
|
||||
React.createElement(DynamicBounds, null)
|
||||
)
|
||||
), document.getElementById('__react-content'));
|
||||
|
||||
/***/ }
|
||||
|
||||
const CustomizedSlider = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
value: 50,
|
||||
};
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
this.setState({
|
||||
value,
|
||||
});
|
||||
},
|
||||
onAfterChange(value) {
|
||||
console.log(value);
|
||||
},
|
||||
render() {
|
||||
return <Slider value={this.state.value} onChange={this.onSliderChange} onAfterChange={this.onAfterChange} />;
|
||||
},
|
||||
});
|
||||
|
||||
const DynamicBounds = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
min: 0,
|
||||
max: 100,
|
||||
};
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
},
|
||||
onMinChange(e) {
|
||||
this.setState({
|
||||
min: +e.target.value || 0,
|
||||
});
|
||||
},
|
||||
onMaxChange(e) {
|
||||
this.setState({
|
||||
max: +e.target.value || 100,
|
||||
});
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<label>Min: </label>
|
||||
<input type="number" value={this.state.min} onChange={this.onMinChange} />
|
||||
<br />
|
||||
<label>Max: </label>
|
||||
<input type="number" value={this.state.max} onChange={this.onMaxChange} />
|
||||
<br /><br />
|
||||
<Slider defaultValue={50} min={this.state.min} max={this.state.max} onChange={this.onSliderChange} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<div style={style}>
|
||||
<p>Basic Slider</p>
|
||||
<Slider tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Basic Slider，`step=20`</p>
|
||||
<Slider step={20} defaultValue={50} onBeforeChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Basic Slider，`step=20, dots`</p>
|
||||
<Slider dots step={20} defaultValue={100} onAfterChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Basic Slider with `tipFormatter`</p>
|
||||
<Slider tipFormatter={percentFormatter} tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Basic Slider without tooltip</p>
|
||||
<Slider tipFormatter={null} onChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Controlled Slider</p>
|
||||
<Slider value={50} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Customized Slider</p>
|
||||
<CustomizedSlider />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Slider with dynamic `min` `max`</p>
|
||||
<DynamicBounds />
|
||||
</div>
|
||||
</div>
|
||||
, document.getElementById('__react-content'));
|
||||
//# sourceMappingURL=slider.js.map
|
||||
File diff suppressed because one or more lines are too long
+342
-1
@@ -1 +1,342 @@
|
||||
placeholder
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>v-marks.js - example - rc-slider@5.4.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="https://a.alipayobjects.com/normalize.css/3.0.1/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]-->
|
||||
<script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
|
||||
<script>
|
||||
if(!window.Promise) {
|
||||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="common.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>rc-slider@5.4.0</h1>
|
||||
|
||||
<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> 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"><<span class="hljs-title">strong</span>></span>0°C<span class="hljs-tag"></<span class="hljs-title">strong</span>></span>,
|
||||
26: '26°C',
|
||||
37: '37°C',
|
||||
50: '50°C',
|
||||
100: {
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
label: <span class="hljs-tag"><<span class="hljs-title">strong</span>></span>100°C<span class="hljs-tag"></<span class="hljs-title">strong</span>></span>,
|
||||
},
|
||||
};
|
||||
|
||||
function log(value) {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{parentStyle}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Slider with marks, `step=null`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Slider with marks and steps<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">dots</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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Slider with marks, `included=false`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Slider with marks and steps, `included=false`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Range with marks<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</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>]} /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Range with marks and steps<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</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>]}
|
||||
/></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></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>
|
||||
<script>FastClick.attach(document.body);</script>
|
||||
<script src="common.js?nowrap"></script>
|
||||
<script src="v-marks.js?nowrap"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
+116
-50
@@ -1,55 +1,121 @@
|
||||
require('rc-slider/assets/index.less');
|
||||
webpackJsonp([4],{
|
||||
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
const Slider = require('rc-slider');
|
||||
/***/ 0:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
const style = { float: 'left', width: 160, height: 400, marginBottom: 160, marginLeft: 50 };
|
||||
const parentStyle = { overflow: 'hidden' };
|
||||
module.exports = __webpack_require__(326);
|
||||
|
||||
const marks = {
|
||||
'-10': '-10°C',
|
||||
0: <strong>0°C</strong>,
|
||||
26: '26°C',
|
||||
37: '37°C',
|
||||
50: '50°C',
|
||||
100: {
|
||||
style: {
|
||||
color: 'red',
|
||||
},
|
||||
label: <strong>100°C</strong>,
|
||||
},
|
||||
};
|
||||
|
||||
function log(value) {
|
||||
console.log(value);
|
||||
}
|
||||
/***/ },
|
||||
|
||||
ReactDOM.render(
|
||||
<div style={parentStyle}>
|
||||
<div style={style}>
|
||||
<p>Slider with marks, `step=null`</p>
|
||||
<Slider vertical min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Slider with marks and steps</p>
|
||||
<Slider vertical dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Slider with marks, `included=false`</p>
|
||||
<Slider vertical min={-10} marks={marks} included={false} defaultValue={20} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Slider with marks and steps, `included=false`</p>
|
||||
<Slider vertical min={-10} marks={marks} step={10} included={false} defaultValue={20} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Range with marks</p>
|
||||
<Slider vertical min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Range with marks and steps</p>
|
||||
<Slider vertical min={-10} range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />
|
||||
</div>
|
||||
</div>
|
||||
, document.getElementById('__react-content'));
|
||||
/***/ 326:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
'use strict';
|
||||
|
||||
__webpack_require__(2);
|
||||
|
||||
var React = __webpack_require__(3);
|
||||
var ReactDOM = __webpack_require__(34);
|
||||
var Slider = __webpack_require__(180);
|
||||
|
||||
var style = { float: 'left', width: 160, height: 400, marginBottom: 160, marginLeft: 50 };
|
||||
var parentStyle = { overflow: 'hidden' };
|
||||
|
||||
var marks = {
|
||||
'-10': '-10°C',
|
||||
0: React.createElement(
|
||||
'strong',
|
||||
null,
|
||||
'0\xB0C'
|
||||
),
|
||||
26: '26°C',
|
||||
37: '37°C',
|
||||
50: '50°C',
|
||||
100: {
|
||||
style: {
|
||||
color: 'red'
|
||||
},
|
||||
label: React.createElement(
|
||||
'strong',
|
||||
null,
|
||||
'100\xB0C'
|
||||
)
|
||||
}
|
||||
};
|
||||
|
||||
function log(value) {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
'div',
|
||||
{ style: parentStyle },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Slider with marks, `step=null`'
|
||||
),
|
||||
React.createElement(Slider, { vertical: true, 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, { vertical: true, dots: true, 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, { vertical: true, 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, { vertical: true, 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, { vertical: true, 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, { vertical: true, min: -10, range: true, marks: marks, step: 10,
|
||||
onChange: log, defaultValue: [20, 40]
|
||||
})
|
||||
)
|
||||
), document.getElementById('__react-content'));
|
||||
|
||||
/***/ }
|
||||
|
||||
});
|
||||
//# sourceMappingURL=v-marks.js.map
|
||||
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["webpack:///./examples/v-marks.js"],"names":["require","React","ReactDOM","Slider","style","float","width","height","marginBottom","marginLeft","parentStyle","overflow","marks","color","label","log","value","console","render","document","getElementById"],"mappings":";;;;;;;;;;;;;;;AAAA,oBAAAA,CAAQ,CAAR;;AAEA,KAAMC,QAAQ,mBAAAD,CAAQ,CAAR,CAAd;AACA,KAAME,WAAW,mBAAAF,CAAQ,EAAR,CAAjB;AACA,KAAMG,SAAS,mBAAAH,CAAQ,GAAR,CAAf;;AAEA,KAAMI,QAAQ,EAAEC,OAAO,MAAT,EAAiBC,OAAO,GAAxB,EAA6BC,QAAQ,GAArC,EAA0CC,cAAc,GAAxD,EAA6DC,YAAY,EAAzE,EAAd;AACA,KAAMC,cAAc,EAAEC,UAAU,QAAZ,EAApB;;AAEA,KAAMC,QAAQ;AACZ,UAAO,OADK;AAEZ,MAAG;AAAA;AAAA;AAAA;AAAA,IAFS;AAGZ,OAAI,MAHQ;AAIZ,OAAI,MAJQ;AAKZ,OAAI,MALQ;AAMZ,QAAK;AACHR,YAAO;AACLS,cAAO;AADF,MADJ;AAIHC,YAAO;AAAA;AAAA;AAAA;AAAA;AAJJ;AANO,EAAd;;AAcA,UAASC,GAAT,CAAaC,KAAb,EAAoB;AAClBC,WAAQF,GAAR,CAAYC,KAAZ;AACD;;AAEDd,UAASgB,MAAT,CACE;AAAA;AAAA,KAAK,OAAOR,WAAZ;AACE;AAAA;AAAA,OAAK,OAAON,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,OAAOQ,KAAlC,EAAyC,MAAM,IAA/C,EAAqD,UAAUG,GAA/D,EAAoE,cAAc,EAAlF;AAFF,IADF;AAKE;AAAA;AAAA,OAAK,OAAOX,KAAZ;AACG;AAAA;AAAA;AAAA;AAAA,MADH;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,UAAjB,EAAsB,KAAK,CAAC,EAA5B,EAAgC,OAAOQ,KAAvC,EAA8C,MAAM,EAApD,EAAwD,UAAUG,GAAlE,EAAuE,cAAc,EAArF;AAFF,IALF;AASE;AAAA;AAAA,OAAK,OAAOX,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,OAAOQ,KAAlC,EAAyC,UAAU,KAAnD,EAA0D,cAAc,EAAxE;AAFF,IATF;AAaE;AAAA;AAAA,OAAK,OAAOR,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,OAAOQ,KAAlC,EAAyC,MAAM,EAA/C,EAAmD,UAAU,KAA7D,EAAoE,cAAc,EAAlF;AAFF,IAbF;AAiBE;AAAA;AAAA,OAAK,OAAOR,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,WAA3B,EAAiC,OAAOQ,KAAxC,EAA+C,UAAUG,GAAzD,EAA8D,cAAc,CAAC,EAAD,EAAK,EAAL,CAA5E;AAFF,IAjBF;AAqBE;AAAA;AAAA,OAAK,OAAOX,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,WAA3B,EAAiC,OAAOQ,KAAxC,EAA+C,MAAM,EAArD;AACE,iBAAUG,GADZ,EACiB,cAAc,CAAC,EAAD,EAAK,EAAL;AAD/B;AAFF;AArBF,EADF,EA6BII,SAASC,cAAT,CAAwB,iBAAxB,CA7BJ,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}\n onChange={log} defaultValue={[20, 40]}\n />\n </div>\n </div>\n , document.getElementById('__react-content'));\n\n\n\n// WEBPACK FOOTER //\n// ./examples/v-marks.js"],"sourceRoot":""}
|
||||
@@ -0,0 +1,405 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>v-range.js - example - rc-slider@5.4.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="https://a.alipayobjects.com/normalize.css/3.0.1/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]-->
|
||||
<script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
|
||||
<script>
|
||||
if(!window.Promise) {
|
||||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="common.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>rc-slider@5.4.0</h1>
|
||||
|
||||
<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-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-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(e) {
|
||||
<span class="hljs-keyword">this</span>.setState({ lowerBound: +e.target.value });
|
||||
},
|
||||
onUpperBoundChange(e) {
|
||||
<span class="hljs-keyword">this</span>.setState({ upperBound: +e.target.value });
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
value,
|
||||
});
|
||||
},
|
||||
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] });
|
||||
},
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<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>
|
||||
/></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>LowerBound: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.lowerBound}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onLowerBoundChange}</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>UpperBound: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.upperBound}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onUpperBoundChange}</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.handleApply}</span>></span>Apply<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
)</span>;
|
||||
},
|
||||
});
|
||||
|
||||
<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
|
||||
getInitialState() {
|
||||
<span class="hljs-keyword">return</span> {
|
||||
min: <span class="hljs-number">0</span>,
|
||||
max: <span class="hljs-number">100</span>,
|
||||
};
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
},
|
||||
onMinChange(e) {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
min: +e.target.value || <span class="hljs-number">0</span>,
|
||||
});
|
||||
},
|
||||
onMaxChange(e) {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
max: +e.target.value || <span class="hljs-number">100</span>,
|
||||
});
|
||||
},
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<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>
|
||||
/></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Min: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Max: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
)</span>;
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{parentStyle}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Range，`allowCross=false`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Range，`step=20` <span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Range，`step=20, dots` <span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Controlled Range<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</span>]} /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Customized Range<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">CustomizedRange</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Range with dynamic `max` `min`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">DynamicBounds</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></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>
|
||||
<script>FastClick.attach(document.body);</script>
|
||||
<script src="common.js?nowrap"></script>
|
||||
<script src="v-range.js?nowrap"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
+196
-111
@@ -1,116 +1,201 @@
|
||||
/* eslint react/no-multi-comp: 0 */
|
||||
require('rc-slider/assets/index.less');
|
||||
webpackJsonp([5],{
|
||||
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
const Slider = require('rc-slider');
|
||||
/***/ 0:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
const style = { float: 'left', width: 180, height: 400, marginBottom: 160, marginLeft: 50 };
|
||||
const parentStyle = { overflow: 'hidden' };
|
||||
module.exports = __webpack_require__(327);
|
||||
|
||||
function log(value) {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
const CustomizedRange = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
lowerBound: 20,
|
||||
upperBound: 40,
|
||||
value: [20, 40],
|
||||
};
|
||||
},
|
||||
onLowerBoundChange(e) {
|
||||
this.setState({ lowerBound: +e.target.value });
|
||||
},
|
||||
onUpperBoundChange(e) {
|
||||
this.setState({ upperBound: +e.target.value });
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
this.setState({
|
||||
value,
|
||||
});
|
||||
},
|
||||
handleApply() {
|
||||
const { lowerBound, upperBound } = this.state;
|
||||
this.setState({ value: [lowerBound, upperBound] });
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div style={style}>
|
||||
<Slider range vertical allowCross={false} value={this.state.value} onChange={this.onSliderChange} />
|
||||
<label>LowerBound: </label>
|
||||
<input type="number" value={this.state.lowerBound} onChange={this.onLowerBoundChange} />
|
||||
<br />
|
||||
<label>UpperBound: </label>
|
||||
<input type="number" value={this.state.upperBound} onChange={this.onUpperBoundChange} />
|
||||
<br />
|
||||
<button onClick={this.handleApply}>Apply</button>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
/***/ },
|
||||
|
||||
/***/ 327:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/* eslint react/no-multi-comp: 0 */
|
||||
__webpack_require__(2);
|
||||
|
||||
var React = __webpack_require__(3);
|
||||
var ReactDOM = __webpack_require__(34);
|
||||
var Slider = __webpack_require__(180);
|
||||
|
||||
var style = { float: 'left', width: 180, height: 400, marginBottom: 160, marginLeft: 50 };
|
||||
var parentStyle = { overflow: 'hidden' };
|
||||
|
||||
function log(value) {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
var CustomizedRange = React.createClass({
|
||||
displayName: 'CustomizedRange',
|
||||
getInitialState: function getInitialState() {
|
||||
return {
|
||||
lowerBound: 20,
|
||||
upperBound: 40,
|
||||
value: [20, 40]
|
||||
};
|
||||
},
|
||||
onLowerBoundChange: function onLowerBoundChange(e) {
|
||||
this.setState({ lowerBound: +e.target.value });
|
||||
},
|
||||
onUpperBoundChange: function onUpperBoundChange(e) {
|
||||
this.setState({ upperBound: +e.target.value });
|
||||
},
|
||||
onSliderChange: function onSliderChange(value) {
|
||||
log(value);
|
||||
this.setState({
|
||||
value: value
|
||||
});
|
||||
},
|
||||
handleApply: function handleApply() {
|
||||
var _state = this.state,
|
||||
lowerBound = _state.lowerBound,
|
||||
upperBound = _state.upperBound;
|
||||
|
||||
this.setState({ value: [lowerBound, upperBound] });
|
||||
},
|
||||
render: function render() {
|
||||
return React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(Slider, { range: true, vertical: true, allowCross: false, value: this.state.value,
|
||||
onChange: this.onSliderChange
|
||||
}),
|
||||
React.createElement(
|
||||
'label',
|
||||
null,
|
||||
'LowerBound: '
|
||||
),
|
||||
React.createElement('input', { type: 'number', value: this.state.lowerBound, onChange: this.onLowerBoundChange }),
|
||||
React.createElement('br', null),
|
||||
React.createElement(
|
||||
'label',
|
||||
null,
|
||||
'UpperBound: '
|
||||
),
|
||||
React.createElement('input', { type: 'number', value: this.state.upperBound, onChange: this.onUpperBoundChange }),
|
||||
React.createElement('br', null),
|
||||
React.createElement(
|
||||
'button',
|
||||
{ onClick: this.handleApply },
|
||||
'Apply'
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var DynamicBounds = React.createClass({
|
||||
displayName: 'DynamicBounds',
|
||||
getInitialState: function getInitialState() {
|
||||
return {
|
||||
min: 0,
|
||||
max: 100
|
||||
};
|
||||
},
|
||||
onSliderChange: function onSliderChange(value) {
|
||||
log(value);
|
||||
},
|
||||
onMinChange: function onMinChange(e) {
|
||||
this.setState({
|
||||
min: +e.target.value || 0
|
||||
});
|
||||
},
|
||||
onMaxChange: function onMaxChange(e) {
|
||||
this.setState({
|
||||
max: +e.target.value || 100
|
||||
});
|
||||
},
|
||||
render: function render() {
|
||||
return React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(Slider, { range: true, vertical: true, defaultValue: [20, 50], min: this.state.min, max: this.state.max,
|
||||
onChange: this.onSliderChange
|
||||
}),
|
||||
React.createElement(
|
||||
'label',
|
||||
null,
|
||||
'Min: '
|
||||
),
|
||||
React.createElement('input', { type: 'number', value: this.state.min, onChange: this.onMinChange }),
|
||||
React.createElement('br', null),
|
||||
React.createElement(
|
||||
'label',
|
||||
null,
|
||||
'Max: '
|
||||
),
|
||||
React.createElement('input', { type: 'number', value: this.state.max, onChange: this.onMaxChange })
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
'div',
|
||||
{ style: parentStyle },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Basic Range\uFF0C`allowCross=false`'
|
||||
),
|
||||
React.createElement(Slider, { range: true, vertical: true, allowCross: false, defaultValue: [0, 20], onChange: log })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Basic Range\uFF0C`step=20` '
|
||||
),
|
||||
React.createElement(Slider, { range: true, vertical: true, step: 20, defaultValue: [20, 40], onBeforeChange: log })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Basic Range\uFF0C`step=20, dots` '
|
||||
),
|
||||
React.createElement(Slider, { range: true, vertical: 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, vertical: true, value: [20, 40] })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Customized Range'
|
||||
),
|
||||
React.createElement(CustomizedRange, null)
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Range with dynamic `max` `min`'
|
||||
),
|
||||
React.createElement(DynamicBounds, null)
|
||||
)
|
||||
), document.getElementById('__react-content'));
|
||||
|
||||
/***/ }
|
||||
|
||||
});
|
||||
|
||||
const DynamicBounds = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
min: 0,
|
||||
max: 100,
|
||||
};
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
},
|
||||
onMinChange(e) {
|
||||
this.setState({
|
||||
min: +e.target.value || 0,
|
||||
});
|
||||
},
|
||||
onMaxChange(e) {
|
||||
this.setState({
|
||||
max: +e.target.value || 100,
|
||||
});
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div style={style}>
|
||||
<Slider range vertical defaultValue={[20, 50]} min={this.state.min} max={this.state.max} onChange={this.onSliderChange} />
|
||||
<label>Min: </label>
|
||||
<input type="number" value={this.state.min} onChange={this.onMinChange} />
|
||||
<br />
|
||||
<label>Max: </label>
|
||||
<input type="number" value={this.state.max} onChange={this.onMaxChange} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<div style={parentStyle}>
|
||||
<div style={style}>
|
||||
<p>Basic Range，`allowCross=false`</p>
|
||||
<Slider range vertical allowCross={false} defaultValue={[0, 20]} onChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Basic Range，`step=20` </p>
|
||||
<Slider range vertical step={20} defaultValue={[20, 40]} onBeforeChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Basic Range，`step=20, dots` </p>
|
||||
<Slider range vertical dots step={20} defaultValue={[20, 40]} onAfterChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Controlled Range</p>
|
||||
<Slider range vertical value={[20, 40]} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Customized Range</p>
|
||||
<CustomizedRange />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Range with dynamic `max` `min`</p>
|
||||
<DynamicBounds />
|
||||
</div>
|
||||
</div>
|
||||
, document.getElementById('__react-content'));
|
||||
//# sourceMappingURL=v-range.js.map
|
||||
File diff suppressed because one or more lines are too long
+395
-1
@@ -1 +1,395 @@
|
||||
placeholder
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>v-slider.js - example - rc-slider@5.4.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="https://a.alipayobjects.com/normalize.css/3.0.1/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]-->
|
||||
<script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
|
||||
<script>
|
||||
if(!window.Promise) {
|
||||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
|
||||
}
|
||||
</script>
|
||||
<link rel="stylesheet" href="common.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>rc-slider@5.4.0</h1>
|
||||
|
||||
<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-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-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${v}</span> %`</span>;
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">const</span> CustomizedSlider = React.createClass({
|
||||
getInitialState() {
|
||||
<span class="hljs-keyword">return</span> {
|
||||
value: <span class="hljs-number">50</span>,
|
||||
};
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
value,
|
||||
});
|
||||
},
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<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> /></span>;</span>
|
||||
},
|
||||
});
|
||||
|
||||
<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
|
||||
getInitialState() {
|
||||
<span class="hljs-keyword">return</span> {
|
||||
min: <span class="hljs-number">0</span>,
|
||||
max: <span class="hljs-number">100</span>,
|
||||
};
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
},
|
||||
onMinChange(e) {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
min: +e.target.value || <span class="hljs-number">0</span>,
|
||||
});
|
||||
},
|
||||
onMaxChange(e) {
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
max: +e.target.value || <span class="hljs-number">100</span>,
|
||||
});
|
||||
},
|
||||
render() {
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Slider with dynamic `min` `max`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</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>
|
||||
/></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Min: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Max: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
)</span>;
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{parentStyle}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Slider<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Slider，`step=20`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Slider，`step=20, dots`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</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> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Slider with `tipFormatter`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</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>
|
||||
/></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Slider without tooltip<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">tipFormatter</span>=<span class="hljs-value">{null}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Controlled Slider<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{50}</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Customized Slider<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">CustomizedSlider</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"><<span class="hljs-title">DynamicBounds</span> /></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||||
<span class="hljs-tag"></<span class="hljs-title">div</span>></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>
|
||||
<script>FastClick.attach(document.body);</script>
|
||||
<script src="common.js?nowrap"></script>
|
||||
<script src="v-slider.js?nowrap"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
+181
-100
@@ -1,106 +1,187 @@
|
||||
/* eslint react/no-multi-comp: 0 */
|
||||
require('rc-slider/assets/index.less');
|
||||
webpackJsonp([6],{
|
||||
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
const Slider = require('rc-slider');
|
||||
/***/ 0:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
const style = { float: 'left', width: 200, height: 400, marginBottom: 160, marginLeft: 50 };
|
||||
const parentStyle = { overflow: 'hidden' };
|
||||
|
||||
function log(value) {
|
||||
console.log(value);
|
||||
}
|
||||
module.exports = __webpack_require__(328);
|
||||
|
||||
|
||||
function percentFormatter(v) {
|
||||
return v + ' %';
|
||||
}
|
||||
/***/ },
|
||||
|
||||
/***/ 328:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/* eslint react/no-multi-comp: 0 */
|
||||
__webpack_require__(2);
|
||||
|
||||
var React = __webpack_require__(3);
|
||||
var ReactDOM = __webpack_require__(34);
|
||||
var Slider = __webpack_require__(180);
|
||||
|
||||
var style = { float: 'left', width: 200, height: 400, marginBottom: 160, marginLeft: 50 };
|
||||
var parentStyle = { overflow: 'hidden' };
|
||||
|
||||
function log(value) {
|
||||
console.log(value);
|
||||
}
|
||||
|
||||
function percentFormatter(v) {
|
||||
return v + ' %';
|
||||
}
|
||||
|
||||
var CustomizedSlider = React.createClass({
|
||||
displayName: 'CustomizedSlider',
|
||||
getInitialState: function getInitialState() {
|
||||
return {
|
||||
value: 50
|
||||
};
|
||||
},
|
||||
onSliderChange: function onSliderChange(value) {
|
||||
log(value);
|
||||
this.setState({
|
||||
value: value
|
||||
});
|
||||
},
|
||||
render: function render() {
|
||||
return React.createElement(Slider, { vertical: true, value: this.state.value, onChange: this.onSliderChange });
|
||||
}
|
||||
});
|
||||
|
||||
var DynamicBounds = React.createClass({
|
||||
displayName: 'DynamicBounds',
|
||||
getInitialState: function getInitialState() {
|
||||
return {
|
||||
min: 0,
|
||||
max: 100
|
||||
};
|
||||
},
|
||||
onSliderChange: function onSliderChange(value) {
|
||||
log(value);
|
||||
},
|
||||
onMinChange: function onMinChange(e) {
|
||||
this.setState({
|
||||
min: +e.target.value || 0
|
||||
});
|
||||
},
|
||||
onMaxChange: function onMaxChange(e) {
|
||||
this.setState({
|
||||
max: +e.target.value || 100
|
||||
});
|
||||
},
|
||||
render: function render() {
|
||||
return React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Slider with dynamic `min` `max`'
|
||||
),
|
||||
React.createElement(Slider, { vertical: true, defaultValue: 50, min: this.state.min, max: this.state.max,
|
||||
onChange: this.onSliderChange
|
||||
}),
|
||||
React.createElement(
|
||||
'label',
|
||||
null,
|
||||
'Min: '
|
||||
),
|
||||
React.createElement('input', { type: 'number', value: this.state.min, onChange: this.onMinChange }),
|
||||
React.createElement('br', null),
|
||||
React.createElement(
|
||||
'label',
|
||||
null,
|
||||
'Max: '
|
||||
),
|
||||
React.createElement('input', { type: 'number', value: this.state.max, onChange: this.onMaxChange })
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
ReactDOM.render(React.createElement(
|
||||
'div',
|
||||
{ style: parentStyle },
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Basic Slider'
|
||||
),
|
||||
React.createElement(Slider, { vertical: true, tipTransitionName: 'rc-slider-tooltip-zoom-down', onChange: log })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Basic Slider\uFF0C`step=20`'
|
||||
),
|
||||
React.createElement(Slider, { vertical: true, step: 20, defaultValue: 50, onBeforeChange: log })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Basic Slider\uFF0C`step=20, dots`'
|
||||
),
|
||||
React.createElement(Slider, { vertical: true, dots: true, step: 20, defaultValue: 100, onAfterChange: log })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Basic Slider with `tipFormatter`'
|
||||
),
|
||||
React.createElement(Slider, { vertical: true, tipFormatter: percentFormatter,
|
||||
tipTransitionName: 'rc-slider-tooltip-zoom-down', onChange: log
|
||||
})
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Basic Slider without tooltip'
|
||||
),
|
||||
React.createElement(Slider, { vertical: true, tipFormatter: null, onChange: log })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Controlled Slider'
|
||||
),
|
||||
React.createElement(Slider, { vertical: true, value: 50 })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Customized Slider'
|
||||
),
|
||||
React.createElement(CustomizedSlider, null)
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
null,
|
||||
React.createElement(DynamicBounds, null)
|
||||
)
|
||||
), document.getElementById('__react-content'));
|
||||
|
||||
/***/ }
|
||||
|
||||
const CustomizedSlider = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
value: 50,
|
||||
};
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
this.setState({
|
||||
value,
|
||||
});
|
||||
},
|
||||
render() {
|
||||
return <Slider vertical value={this.state.value} onChange={this.onSliderChange} />;
|
||||
},
|
||||
});
|
||||
|
||||
const DynamicBounds = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
min: 0,
|
||||
max: 100,
|
||||
};
|
||||
},
|
||||
onSliderChange(value) {
|
||||
log(value);
|
||||
},
|
||||
onMinChange(e) {
|
||||
this.setState({
|
||||
min: +e.target.value || 0,
|
||||
});
|
||||
},
|
||||
onMaxChange(e) {
|
||||
this.setState({
|
||||
max: +e.target.value || 100,
|
||||
});
|
||||
},
|
||||
render() {
|
||||
return (
|
||||
<div style={style}>
|
||||
<p>Slider with dynamic `min` `max`</p>
|
||||
<Slider vertical defaultValue={50} min={this.state.min} max={this.state.max} onChange={this.onSliderChange} />
|
||||
<label>Min: </label>
|
||||
<input type="number" value={this.state.min} onChange={this.onMinChange} />
|
||||
<br />
|
||||
<label>Max: </label>
|
||||
<input type="number" value={this.state.max} onChange={this.onMaxChange} />
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
ReactDOM.render(
|
||||
<div style={parentStyle}>
|
||||
<div style={style}>
|
||||
<p>Basic Slider</p>
|
||||
<Slider vertical tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Basic Slider，`step=20`</p>
|
||||
<Slider vertical step={20} defaultValue={50} onBeforeChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Basic Slider，`step=20, dots`</p>
|
||||
<Slider vertical dots step={20} defaultValue={100} onAfterChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Basic Slider with `tipFormatter`</p>
|
||||
<Slider vertical tipFormatter={percentFormatter} tipTransitionName="rc-slider-tooltip-zoom-down" onChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Basic Slider without tooltip</p>
|
||||
<Slider vertical tipFormatter={null} onChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Controlled Slider</p>
|
||||
<Slider vertical value={50} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>Customized Slider</p>
|
||||
<CustomizedSlider />
|
||||
</div>
|
||||
<div>
|
||||
<DynamicBounds />
|
||||
</div>
|
||||
</div>
|
||||
, document.getElementById('__react-content'));
|
||||
//# sourceMappingURL=v-slider.js.map
|
||||
File diff suppressed because one or more lines are too long
+932
@@ -0,0 +1,932 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<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"/>
|
||||
<title>rc-slider@5.4.0 - slider ui component for react</title>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: octicons-anchor;
|
||||
src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAYcAA0AAAAACjQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABwAAAAca8vGTk9TLzIAAAFMAAAARAAAAFZG1VHVY21hcAAAAZAAAAA+AAABQgAP9AdjdnQgAAAB0AAAAAQAAAAEACICiGdhc3AAAAHUAAAACAAAAAj//wADZ2x5ZgAAAdwAAADRAAABEKyikaNoZWFkAAACsAAAAC0AAAA2AtXoA2hoZWEAAALgAAAAHAAAACQHngNFaG10eAAAAvwAAAAQAAAAEAwAACJsb2NhAAADDAAAAAoAAAAKALIAVG1heHAAAAMYAAAAHwAAACABEAB2bmFtZQAAAzgAAALBAAAFu3I9x/Nwb3N0AAAF/AAAAB0AAAAvaoFvbwAAAAEAAAAAzBdyYwAAAADP2IQvAAAAAM/bz7t4nGNgZGFgnMDAysDB1Ml0hoGBoR9CM75mMGLkYGBgYmBlZsAKAtJcUxgcPsR8iGF2+O/AEMPsznAYKMwIkgMA5REMOXicY2BgYGaAYBkGRgYQsAHyGMF8FgYFIM0ChED+h5j//yEk/3KoSgZGNgYYk4GRCUgwMaACRoZhDwCs7QgGAAAAIgKIAAAAAf//AAJ4nHWMMQrCQBBF/0zWrCCIKUQsTDCL2EXMohYGSSmorScInsRGL2DOYJe0Ntp7BK+gJ1BxF1stZvjz/v8DRghQzEc4kIgKwiAppcA9LtzKLSkdNhKFY3HF4lK69ExKslx7Xa+vPRVS43G98vG1DnkDMIBUgFN0MDXflU8tbaZOUkXUH0+U27RoRpOIyCKjbMCVejwypzJJG4jIwb43rfl6wbwanocrJm9XFYfskuVC5K/TPyczNU7b84CXcbxks1Un6H6tLH9vf2LRnn8Ax7A5WQAAAHicY2BkYGAA4teL1+yI57f5ysDNwgAC529f0kOmWRiYVgEpDgYmEA8AUzEKsQAAAHicY2BkYGB2+O/AEMPCAAJAkpEBFbAAADgKAe0EAAAiAAAAAAQAAAAEAAAAAAAAKgAqACoAiAAAeJxjYGRgYGBhsGFgYgABEMkFhAwM/xn0QAIAD6YBhwB4nI1Ty07cMBS9QwKlQapQW3VXySvEqDCZGbGaHULiIQ1FKgjWMxknMfLEke2A+IJu+wntrt/QbVf9gG75jK577Lg8K1qQPCfnnnt8fX1NRC/pmjrk/zprC+8D7tBy9DHgBXoWfQ44Av8t4Bj4Z8CLtBL9CniJluPXASf0Lm4CXqFX8Q84dOLnMB17N4c7tBo1AS/Qi+hTwBH4rwHHwN8DXqQ30XXAS7QaLwSc0Gn8NuAVWou/gFmnjLrEaEh9GmDdDGgL3B4JsrRPDU2hTOiMSuJUIdKQQayiAth69r6akSSFqIJuA19TrzCIaY8sIoxyrNIrL//pw7A2iMygkX5vDj+G+kuoLdX4GlGK/8Lnlz6/h9MpmoO9rafrz7ILXEHHaAx95s9lsI7AHNMBWEZHULnfAXwG9/ZqdzLI08iuwRloXE8kfhXYAvE23+23DU3t626rbs8/8adv+9DWknsHp3E17oCf+Z48rvEQNZ78paYM38qfk3v/u3l3u3GXN2Dmvmvpf1Srwk3pB/VSsp512bA/GG5i2WJ7wu430yQ5K3nFGiOqgtmSB5pJVSizwaacmUZzZhXLlZTq8qGGFY2YcSkqbth6aW1tRmlaCFs2016m5qn36SbJrqosG4uMV4aP2PHBmB3tjtmgN2izkGQyLWprekbIntJFing32a5rKWCN/SdSoga45EJykyQ7asZvHQ8PTm6cslIpwyeyjbVltNikc2HTR7YKh9LBl9DADC0U/jLcBZDKrMhUBfQBvXRzLtFtjU9eNHKin0x5InTqb8lNpfKv1s1xHzTXRqgKzek/mb7nB8RZTCDhGEX3kK/8Q75AmUM/eLkfA+0Hi908Kx4eNsMgudg5GLdRD7a84npi+YxNr5i5KIbW5izXas7cHXIMAau1OueZhfj+cOcP3P8MNIWLyYOBuxL6DRylJ4cAAAB4nGNgYoAALjDJyIAOWMCiTIxMLDmZedkABtIBygAAAA==) format('woff');
|
||||
}
|
||||
|
||||
.markdown-body, .examples, #readme {
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
text-size-adjust: 100%;
|
||||
color: #333;
|
||||
overflow: hidden;
|
||||
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.markdown-body a, .examples a {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.markdown-body a:active,
|
||||
.markdown-body a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.markdown-body strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
.markdown-body img {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
box-sizing: content-box;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.markdown-body code,
|
||||
.markdown-body kbd,
|
||||
.markdown-body pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.markdown-body input {
|
||||
color: inherit;
|
||||
font: inherit;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown-body html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.markdown-body input {
|
||||
line-height: normal;
|
||||
}
|
||||
|
||||
.markdown-body input[type="checkbox"] {
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
.markdown-body td,
|
||||
.markdown-body th {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.markdown-body input {
|
||||
font: 13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
||||
}
|
||||
|
||||
.markdown-body a {
|
||||
color: #4078c0;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body a:hover,
|
||||
.markdown-body a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
height: 0;
|
||||
margin: 15px 0;
|
||||
overflow: hidden;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.markdown-body hr:before {
|
||||
display: table;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.markdown-body hr:after {
|
||||
display: table;
|
||||
clear: both;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.markdown-body h1,
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4,
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
margin-top: 15px;
|
||||
margin-bottom: 15px;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.markdown-body h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.markdown-body h5 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown-body h6 {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.markdown-body blockquote {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
padding: 0;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body ol ol,
|
||||
.markdown-body ul ol {
|
||||
list-style-type: lower-roman;
|
||||
}
|
||||
|
||||
.markdown-body ul ul ol,
|
||||
.markdown-body ul ol ol,
|
||||
.markdown-body ol ul ol,
|
||||
.markdown-body ol ol ol {
|
||||
list-style-type: lower-alpha;
|
||||
}
|
||||
|
||||
.markdown-body dd {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.markdown-body code {
|
||||
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
}
|
||||
|
||||
.markdown-body .octicon {
|
||||
font: normal normal normal 16px/1 octicons-anchor;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
text-rendering: auto;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.markdown-body .octicon-link:before {
|
||||
content: '\f05c';
|
||||
}
|
||||
|
||||
.markdown-body > *:first-child {
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.markdown-body > *:last-child {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.markdown-body a:not([href]) {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body .anchor {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
padding-right: 6px;
|
||||
padding-left: 30px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.markdown-body .anchor:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.markdown-body h1,
|
||||
.markdown-body h2,
|
||||
.markdown-body h3,
|
||||
.markdown-body h4,
|
||||
.markdown-body h5,
|
||||
.markdown-body h6 {
|
||||
position: relative;
|
||||
margin-top: 1em;
|
||||
margin-bottom: 16px;
|
||||
font-weight: bold;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.markdown-body h1 .octicon-link,
|
||||
.markdown-body h2 .octicon-link,
|
||||
.markdown-body h3 .octicon-link,
|
||||
.markdown-body h4 .octicon-link,
|
||||
.markdown-body h5 .octicon-link,
|
||||
.markdown-body h6 .octicon-link {
|
||||
display: none;
|
||||
color: #000;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.markdown-body h1:hover .anchor,
|
||||
.markdown-body h2:hover .anchor,
|
||||
.markdown-body h3:hover .anchor,
|
||||
.markdown-body h4:hover .anchor,
|
||||
.markdown-body h5:hover .anchor,
|
||||
.markdown-body h6:hover .anchor {
|
||||
padding-left: 8px;
|
||||
margin-left: -30px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.markdown-body h1:hover .anchor .octicon-link,
|
||||
.markdown-body h2:hover .anchor .octicon-link,
|
||||
.markdown-body h3:hover .anchor .octicon-link,
|
||||
.markdown-body h4:hover .anchor .octicon-link,
|
||||
.markdown-body h5:hover .anchor .octicon-link,
|
||||
.markdown-body h6:hover .anchor .octicon-link {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.markdown-body h1 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 2.25em;
|
||||
line-height: 1.2;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.markdown-body h1 .anchor {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.markdown-body h2 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.75em;
|
||||
line-height: 1.225;
|
||||
border-bottom: 1px solid #eee;
|
||||
}
|
||||
|
||||
.markdown-body h2 .anchor {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.markdown-body h3 {
|
||||
font-size: 1.5em;
|
||||
line-height: 1.43;
|
||||
}
|
||||
|
||||
.markdown-body h3 .anchor {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.markdown-body h4 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.markdown-body h4 .anchor {
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.markdown-body h5 {
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
.markdown-body h5 .anchor {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.markdown-body h6 {
|
||||
font-size: 1em;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.markdown-body h6 .anchor {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.markdown-body p,
|
||||
.markdown-body blockquote,
|
||||
.markdown-body ul,
|
||||
.markdown-body ol,
|
||||
.markdown-body dl,
|
||||
.markdown-body table,
|
||||
.markdown-body pre {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body hr {
|
||||
height: 4px;
|
||||
padding: 0;
|
||||
margin: 16px 0;
|
||||
background-color: #e7e7e7;
|
||||
border: 0 none;
|
||||
}
|
||||
|
||||
.markdown-body ul,
|
||||
.markdown-body ol {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
.markdown-body ul ul,
|
||||
.markdown-body ul ol,
|
||||
.markdown-body ol ol,
|
||||
.markdown-body ol ul {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body li > p {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.markdown-body dl {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.markdown-body dl dt {
|
||||
padding: 0;
|
||||
margin-top: 16px;
|
||||
font-size: 1em;
|
||||
font-style: italic;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.markdown-body dl dd {
|
||||
padding: 0 16px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body blockquote {
|
||||
padding: 0 15px;
|
||||
color: #777;
|
||||
border-left: 4px solid #ddd;
|
||||
}
|
||||
|
||||
.markdown-body blockquote > :first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.markdown-body blockquote > :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.markdown-body table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
word-break: normal;
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.markdown-body table th {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.markdown-body table th,
|
||||
.markdown-body table td {
|
||||
padding: 6px 13px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.markdown-body table tr {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.markdown-body table tr:nth-child(2n) {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.markdown-body img {
|
||||
max-width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.markdown-body code {
|
||||
padding: 0;
|
||||
padding-top: 0.2em;
|
||||
padding-bottom: 0.2em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown-body code:before,
|
||||
.markdown-body code:after {
|
||||
letter-spacing: -0.2em;
|
||||
content: "\00a0";
|
||||
}
|
||||
|
||||
.markdown-body pre > code {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 100%;
|
||||
word-break: normal;
|
||||
white-space: pre;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.markdown-body .highlight {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.markdown-body .highlight pre,
|
||||
.markdown-body pre {
|
||||
padding: 16px;
|
||||
overflow: auto;
|
||||
font-size: 85%;
|
||||
line-height: 1.45;
|
||||
background-color: #f7f7f7;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.markdown-body .highlight pre {
|
||||
margin-bottom: 0;
|
||||
word-break: normal;
|
||||
}
|
||||
|
||||
.markdown-body pre {
|
||||
word-wrap: normal;
|
||||
}
|
||||
|
||||
.markdown-body pre code {
|
||||
display: inline;
|
||||
max-width: initial;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: initial;
|
||||
line-height: inherit;
|
||||
word-wrap: normal;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.markdown-body pre code:before,
|
||||
.markdown-body pre code:after {
|
||||
content: normal;
|
||||
}
|
||||
|
||||
.markdown-body kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font-size: 11px;
|
||||
line-height: 10px;
|
||||
color: #555;
|
||||
vertical-align: middle;
|
||||
background-color: #fcfcfc;
|
||||
border: solid 1px #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbb;
|
||||
}
|
||||
|
||||
.markdown-body kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
line-height: 10px;
|
||||
color: #555;
|
||||
vertical-align: middle;
|
||||
background-color: #fcfcfc;
|
||||
border: solid 1px #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbb;
|
||||
}
|
||||
|
||||
.markdown-body .task-list-item {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.markdown-body .task-list-item + .task-list-item {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.markdown-body .task-list-item input {
|
||||
margin: 0 0.35em 0.25em -1.6em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.markdown-body:checked + .radio-label {
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
border-color: #4078c0;
|
||||
}
|
||||
|
||||
#readme, .examples {
|
||||
min-width: 200px;
|
||||
max-width: 790px;
|
||||
margin: 30px auto;
|
||||
padding: 0 30px;
|
||||
}
|
||||
|
||||
#readme .boxed-group {
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
#readme .markdown-body,
|
||||
#readme .plain,
|
||||
.examples .examples-body {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ddd;
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
padding: 30px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.boxed-group > h3,
|
||||
.examples > h3,
|
||||
.boxed-group .heading {
|
||||
background-color: #f5f5f5;
|
||||
margin: 0;
|
||||
border-radius: 3px 3px 0 0;
|
||||
border: 1px solid #d8d8d8;
|
||||
border-bottom: 0;
|
||||
padding: 9px 10px 10px;
|
||||
font-size: 14px;
|
||||
line-height: 17px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.examples-body ul {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<style type="text/css">
|
||||
/*
|
||||
|
||||
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
color: #333;
|
||||
background: #f8f8f8;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.diff .hljs-header {
|
||||
color: #998;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.css .rule .hljs-keyword,
|
||||
.hljs-winutils,
|
||||
.nginx .hljs-title,
|
||||
.hljs-subst,
|
||||
.hljs-request,
|
||||
.hljs-status {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-hexcolor,
|
||||
.ruby .hljs-constant {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-tag .hljs-value,
|
||||
.hljs-doctag,
|
||||
.tex .hljs-formula {
|
||||
color: #d14;
|
||||
}
|
||||
|
||||
.hljs-title,
|
||||
.hljs-id,
|
||||
.scss .hljs-preprocessor {
|
||||
color: #900;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-list .hljs-keyword,
|
||||
.hljs-subst {
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-type,
|
||||
.vhdl .hljs-literal,
|
||||
.tex .hljs-command {
|
||||
color: #458;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-tag,
|
||||
.hljs-tag .hljs-title,
|
||||
.hljs-rule .hljs-property,
|
||||
.django .hljs-tag .hljs-keyword {
|
||||
color: #000080;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.hljs-attribute,
|
||||
.hljs-variable,
|
||||
.lisp .hljs-body,
|
||||
.hljs-name {
|
||||
color: #008080;
|
||||
}
|
||||
|
||||
.hljs-regexp {
|
||||
color: #009926;
|
||||
}
|
||||
|
||||
.hljs-symbol,
|
||||
.ruby .hljs-symbol .hljs-string,
|
||||
.lisp .hljs-keyword,
|
||||
.clojure .hljs-keyword,
|
||||
.scheme .hljs-keyword,
|
||||
.tex .hljs-special,
|
||||
.hljs-prompt {
|
||||
color: #990073;
|
||||
}
|
||||
|
||||
.hljs-built_in {
|
||||
color: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-preprocessor,
|
||||
.hljs-pragma,
|
||||
.hljs-pi,
|
||||
.hljs-doctype,
|
||||
.hljs-shebang,
|
||||
.hljs-cdata {
|
||||
color: #999;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background: #fdd;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background: #dfd;
|
||||
}
|
||||
|
||||
.diff .hljs-change {
|
||||
background: #0086b3;
|
||||
}
|
||||
|
||||
.hljs-chunk {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.header {
|
||||
min-width: 200px;
|
||||
max-width: 790px;
|
||||
margin:0 auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>rc-slider@5.4.0</h1>
|
||||
</div>
|
||||
<div class="examples">
|
||||
<h3>EXAMPLES</h3>
|
||||
<div class="examples-body">
|
||||
<ul>
|
||||
|
||||
<li><a href="examples/custom-handles.html">custom-handles</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>
|
||||
|
||||
<li><a href="examples/v-marks.html">v-marks</a></li>
|
||||
|
||||
<li><a href="examples/v-range.html">v-range</a></li>
|
||||
|
||||
<li><a href="examples/v-slider.html">v-slider</a></li>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div id="readme" class="boxed-group">
|
||||
<h3>README.md</h3>
|
||||
<div class="markdown-body">
|
||||
<h1>rc-slider<a id="user-content-rc-slider" name="rc-slider" class="anchor" aria-hidden="true" href="#rc-slider"><span class="octicon octicon-link"></span></a></h1><hr>
|
||||
<p>slider ui component for react</p>
|
||||
<p><a href="http://npmjs.org/package/rc-slider" title="null"><img src="http://img.shields.io/npm/v/rc-slider.svg?style=flat-square" alt="NPM version"></a>
|
||||
<a href="https://travis-ci.org/react-component/slider" title="null"><img src="https://img.shields.io/travis/react-component/slider.svg?style=flat-square" alt="build status"></a>
|
||||
<a href="https://coveralls.io/r/react-component/slider?branch=master" title="null"><img src="https://img.shields.io/coveralls/react-component/slider.svg?style=flat-square" alt="Test coverage"></a>
|
||||
<a href="https://gemnasium.com/react-component/slider" title="null"><img src="http://img.shields.io/gemnasium/react-component/slider.svg?style=flat-square" alt="gemnasium deps"></a>
|
||||
<a href="http://nodejs.org/download/" title="null"><img src="https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square" alt="node version"></a>
|
||||
<a href="https://npmjs.org/package/rc-slider" title="null"><img src="https://img.shields.io/npm/dm/rc-slider.svg?style=flat-square" alt="npm download"></a>
|
||||
<a href="https://saucelabs.com/u/rc-slider" title="null"><img src="https://saucelabs.com/buildstatus/rc-slider" alt="Sauce Test Status"></a></p>
|
||||
<p><a href="https://saucelabs.com/u/rc-slider" title="null"><img src="https://saucelabs.com/browser-matrix/rc-slider.svg" alt="Sauce Test Status"></a></p>
|
||||
<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>
|
||||
<h3>Keyboard<a id="user-content-keyboard" name="keyboard" class="anchor" aria-hidden="true" href="#keyboard"><span class="octicon octicon-link"></span></a></h3><h2>install<a id="user-content-install" name="install" class="anchor" aria-hidden="true" href="#install"><span class="octicon octicon-link"></span></a></h2><p><a href="https://npmjs.org/package/rc-slider" title="null"><img src="https://nodei.co/npm/rc-slider.png" alt="rc-slider"></a></p>
|
||||
<h2>Usage<a id="user-content-usage" name="usage" class="anchor" aria-hidden="true" href="#usage"><span class="octicon octicon-link"></span></a></h2><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">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>);
|
||||
ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Slider</span> /></span>, container);</span></code></pre></div><h2>API<a id="user-content-api" name="api" class="anchor" aria-hidden="true" href="#api"><span class="octicon octicon-link"></span></a></h2><h3>props<a id="user-content-props" name="props" class="anchor" aria-hidden="true" href="#props"><span class="octicon octicon-link"></span></a></h3><table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width: 100px;">name</th>
|
||||
<th style="width: 50px;">type</th>
|
||||
<th style="width: 50px;">default</th>
|
||||
<th>description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>className</td>
|
||||
<td>String</td>
|
||||
<td>rc-slider</td>
|
||||
<td>Additional css class for the root dom node</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>min</td>
|
||||
<td>number</td>
|
||||
<td>0</td>
|
||||
<td>The minimum value of the slider</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>max</td>
|
||||
<td>number</td>
|
||||
<td>100</td>
|
||||
<td>The maximum value of the slider</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>marks</td>
|
||||
<td>object{number: string} or object{number: object{ style, label }}</td>
|
||||
<td>{}</td>
|
||||
<td>Mark on the slider. The key determines the position, and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains <code>style</code> and <code>label</code> properties.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>step</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. 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>
|
||||
<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. 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 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>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>If vertical is <code>true</code>, the slider will be vertical.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>defaultValue</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>value</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>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>handle</td>
|
||||
<td>Component</td>
|
||||
<td></td>
|
||||
<td>Provide a custom Handle to use in the slider by passing a component. This component will have a <code>value</code> and <code>offset</code> props used to define custom styling/content.</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>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>If <code>true</code>, handles can't be moved.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>tipTransitionName</td>
|
||||
<td>string</td>
|
||||
<td>''</td>
|
||||
<td>Set the animation for tooltip if it shows.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>tipFormatter</td>
|
||||
<td>function or <code>null</code></td>
|
||||
<td></td>
|
||||
<td>Format the value of the tooltip if it shows. If <code>null</code> the tooltip will always be hidden. When given a function, the first argument will be the value and the second will be the index of the slider handle.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>dots</td>
|
||||
<td>bool</td>
|
||||
<td>false</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>
|
||||
<tr>
|
||||
<td>onChange</td>
|
||||
<td>function</td>
|
||||
<td>NOOP</td>
|
||||
<td><code>onChange</code> will be triggered while the value of Slider changing.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>onAfterChange</td>
|
||||
<td>function</td>
|
||||
<td>NOOP</td>
|
||||
<td><code>onAfterChange</code> will be triggered when <code>ontouchend</code> or <code>onmouseup</code> is triggered.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h2>Development<a id="user-content-development" name="development" class="anchor" aria-hidden="true" href="#development"><span class="octicon octicon-link"></span></a></h2><div class="highlight"><pre><code language="undefined">npm install
|
||||
npm start</code></pre></div><h2>Example<a id="user-content-example" name="example" class="anchor" aria-hidden="true" href="#example"><span class="octicon octicon-link"></span></a></h2><p><a href="http://localhost:8005/examples/" title="null">http://localhost:8005/examples/</a></p>
|
||||
<p>online example: <a href="http://react-component.github.io/slider/" title="null">http://react-component.github.io/slider/</a></p>
|
||||
<h2>Test Case<a id="user-content-test-case" name="test-case" class="anchor" aria-hidden="true" href="#test-case"><span class="octicon octicon-link"></span></a></h2><p><a href="http://localhost:8005/tests/runner.html?coverage" title="null">http://localhost:8005/tests/runner.html?coverage</a></p>
|
||||
<h2>Coverage<a id="user-content-coverage" name="coverage" class="anchor" aria-hidden="true" href="#coverage"><span class="octicon octicon-link"></span></a></h2><p><a href="http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage" title="null">http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage</a></p>
|
||||
<h2>License<a id="user-content-license" name="license" class="anchor" aria-hidden="true" href="#license"><span class="octicon octicon-link"></span></a></h2><p>rc-slider is released under the MIT license.</p>
|
||||
|
||||
</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>
|
||||
@@ -1,60 +0,0 @@
|
||||
{
|
||||
"name": "rc-slider",
|
||||
"version": "4.0.0",
|
||||
"description": "slider ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
"react-component",
|
||||
"react-slider",
|
||||
"slider"
|
||||
],
|
||||
"homepage": "http://github.com/react-component/slider",
|
||||
"author": "sima.zhang1990@gmail.com",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:react-component/slider.git"
|
||||
},
|
||||
"bugs": {
|
||||
"url": "http://github.com/react-component/slider/issues"
|
||||
},
|
||||
"files": [
|
||||
"assets/*.css",
|
||||
"lib"
|
||||
],
|
||||
"licenses": "MIT",
|
||||
"main": "./lib/index.js",
|
||||
"style": "./assets/index.css",
|
||||
"config": {
|
||||
"port": 8005
|
||||
},
|
||||
"scripts": {
|
||||
"build": "rc-tools run build",
|
||||
"gh-pages": "rc-tools run gh-pages",
|
||||
"start": "rc-tools run server",
|
||||
"pub": "rc-tools run pub --babel-runtime",
|
||||
"lint": "rc-tools run lint",
|
||||
"karma": "rc-tools run karma",
|
||||
"saucelabs": "rc-tools run saucelabs",
|
||||
"test": "rc-tools run test",
|
||||
"chrome-test": "rc-tools run chrome-test",
|
||||
"coverage": "rc-tools run coverage"
|
||||
},
|
||||
"devDependencies": {
|
||||
"expect.js": "0.3.x",
|
||||
"pre-commit": "1.x",
|
||||
"rc-tools": "^5.6.8",
|
||||
"react": "^15.2.1",
|
||||
"react-addons-test-utils": "^15.2.1",
|
||||
"react-dom": "^15.2.1"
|
||||
},
|
||||
"pre-commit": [
|
||||
"lint"
|
||||
],
|
||||
"dependencies": {
|
||||
"babel-runtime": "6.x",
|
||||
"classnames": "^2.2.5",
|
||||
"rc-tooltip": "^3.4.2",
|
||||
"rc-util": "^3.2.1",
|
||||
"warning": "^3.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,77 +0,0 @@
|
||||
import React from 'react';
|
||||
import Tooltip from 'rc-tooltip';
|
||||
|
||||
export default class Handle extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
isTooltipVisible: false,
|
||||
};
|
||||
}
|
||||
|
||||
showTooltip() {
|
||||
this.setState({
|
||||
isTooltipVisible: true,
|
||||
});
|
||||
}
|
||||
|
||||
hideTooltip() {
|
||||
this.setState({
|
||||
isTooltipVisible: false,
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
prefixCls,
|
||||
className,
|
||||
tipTransitionName,
|
||||
tipFormatter,
|
||||
vertical,
|
||||
offset,
|
||||
value,
|
||||
dragging,
|
||||
noTip,
|
||||
} = this.props;
|
||||
|
||||
const style = vertical ? { bottom: offset + '%' } : { left: offset + '%' };
|
||||
const handle = (
|
||||
<div className={className} style={style}
|
||||
onMouseUp={this.showTooltip.bind(this)}
|
||||
onMouseEnter={this.showTooltip.bind(this)}
|
||||
onMouseLeave={this.hideTooltip.bind(this)}
|
||||
/>
|
||||
);
|
||||
|
||||
if (noTip) {
|
||||
return handle;
|
||||
}
|
||||
|
||||
const isTooltipVisible = dragging || this.state.isTooltipVisible;
|
||||
return (
|
||||
<Tooltip
|
||||
prefixCls={prefixCls.replace('slider', 'tooltip')}
|
||||
placement="top"
|
||||
visible={isTooltipVisible}
|
||||
overlay={<span>{tipFormatter(value)}</span>}
|
||||
delay={0}
|
||||
transitionName={tipTransitionName}
|
||||
>
|
||||
{handle}
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Handle.propTypes = {
|
||||
prefixCls: React.PropTypes.string,
|
||||
className: React.PropTypes.string,
|
||||
vertical: React.PropTypes.bool,
|
||||
offset: React.PropTypes.number,
|
||||
tipTransitionName: React.PropTypes.string,
|
||||
tipFormatter: React.PropTypes.func,
|
||||
value: React.PropTypes.number,
|
||||
dragging: React.PropTypes.bool,
|
||||
noTip: React.PropTypes.bool,
|
||||
};
|
||||
@@ -1,47 +0,0 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
|
||||
const Marks = ({ className, vertical, marks, included, upperBound, lowerBound, max, min }) => {
|
||||
const marksKeys = Object.keys(marks);
|
||||
const marksCount = marksKeys.length;
|
||||
const unit = 100 / (marksCount - 1);
|
||||
const markWidth = unit * 0.9;
|
||||
|
||||
const range = max - min;
|
||||
const elements = marksKeys.map(parseFloat).sort((a, b) => a - b).map((point) => {
|
||||
const isActived = (!included && point === upperBound) ||
|
||||
(included && point <= upperBound && point >= lowerBound);
|
||||
const markClassName = classNames({
|
||||
[className + '-text']: true,
|
||||
[className + '-text-active']: isActived,
|
||||
});
|
||||
|
||||
const bottomStyle = {
|
||||
// height: markWidth + '%',
|
||||
marginBottom: '-200' + '%',
|
||||
bottom: (point - min) / range * 100 + '%',
|
||||
};
|
||||
|
||||
const leftStyle = {
|
||||
width: markWidth + '%',
|
||||
marginLeft: -markWidth / 2 + '%',
|
||||
left: (point - min) / range * 100 + '%',
|
||||
};
|
||||
|
||||
const style = vertical ? bottomStyle : leftStyle;
|
||||
|
||||
const markPoint = marks[point];
|
||||
const markPointIsObject = typeof markPoint === 'object' &&
|
||||
!React.isValidElement(markPoint);
|
||||
const markLabel = markPointIsObject ? markPoint.label : markPoint;
|
||||
const markStyle = markPointIsObject ?
|
||||
{ ...style, ...markPoint.style } : style;
|
||||
return (<span className={markClassName} style={markStyle} key={point}>
|
||||
{markLabel}
|
||||
</span>);
|
||||
});
|
||||
|
||||
return <div className={className}>{elements}</div>;
|
||||
};
|
||||
|
||||
export default Marks;
|
||||
-544
@@ -1,544 +0,0 @@
|
||||
import React, { cloneElement } from 'react';
|
||||
import addEventListener from 'rc-util/lib/Dom/addEventListener';
|
||||
import classNames from 'classnames';
|
||||
import Track from './Track';
|
||||
import DefaultHandle from './Handle';
|
||||
import Steps from './Steps';
|
||||
import Marks from './Marks';
|
||||
|
||||
function noop() {
|
||||
}
|
||||
|
||||
function isNotTouchEvent(e) {
|
||||
return e.touches.length > 1 || (e.type.toLowerCase() === 'touchend' && e.touches.length > 0);
|
||||
}
|
||||
|
||||
function getTouchPosition(vertical, e) {
|
||||
return vertical ? e.touches[0].clientY : e.touches[0].pageX;
|
||||
}
|
||||
|
||||
function getMousePosition(vertical, e) {
|
||||
return vertical ? e.clientY : e.pageX;
|
||||
}
|
||||
|
||||
function pauseEvent(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
class Slider extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
const { range, min, max } = props;
|
||||
const initialValue = range ? Array.apply(null, Array(range + 1)).map(() => min) : min;
|
||||
const defaultValue = ('defaultValue' in props ? props.defaultValue : initialValue);
|
||||
const value = (props.value !== undefined ? props.value : defaultValue);
|
||||
|
||||
const bounds = (range ? value : [min, value]).map(v => this.trimAlignValue(v));
|
||||
|
||||
let recent;
|
||||
if (range && bounds[0] === bounds[bounds.length - 1] && bounds[0] === max) {
|
||||
recent = 0;
|
||||
} else {
|
||||
recent = bounds.length - 1;
|
||||
}
|
||||
|
||||
this.state = {
|
||||
handle: null,
|
||||
recent,
|
||||
bounds,
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (!('value' in nextProps || 'min' in nextProps || 'max' in nextProps)) return;
|
||||
|
||||
const { bounds } = this.state;
|
||||
if (nextProps.range) {
|
||||
const value = nextProps.value || bounds;
|
||||
const nextBounds = value.map(v => this.trimAlignValue(v, nextProps));
|
||||
if (nextBounds.every((v, i) => v === bounds[i])) return;
|
||||
|
||||
this.setState({ bounds: nextBounds });
|
||||
if (bounds.some(v => this.isValueOutOfBounds(v, nextProps))) {
|
||||
this.props.onChange(nextBounds);
|
||||
}
|
||||
} else {
|
||||
const value = nextProps.value !== undefined ? nextProps.value : bounds[1];
|
||||
const nextValue = this.trimAlignValue(value, nextProps);
|
||||
if (nextValue === bounds[1] && bounds[0] === nextProps.min) return;
|
||||
|
||||
this.setState({ bounds: [nextProps.min, nextValue] });
|
||||
if (this.isValueOutOfBounds(bounds[1], nextProps)) {
|
||||
this.props.onChange(nextValue);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onChange(state) {
|
||||
const props = this.props;
|
||||
const isNotControlled = !('value' in props);
|
||||
if (isNotControlled) {
|
||||
this.setState(state);
|
||||
} else if (state.handle) {
|
||||
this.setState({ handle: state.handle });
|
||||
}
|
||||
|
||||
const data = { ...this.state, ...state };
|
||||
const changedValue = props.range ? data.bounds : data.bounds[1];
|
||||
props.onChange(changedValue);
|
||||
}
|
||||
|
||||
onMouseMove(e) {
|
||||
const position = getMousePosition(this.props.vertical, e);
|
||||
this.onMove(e, position);
|
||||
}
|
||||
|
||||
onTouchMove(e) {
|
||||
if (isNotTouchEvent(e)) {
|
||||
this.end('touch');
|
||||
return;
|
||||
}
|
||||
|
||||
const position = getTouchPosition(this.props.vertical, e);
|
||||
this.onMove(e, position);
|
||||
}
|
||||
|
||||
onMove(e, position) {
|
||||
pauseEvent(e);
|
||||
const props = this.props;
|
||||
const state = this.state;
|
||||
|
||||
let diffPosition = position - this.startPosition;
|
||||
diffPosition = this.props.vertical ? -diffPosition : diffPosition;
|
||||
const diffValue = diffPosition / this.getSliderLength() * (props.max - props.min);
|
||||
|
||||
const value = this.trimAlignValue(this.startValue + diffValue);
|
||||
const oldValue = state[state.handle];
|
||||
if (value === oldValue) return;
|
||||
|
||||
const nextBounds = [...state.bounds];
|
||||
nextBounds[state.handle] = value;
|
||||
let nextHandle = state.handle;
|
||||
if (props.pushable !== false) {
|
||||
const originalValue = state.bounds[nextHandle];
|
||||
this.pushSurroundingHandles(nextBounds, nextHandle, originalValue);
|
||||
} else if (props.allowCross) {
|
||||
nextBounds.sort((a, b) => a - b);
|
||||
nextHandle = nextBounds.indexOf(value);
|
||||
}
|
||||
this.onChange({
|
||||
handle: nextHandle,
|
||||
bounds: nextBounds,
|
||||
});
|
||||
}
|
||||
|
||||
onTouchStart(e) {
|
||||
if (isNotTouchEvent(e)) return;
|
||||
|
||||
const position = getTouchPosition(this.props.vertical, e);
|
||||
this.onStart(position);
|
||||
this.addDocumentEvents('touch');
|
||||
pauseEvent(e);
|
||||
}
|
||||
|
||||
onMouseDown(e) {
|
||||
if (e.button !== 0) { return; }
|
||||
const position = getMousePosition(this.props.vertical, e);
|
||||
this.onStart(position);
|
||||
this.addDocumentEvents('mouse');
|
||||
pauseEvent(e);
|
||||
}
|
||||
|
||||
onStart(position) {
|
||||
const props = this.props;
|
||||
props.onBeforeChange(this.getValue());
|
||||
|
||||
const value = this.calcValueByPos(position);
|
||||
this.startValue = value;
|
||||
this.startPosition = position;
|
||||
|
||||
const state = this.state;
|
||||
const { bounds } = state;
|
||||
|
||||
let valueNeedChanging = 1;
|
||||
if (this.props.range) {
|
||||
let closestBound = 0;
|
||||
for (let i = 1; i < bounds.length - 1; ++i) {
|
||||
if (value > bounds[i]) { closestBound = i; }
|
||||
}
|
||||
if (Math.abs(bounds[closestBound + 1] - value) < Math.abs(bounds[closestBound] - value)) {
|
||||
closestBound = closestBound + 1;
|
||||
}
|
||||
valueNeedChanging = closestBound;
|
||||
|
||||
const isAtTheSamePoint = (bounds[closestBound + 1] === bounds[closestBound]);
|
||||
if (isAtTheSamePoint) {
|
||||
valueNeedChanging = state.recent;
|
||||
}
|
||||
|
||||
if (isAtTheSamePoint && (value !== bounds[closestBound + 1])) {
|
||||
valueNeedChanging = value < bounds[closestBound + 1] ? closestBound : closestBound + 1;
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
handle: valueNeedChanging,
|
||||
recent: valueNeedChanging,
|
||||
});
|
||||
|
||||
const oldValue = state.bounds[valueNeedChanging];
|
||||
if (value === oldValue) return;
|
||||
|
||||
const nextBounds = [...state.bounds];
|
||||
nextBounds[valueNeedChanging] = value;
|
||||
this.onChange({ bounds: nextBounds });
|
||||
}
|
||||
|
||||
getValue() {
|
||||
const { bounds } = this.state;
|
||||
return this.props.range ? bounds : bounds[1];
|
||||
}
|
||||
|
||||
getSliderLength() {
|
||||
const slider = this.refs.slider;
|
||||
if (!slider) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return this.props.vertical ? slider.clientHeight : slider.clientWidth;
|
||||
}
|
||||
|
||||
getSliderStart() {
|
||||
const slider = this.refs.slider;
|
||||
const rect = slider.getBoundingClientRect();
|
||||
|
||||
return this.props.vertical ? rect.top : rect.left;
|
||||
}
|
||||
|
||||
getPrecision(step) {
|
||||
const stepString = step.toString();
|
||||
let precision = 0;
|
||||
if (stepString.indexOf('.') >= 0) {
|
||||
precision = stepString.length - stepString.indexOf('.') - 1;
|
||||
}
|
||||
return precision;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns an array of possible slider points, taking into account both
|
||||
* `marks` and `step`. The result is cached.
|
||||
*/
|
||||
getPoints() {
|
||||
const { marks, step, min, max } = this.props;
|
||||
const cache = this._getPointsCache;
|
||||
if (!cache || cache.marks !== marks || cache.step !== step) {
|
||||
const pointsObject = { ...marks };
|
||||
if (step !== null) {
|
||||
for (let point = min; point <= max; point += step) {
|
||||
pointsObject[point] = point;
|
||||
}
|
||||
}
|
||||
const points = Object.keys(pointsObject).map(parseFloat);
|
||||
points.sort((a, b) => a - b);
|
||||
this._getPointsCache = { marks, step, points };
|
||||
}
|
||||
return this._getPointsCache.points;
|
||||
}
|
||||
|
||||
isValueOutOfBounds(value, props) {
|
||||
return value < props.min || value > props.max;
|
||||
}
|
||||
|
||||
trimAlignValue(v, nextProps) {
|
||||
const state = this.state || {};
|
||||
const { handle, bounds } = state;
|
||||
const { marks, step, min, max, allowCross } = { ...this.props, ...(nextProps || {}) };
|
||||
|
||||
let val = v;
|
||||
if (val <= min) {
|
||||
val = min;
|
||||
}
|
||||
if (val >= max) {
|
||||
val = max;
|
||||
}
|
||||
/* eslint-disable eqeqeq */
|
||||
if (!allowCross && handle != null && handle > 0 && val <= bounds[handle - 1]) {
|
||||
val = bounds[handle - 1];
|
||||
}
|
||||
if (!allowCross && handle != null && handle < bounds.length - 1 && val >= bounds[handle + 1]) {
|
||||
val = bounds[handle + 1];
|
||||
}
|
||||
/* eslint-enable eqeqeq */
|
||||
|
||||
const points = Object.keys(marks).map(parseFloat);
|
||||
if (step !== null) {
|
||||
const closestStep = (Math.round((val - min) / step) * step) + min;
|
||||
points.push(closestStep);
|
||||
}
|
||||
|
||||
const diffs = points.map((point) => Math.abs(val - point));
|
||||
const closestPoint = points[diffs.indexOf(Math.min.apply(Math, diffs))];
|
||||
|
||||
return step !== null ? parseFloat(closestPoint.toFixed(this.getPrecision(step))) : closestPoint;
|
||||
}
|
||||
|
||||
pushHandleOnePoint(bounds, handle, direction) {
|
||||
const points = this.getPoints();
|
||||
const pointIndex = points.indexOf(bounds[handle]);
|
||||
const nextPointIndex = pointIndex + direction;
|
||||
if (nextPointIndex >= points.length || nextPointIndex < 0) {
|
||||
// reached the minimum or maximum available point, can't push anymore
|
||||
return false;
|
||||
}
|
||||
const nextHandle = handle + direction;
|
||||
const nextValue = points[nextPointIndex];
|
||||
const { pushable: threshold } = this.props;
|
||||
const diffToNext = direction * (bounds[nextHandle] - nextValue);
|
||||
if (!this.pushHandle(bounds, nextHandle, direction, threshold - diffToNext)) {
|
||||
// couldn't push next handle, so we won't push this one either
|
||||
return false;
|
||||
}
|
||||
// push the handle
|
||||
bounds[handle] = nextValue;
|
||||
return true;
|
||||
}
|
||||
|
||||
pushHandle(bounds, handle, direction, amount) {
|
||||
const originalValue = bounds[handle];
|
||||
let currentValue = bounds[handle];
|
||||
while (direction * (currentValue - originalValue) < amount) {
|
||||
if (!this.pushHandleOnePoint(bounds, handle, direction)) {
|
||||
// can't push handle enough to create the needed `amount` gap, so we
|
||||
// revert its position to the original value
|
||||
bounds[handle] = originalValue;
|
||||
return false;
|
||||
}
|
||||
currentValue = bounds[handle];
|
||||
}
|
||||
// the handle was pushed enough to create the needed `amount` gap
|
||||
return true;
|
||||
}
|
||||
|
||||
pushSurroundingHandles(bounds, handle, originalValue) {
|
||||
const { pushable: threshold } = this.props;
|
||||
const value = bounds[handle];
|
||||
|
||||
let direction = 0;
|
||||
if (bounds[handle + 1] - value < threshold) {
|
||||
direction = +1;
|
||||
} else if (value - bounds[handle - 1] < threshold) {
|
||||
direction = -1;
|
||||
}
|
||||
|
||||
if (direction === 0) { return; }
|
||||
|
||||
const nextHandle = handle + direction;
|
||||
const diffToNext = direction * (bounds[nextHandle] - value);
|
||||
if (!this.pushHandle(bounds, nextHandle, direction, threshold - diffToNext)) {
|
||||
// revert to original value if pushing is impossible
|
||||
bounds[handle] = originalValue;
|
||||
}
|
||||
}
|
||||
|
||||
calcOffset(value) {
|
||||
const { min, max } = this.props;
|
||||
const ratio = (value - min) / (max - min);
|
||||
return ratio * 100;
|
||||
}
|
||||
|
||||
calcValue(offset) {
|
||||
const { vertical, min, max } = this.props;
|
||||
const ratio = Math.abs(offset / this.getSliderLength());
|
||||
const value = vertical ? (1 - ratio) * (max - min) + min : ratio * (max - min) + min;
|
||||
return value;
|
||||
}
|
||||
|
||||
calcValueByPos(position) {
|
||||
const pixelOffset = position - this.getSliderStart();
|
||||
const nextValue = this.trimAlignValue(this.calcValue(pixelOffset));
|
||||
return nextValue;
|
||||
}
|
||||
|
||||
addDocumentEvents(type) {
|
||||
if (type === 'touch') {
|
||||
// just work for chrome iOS Safari and Android Browser
|
||||
this.onTouchMoveListener = addEventListener(document, 'touchmove', this.onTouchMove.bind(this));
|
||||
this.onTouchUpListener = addEventListener(document, 'touchend', this.end.bind(this, 'touch'));
|
||||
} else if (type === 'mouse') {
|
||||
this.onMouseMoveListener = addEventListener(document, 'mousemove', this.onMouseMove.bind(this));
|
||||
this.onMouseUpListener = addEventListener(document, 'mouseup', this.end.bind(this, 'mouse'));
|
||||
}
|
||||
}
|
||||
|
||||
removeEvents(type) {
|
||||
if (type === 'touch') {
|
||||
this.onTouchMoveListener.remove();
|
||||
this.onTouchUpListener.remove();
|
||||
} else if (type === 'mouse') {
|
||||
this.onMouseMoveListener.remove();
|
||||
this.onMouseUpListener.remove();
|
||||
}
|
||||
}
|
||||
|
||||
end(type) {
|
||||
this.removeEvents(type);
|
||||
this.props.onAfterChange(this.getValue());
|
||||
this.setState({ handle: null });
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
handle,
|
||||
bounds,
|
||||
} = this.state;
|
||||
const {
|
||||
className,
|
||||
prefixCls,
|
||||
disabled,
|
||||
vertical,
|
||||
dots,
|
||||
included,
|
||||
range,
|
||||
step,
|
||||
marks,
|
||||
max, min,
|
||||
tipTransitionName,
|
||||
tipFormatter,
|
||||
children,
|
||||
} = this.props;
|
||||
|
||||
const customHandle = this.props.handle;
|
||||
|
||||
const offsets = bounds.map(v => this.calcOffset(v));
|
||||
|
||||
const handleClassName = prefixCls + '-handle';
|
||||
|
||||
const handlesClassNames = bounds.map((v, i) => classNames({
|
||||
[handleClassName]: true,
|
||||
[`${handleClassName}-${i + 1}`]: true,
|
||||
[`${handleClassName}-lower`]: i === 0,
|
||||
[`${handleClassName}-upper`]: i === bounds.length - 1,
|
||||
}));
|
||||
|
||||
const isNoTip = (step === null) || (tipFormatter === null);
|
||||
|
||||
const commonHandleProps = {
|
||||
prefixCls,
|
||||
noTip: isNoTip,
|
||||
tipTransitionName,
|
||||
tipFormatter,
|
||||
vertical,
|
||||
};
|
||||
|
||||
const handles = bounds.map((v, i) => cloneElement(customHandle, {
|
||||
...commonHandleProps,
|
||||
className: handlesClassNames[i],
|
||||
value: v,
|
||||
offset: offsets[i],
|
||||
dragging: handle === i,
|
||||
key: i,
|
||||
}));
|
||||
if (!range) { handles.shift(); }
|
||||
|
||||
const isIncluded = included || range;
|
||||
|
||||
const tracks = [];
|
||||
for (let i = 1; i < bounds.length; ++i) {
|
||||
const trackClassName = classNames({
|
||||
[`${prefixCls}-track`]: true,
|
||||
[`${prefixCls}-track-${i}`]: true,
|
||||
});
|
||||
tracks.push(
|
||||
<Track className={trackClassName} vertical={vertical} included={isIncluded}
|
||||
offset={offsets[i - 1]} length={offsets[i] - offsets[i - 1]} key={i} />
|
||||
);
|
||||
}
|
||||
|
||||
const sliderClassName = classNames({
|
||||
[prefixCls]: true,
|
||||
[prefixCls + '-disabled']: disabled,
|
||||
[className]: !!className,
|
||||
[prefixCls + '-vertical']: this.props.vertical,
|
||||
});
|
||||
|
||||
return (
|
||||
<div ref="slider" className={sliderClassName}
|
||||
onTouchStart={disabled ? noop : this.onTouchStart.bind(this)}
|
||||
onMouseDown={disabled ? noop : this.onMouseDown.bind(this)}
|
||||
>
|
||||
{handles}
|
||||
{tracks}
|
||||
<Steps prefixCls={prefixCls} vertical = {vertical} marks={marks} dots={dots} step={step}
|
||||
included={isIncluded} lowerBound={bounds[0]}
|
||||
upperBound={bounds[bounds.length - 1]} max={max} min={min} />
|
||||
<Marks className={prefixCls + '-mark'} vertical = {vertical} marks={marks}
|
||||
included={isIncluded} lowerBound={bounds[0]}
|
||||
upperBound={bounds[bounds.length - 1]} max={max} min={min} />
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Slider.propTypes = {
|
||||
min: React.PropTypes.number,
|
||||
max: React.PropTypes.number,
|
||||
step: React.PropTypes.number,
|
||||
defaultValue: React.PropTypes.oneOfType([
|
||||
React.PropTypes.number,
|
||||
React.PropTypes.arrayOf(React.PropTypes.number),
|
||||
]),
|
||||
value: React.PropTypes.oneOfType([
|
||||
React.PropTypes.number,
|
||||
React.PropTypes.arrayOf(React.PropTypes.number),
|
||||
]),
|
||||
marks: React.PropTypes.object,
|
||||
included: React.PropTypes.bool,
|
||||
className: React.PropTypes.string,
|
||||
prefixCls: React.PropTypes.string,
|
||||
disabled: React.PropTypes.bool,
|
||||
children: React.PropTypes.any,
|
||||
onBeforeChange: React.PropTypes.func,
|
||||
onChange: React.PropTypes.func,
|
||||
onAfterChange: React.PropTypes.func,
|
||||
handle: React.PropTypes.element,
|
||||
tipTransitionName: React.PropTypes.string,
|
||||
tipFormatter: React.PropTypes.func,
|
||||
dots: React.PropTypes.bool,
|
||||
range: React.PropTypes.oneOfType([
|
||||
React.PropTypes.bool,
|
||||
React.PropTypes.number,
|
||||
]),
|
||||
vertical: React.PropTypes.bool,
|
||||
allowCross: React.PropTypes.bool,
|
||||
pushable: React.PropTypes.oneOfType([
|
||||
React.PropTypes.bool,
|
||||
React.PropTypes.number,
|
||||
]),
|
||||
};
|
||||
|
||||
Slider.defaultProps = {
|
||||
prefixCls: 'rc-slider',
|
||||
className: '',
|
||||
tipTransitionName: '',
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
marks: {},
|
||||
handle: <DefaultHandle />,
|
||||
onBeforeChange: noop,
|
||||
onChange: noop,
|
||||
onAfterChange: noop,
|
||||
tipFormatter: value => value,
|
||||
included: true,
|
||||
disabled: false,
|
||||
dots: false,
|
||||
range: false,
|
||||
vertical: false,
|
||||
allowCross: true,
|
||||
pushable: false,
|
||||
};
|
||||
|
||||
export default Slider;
|
||||
@@ -1,37 +0,0 @@
|
||||
import React from 'react';
|
||||
import classNames from 'classnames';
|
||||
import warning from 'warning';
|
||||
|
||||
function calcPoints(vertical, marks, dots, step, min, max) {
|
||||
warning(dots ? step > 0 : true, '`Slider[step]` should be a positive number in order to make Slider[dots] work.');
|
||||
const points = Object.keys(marks).map(parseFloat);
|
||||
if (dots) {
|
||||
for (let i = min; i <= max; i = i + step) {
|
||||
if (points.indexOf(i) >= 0) continue;
|
||||
points.push(i);
|
||||
}
|
||||
}
|
||||
return points;
|
||||
}
|
||||
|
||||
const Steps = ({ prefixCls, vertical, marks, dots, step, included,
|
||||
lowerBound, upperBound, max, min }) => {
|
||||
const range = max - min;
|
||||
const elements = calcPoints(vertical, marks, dots, step, min, max).map((point) => {
|
||||
const offset = Math.abs(point - min) / range * 100 + '%';
|
||||
const style = vertical ? { bottom: offset } : { left: offset };
|
||||
|
||||
const isActived = (!included && point === upperBound) ||
|
||||
(included && point <= upperBound && point >= lowerBound);
|
||||
const pointClassName = classNames({
|
||||
[prefixCls + '-dot']: true,
|
||||
[prefixCls + '-dot-active']: isActived,
|
||||
});
|
||||
|
||||
return <span className={pointClassName} style={style} key={point} />;
|
||||
});
|
||||
|
||||
return <div className={prefixCls + '-step'}>{elements}</div>;
|
||||
};
|
||||
|
||||
export default Steps;
|
||||
@@ -1,17 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const Track = ({ className, included, vertical, offset, length }) => {
|
||||
const style = {
|
||||
visibility: included ? 'visible' : 'hidden',
|
||||
};
|
||||
if (vertical) {
|
||||
style.bottom = offset + '%';
|
||||
style.height = length + '%';
|
||||
} else {
|
||||
style.left = offset + '%';
|
||||
style.width = length + '%';
|
||||
}
|
||||
return <div className={className} style={style} />;
|
||||
};
|
||||
|
||||
export default Track;
|
||||
@@ -1,2 +0,0 @@
|
||||
|
||||
module.exports = require('./Slider');
|
||||
-209
@@ -1,209 +0,0 @@
|
||||
const expect = require('expect.js');
|
||||
const React = require('react');
|
||||
const ReactDOM = require('react-dom');
|
||||
const ReactTestUtils = require('react-addons-test-utils');
|
||||
const Slider = require('..');
|
||||
|
||||
require('../assets/index.less');
|
||||
|
||||
describe('rc-slider', function test() {
|
||||
this.timeout(5000);
|
||||
const div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
|
||||
afterEach(() => {
|
||||
ReactDOM.unmountComponentAtNode(div);
|
||||
});
|
||||
|
||||
it('should render a Slider with correct DOM structure', () => {
|
||||
const slider = ReactDOM.render(<Slider />, div);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider').length).to.be(1);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-handle').length).to.be(1);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-track').length).to.be(1);
|
||||
});
|
||||
|
||||
it('should render a Slider with default value correctly', () => {
|
||||
const sliderWithDefaultValue = ReactDOM.render(<Slider defaultValue={50} />, div);
|
||||
expect(sliderWithDefaultValue.state.bounds[1]).to.be(50);
|
||||
expect(ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(sliderWithDefaultValue, 'rc-slider-handle')[0]
|
||||
.style.cssText)
|
||||
.to.match(/left: 50%;/);
|
||||
|
||||
const trackStyle = ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(sliderWithDefaultValue, 'rc-slider-track')[0]
|
||||
.style.cssText;
|
||||
expect(trackStyle).to.match(/left: 0%;/);
|
||||
expect(trackStyle).to.match(/width: 50%;/);
|
||||
expect(trackStyle).to.match(/visibility: visible;/);
|
||||
});
|
||||
|
||||
it('should render a Slider with value corrently', () => {
|
||||
const sliderWithValue = ReactDOM.render(<Slider value={50} />, div);
|
||||
expect(sliderWithValue.state.bounds[1]).to.be(50);
|
||||
expect(ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(sliderWithValue, 'rc-slider-handle')[0]
|
||||
.style.cssText)
|
||||
.to.match(/left: 50%;/);
|
||||
|
||||
const trackStyle = ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(sliderWithValue, 'rc-slider-track')[0]
|
||||
.style.cssText;
|
||||
expect(trackStyle).to.match(/left: 0%;/);
|
||||
expect(trackStyle).to.match(/width: 50%;/);
|
||||
expect(trackStyle).to.match(/visibility: visible;/);
|
||||
});
|
||||
|
||||
it('should render a Range with correct DOM structure', () => {
|
||||
const range = ReactDOM.render(<Slider range />, div);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider').length).to.be(1);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider-handle').length).to.be(2);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider-track').length).to.be(1);
|
||||
});
|
||||
|
||||
it('should render a Multi-Range with correct DOM structure', () => {
|
||||
const multiRange = ReactDOM.render(<Slider range={3} />, div);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider').length).to.be(1);
|
||||
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-handle').length).to.be(4);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-handle-1').length).to.be(1);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-handle-2').length).to.be(1);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-handle-3').length).to.be(1);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-handle-4').length).to.be(1);
|
||||
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-track').length).to.be(3);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-track-1').length).to.be(1);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-track-2').length).to.be(1);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(multiRange, 'rc-slider-track-3').length).to.be(1);
|
||||
});
|
||||
|
||||
it('should render a Range with default value correctly', () => {
|
||||
const rangeWithDefaultValue = ReactDOM.render(<Slider range defaultValue={[0, 50]} />, div);
|
||||
expect(rangeWithDefaultValue.state.bounds[0]).to.be(0);
|
||||
expect(rangeWithDefaultValue.state.bounds[1]).to.be(50);
|
||||
expect(ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(rangeWithDefaultValue, 'rc-slider-handle')[0]
|
||||
.style.cssText)
|
||||
.to.match(/left: 0%;/);
|
||||
expect(ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(rangeWithDefaultValue, 'rc-slider-handle')[1]
|
||||
.style.cssText)
|
||||
.to.match(/left: 50%;/);
|
||||
|
||||
const trackStyle = ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(rangeWithDefaultValue, 'rc-slider-track')[0]
|
||||
.style.cssText;
|
||||
expect(trackStyle).to.match(/left: 0%;/);
|
||||
expect(trackStyle).to.match(/width: 50%;/);
|
||||
expect(trackStyle).to.match(/visibility: visible;/);
|
||||
});
|
||||
|
||||
it('should render a Multi-Range with default value correctly', () => {
|
||||
const multiRangeWithDefaultValue = ReactDOM.render(<Slider range={3} defaultValue={[0, 25, 50, 75]} />, div);
|
||||
expect(multiRangeWithDefaultValue.state.bounds[0]).to.be(0);
|
||||
expect(multiRangeWithDefaultValue.state.bounds[1]).to.be(25);
|
||||
expect(multiRangeWithDefaultValue.state.bounds[2]).to.be(50);
|
||||
expect(multiRangeWithDefaultValue.state.bounds[3]).to.be(75);
|
||||
expect(ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(multiRangeWithDefaultValue, 'rc-slider-handle')[0]
|
||||
.style.cssText)
|
||||
.to.match(/left: 0%;/);
|
||||
expect(ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(multiRangeWithDefaultValue, 'rc-slider-handle')[1]
|
||||
.style.cssText)
|
||||
.to.match(/left: 25%;/);
|
||||
expect(ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(multiRangeWithDefaultValue, 'rc-slider-handle')[2]
|
||||
.style.cssText)
|
||||
.to.match(/left: 50%;/);
|
||||
expect(ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(multiRangeWithDefaultValue, 'rc-slider-handle')[3]
|
||||
.style.cssText)
|
||||
.to.match(/left: 75%;/);
|
||||
|
||||
const track1Style = ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(multiRangeWithDefaultValue, 'rc-slider-track-1')[0]
|
||||
.style.cssText;
|
||||
expect(track1Style).to.match(/left: 0%;/);
|
||||
expect(track1Style).to.match(/width: 25%;/);
|
||||
expect(track1Style).to.match(/visibility: visible;/);
|
||||
|
||||
const track2Style = ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(multiRangeWithDefaultValue, 'rc-slider-track-2')[0]
|
||||
.style.cssText;
|
||||
expect(track2Style).to.match(/left: 25%;/);
|
||||
expect(track2Style).to.match(/width: 25%;/);
|
||||
expect(track2Style).to.match(/visibility: visible;/);
|
||||
|
||||
const track3Style = ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(multiRangeWithDefaultValue, 'rc-slider-track-3')[0]
|
||||
.style.cssText;
|
||||
expect(track3Style).to.match(/left: 50%;/);
|
||||
expect(track3Style).to.match(/width: 25%;/);
|
||||
expect(track3Style).to.match(/visibility: visible;/);
|
||||
});
|
||||
|
||||
it('should render a Range with value correctly', () => {
|
||||
const rangeWithValue = ReactDOM.render(<Slider range value={[50, 100]} />, div);
|
||||
expect(rangeWithValue.state.bounds[0]).to.be(50);
|
||||
expect(rangeWithValue.state.bounds[1]).to.be(100);
|
||||
expect(ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(rangeWithValue, 'rc-slider-handle')[0]
|
||||
.style.cssText)
|
||||
.to.match(/left: 50%;/);
|
||||
expect(ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(rangeWithValue, 'rc-slider-handle')[1]
|
||||
.style.cssText)
|
||||
.to.match(/left: 100%;/);
|
||||
|
||||
const trackStyle = ReactTestUtils
|
||||
.scryRenderedDOMComponentsWithClass(rangeWithValue, 'rc-slider-track')[0]
|
||||
.style.cssText;
|
||||
expect(trackStyle).to.match(/left: 50%;/);
|
||||
expect(trackStyle).to.match(/width: 50%;/);
|
||||
expect(trackStyle).to.match(/visibility: visible;/);
|
||||
});
|
||||
|
||||
it('should render dots correctly when `dots=true`', () => {
|
||||
const slider = ReactDOM.render(<Slider value={50} step={10} dots />, div);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-dot').length).to.be(11);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-dot-active').length).to.be(6);
|
||||
|
||||
const range = ReactDOM.render(<Slider range value={[20, 50]} step={10} dots />, div);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider-dot').length).to.be(11);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider-dot-active').length).to.be(4);
|
||||
});
|
||||
|
||||
it('should render marks correctly when `marks` is not an empty object', () => {
|
||||
const marks = { 0: '0', 30: '30', 100: '100' };
|
||||
|
||||
const slider = ReactDOM.render(<Slider value={30} marks={marks} />, div);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-mark-text').length).to.be(3);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-mark-text')[0].innerHTML).to.be('0');
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-mark-text')[1].innerHTML).to.be('30');
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-mark-text')[2].innerHTML).to.be('100');
|
||||
|
||||
const range = ReactDOM.render(<Slider range value={[0, 30]} marks={marks} />, div);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(range, 'rc-slider-mark-text').length).to.be(3);
|
||||
});
|
||||
|
||||
it('should not set value greater than `max` or smaller `min`', () => {
|
||||
const sliderWithMin = ReactDOM.render(<Slider value={0} min={10} />, div);
|
||||
expect(sliderWithMin.state.bounds[1]).to.be(10);
|
||||
ReactDOM.unmountComponentAtNode(div);
|
||||
|
||||
const sliderWithMax = ReactDOM.render(<Slider value={100} max={90} />, div);
|
||||
expect(sliderWithMax.state.bounds[1]).to.be(90);
|
||||
ReactDOM.unmountComponentAtNode(div);
|
||||
|
||||
const range = ReactDOM.render(<Slider range value={[0, 100]} min={10} max={90} />, div);
|
||||
expect(range.state.bounds[0]).to.be(10);
|
||||
expect(range.state.bounds[1]).to.be(90);
|
||||
ReactDOM.unmountComponentAtNode(div);
|
||||
});
|
||||
|
||||
it('should render a vertical slider, when `vertical` is true', () => {
|
||||
const slider = ReactDOM.render(<Slider vertical />, div);
|
||||
expect(ReactTestUtils.scryRenderedDOMComponentsWithClass(slider, 'rc-slider-vertical').length).to.be(1);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user