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
|
||||
-26
@@ -1,26 +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
|
||||
-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"
|
||||
@@ -1,9 +0,0 @@
|
||||
# History
|
||||
----
|
||||
|
||||
|
||||
## 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,183 +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"/>
|
||||
|
||||
|
||||
## Feature
|
||||
|
||||
* support ie8,ie8+,chrome,firefox,safari
|
||||
|
||||
### Keyboard
|
||||
|
||||
|
||||
|
||||
## install
|
||||
|
||||
[](https://npmjs.org/package/rc-slider)
|
||||
|
||||
## Usage
|
||||
|
||||
```js
|
||||
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>step</td>
|
||||
<td>number</td>
|
||||
<td>1</td>
|
||||
<td>Value to be added or subtracted on each step the slider makes. Must be greater than zero. max - min should be evenly divisible by the step value.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>range</td>
|
||||
<td>boolean</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.</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>marks</td>
|
||||
<td>array</td>
|
||||
<td>[]</td>
|
||||
<td>Mark every step for the slider, it will ignore the `step` parameter if it has been defined. Does not work with `range`</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>defaultIndex</td>
|
||||
<td>number</td>
|
||||
<td>0</td>
|
||||
<td>For step or marks slider, determines the initial position of the handle. Does not work with `range`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>index</td>
|
||||
<td>number</td>
|
||||
<td></td>
|
||||
<td>For step or marks slider, determines current position of the handle. Does not work with `range`</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>disabled</td>
|
||||
<td>boolean</td>
|
||||
<td>false</td>
|
||||
<td>If true the 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>dots</td>
|
||||
<td>bool</td>
|
||||
<td>false</td>
|
||||
<td>For linear slider, when the `step` value is greater than 1, you can set the `dots` to `true` if you want to render the slider bar with dots.</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,243 +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;
|
||||
top: -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;
|
||||
}
|
||||
}
|
||||
|
||||
// slider tooltip style
|
||||
&-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 0;
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
}
|
||||
@@ -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
@@ -0,0 +1,332 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,80 @@
|
||||
webpackJsonp([0],[
|
||||
/* 0 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(1);
|
||||
|
||||
|
||||
/***/ },
|
||||
/* 1 */
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
'use strict';
|
||||
|
||||
__webpack_require__(2);
|
||||
|
||||
var React = __webpack_require__(3);
|
||||
var ReactDOM = __webpack_require__(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'));
|
||||
|
||||
/***/ }
|
||||
]);
|
||||
//# 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>
|
||||
@@ -0,0 +1,340 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,117 @@
|
||||
webpackJsonp([1],{
|
||||
|
||||
/***/ 0:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(323);
|
||||
|
||||
|
||||
/***/ },
|
||||
|
||||
/***/ 323:
|
||||
/***/ 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 = { 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":""}
|
||||
@@ -0,0 +1,408 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,212 @@
|
||||
webpackJsonp([2],{
|
||||
|
||||
/***/ 0:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(324);
|
||||
|
||||
|
||||
/***/ },
|
||||
|
||||
/***/ 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'));
|
||||
|
||||
/***/ }
|
||||
|
||||
});
|
||||
//# sourceMappingURL=range.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +0,0 @@
|
||||
placeholder
|
||||
@@ -1,43 +0,0 @@
|
||||
'use strict';
|
||||
|
||||
require('rc-slider/assets/index.less');
|
||||
|
||||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
var Slider = require('rc-slider');
|
||||
var style = {width:400,margin:50};
|
||||
|
||||
var log = console.log.bind(console);
|
||||
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<div style={style}>
|
||||
<p>基础滑块</p>
|
||||
<Slider onChange={log} tipTransitionName='rc-slider-tooltip-zoom-down' />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>基础滑块，step=20</p>
|
||||
<Slider step={20} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>基础滑块，step=20 带圆点</p>
|
||||
<Slider dots step={20} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>双滑块</p>
|
||||
<Slider range min={10} max={90} defaultValue={[0, 30]} onChange={log} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>双滑块，step=20 </p>
|
||||
<Slider range dots step={20} defaultValue={[0, 30]} onAfterChange={log} included={false} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>分段式滑块（包含关系）</p>
|
||||
<Slider marks={["状态1","状态2","状态3","状态4"]} defaultIndex={1} />
|
||||
</div>
|
||||
<div style={style}>
|
||||
<p>分段式滑块（并列关系）</p>
|
||||
<Slider marks={["状态1","状态2","状态3","状态4"]} included={false} defaultIndex={1} />
|
||||
</div>
|
||||
</div>
|
||||
, document.getElementById('__react-content'));
|
||||
@@ -0,0 +1,402 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,193 @@
|
||||
webpackJsonp([3],{
|
||||
|
||||
/***/ 0:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(325);
|
||||
|
||||
|
||||
/***/ },
|
||||
|
||||
/***/ 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'));
|
||||
|
||||
/***/ }
|
||||
|
||||
});
|
||||
//# sourceMappingURL=slider.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,342 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,121 @@
|
||||
webpackJsonp([4],{
|
||||
|
||||
/***/ 0:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(326);
|
||||
|
||||
|
||||
/***/ },
|
||||
|
||||
/***/ 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>
|
||||
@@ -0,0 +1,201 @@
|
||||
webpackJsonp([5],{
|
||||
|
||||
/***/ 0:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(327);
|
||||
|
||||
|
||||
/***/ },
|
||||
|
||||
/***/ 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'));
|
||||
|
||||
/***/ }
|
||||
|
||||
});
|
||||
//# sourceMappingURL=v-range.js.map
|
||||
File diff suppressed because one or more lines are too long
@@ -0,0 +1,395 @@
|
||||
<!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>
|
||||
@@ -0,0 +1,187 @@
|
||||
webpackJsonp([6],{
|
||||
|
||||
/***/ 0:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(328);
|
||||
|
||||
|
||||
/***/ },
|
||||
|
||||
/***/ 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'));
|
||||
|
||||
/***/ }
|
||||
|
||||
});
|
||||
//# 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,57 +0,0 @@
|
||||
{
|
||||
"name": "rc-slider",
|
||||
"version": "2.2.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",
|
||||
"config": {
|
||||
"port": 8005
|
||||
},
|
||||
"scripts": {
|
||||
"build": "rc-tools run build",
|
||||
"gh-pages": "rc-tools run gh-pages",
|
||||
"start": "rc-server",
|
||||
"pub": "rc-tools run pub",
|
||||
"lint": "rc-tools run lint",
|
||||
"karma": "rc-tools run karma",
|
||||
"saucelabs": "rc-tools run saucelabs",
|
||||
"browser-test": "rc-tools run browser-test",
|
||||
"browser-test-cover": "rc-tools run browser-test-cover"
|
||||
},
|
||||
"devDependencies": {
|
||||
"expect.js": "0.3.x",
|
||||
"jquery": "^1.11.2",
|
||||
"pre-commit": "1.x",
|
||||
"rc-server": "3.x",
|
||||
"rc-tools": "4.x",
|
||||
"react": "~0.14.0",
|
||||
"react-addons-test-utils": "^0.14.0",
|
||||
"react-dom": "~0.14.0"
|
||||
},
|
||||
"pre-commit": [
|
||||
"lint"
|
||||
],
|
||||
"dependencies": {
|
||||
"rc-tooltip": "3.x",
|
||||
"rc-util": "3.x"
|
||||
}
|
||||
}
|
||||
@@ -1,60 +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 props = this.props;
|
||||
const {className, tipTransitionName, offset, value} = props;
|
||||
const {dragging, noTip} = props;
|
||||
|
||||
const style = { 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={className.replace('handle', 'tooltip')}
|
||||
placement="top"
|
||||
visible={isTooltipVisible}
|
||||
overlay={<span>{value}</span>}
|
||||
delay={0}
|
||||
transitionName={tipTransitionName}>
|
||||
{handle}
|
||||
</Tooltip>);
|
||||
}
|
||||
}
|
||||
|
||||
Handle.propTypes = {
|
||||
className: React.PropTypes.string,
|
||||
offset: React.PropTypes.number,
|
||||
tipTransitionName: React.PropTypes.string,
|
||||
value: React.PropTypes.number,
|
||||
dragging: React.PropTypes.bool,
|
||||
noTip: React.PropTypes.bool,
|
||||
};
|
||||
@@ -1,35 +0,0 @@
|
||||
import React from 'react';
|
||||
import rcUtil from 'rc-util';
|
||||
|
||||
const Marks = ({className, marks, index, included}) => {
|
||||
const marksLen = marks.length;
|
||||
const unit = 100 / (marksLen - 1);
|
||||
const markWidth = unit / 2 + '%';
|
||||
|
||||
const elements = [];
|
||||
for (let i = 0; i < marksLen; i++) {
|
||||
const isActived = (included && i <= index) || (!included && i === index);
|
||||
const markClassName = rcUtil.classSet({
|
||||
[className + '-text']: true,
|
||||
[className + '-text-active']: isActived,
|
||||
});
|
||||
|
||||
const style = { width: markWidth };
|
||||
const offset = unit * i;
|
||||
if (i === marksLen - 1) {
|
||||
style.right = -unit / 4 + '%';
|
||||
} else {
|
||||
style.left = (i > 0 ? offset - unit / 4 : -unit / 4) + '%';
|
||||
}
|
||||
|
||||
elements.push(<span className={markClassName} style={style} key={i}>
|
||||
{marks[i]}
|
||||
</span>);
|
||||
}
|
||||
|
||||
return (<div className={className}>
|
||||
{elements}
|
||||
</div>);
|
||||
};
|
||||
|
||||
export default Marks;
|
||||
-419
@@ -1,419 +0,0 @@
|
||||
import React from 'react';
|
||||
import {Dom as DomUtils, classSet} from 'rc-util';
|
||||
import Track from './Track';
|
||||
import Handle 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(e) {
|
||||
return e.touches[0].pageX;
|
||||
}
|
||||
|
||||
function getMousePosition(e) {
|
||||
return e.pageX;
|
||||
}
|
||||
|
||||
function pauseEvent(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
class Slider extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
let upperBound;
|
||||
let lowerBound;
|
||||
if (props.range) {
|
||||
const value = (props.value || props.defaultValue || [0, 0]);
|
||||
upperBound = this.trimAlignValue(value[1]);
|
||||
lowerBound = this.trimAlignValue(value[0]);
|
||||
} else if (props.marks.length > 0) {
|
||||
upperBound = this.calcValueFromProps(props);
|
||||
} else {
|
||||
// Note: Maybe `value` is `0`.
|
||||
// So, check the existence of `value` with `in`.
|
||||
const defaultValue = ('defaultValue' in props ? props.defaultValue : 0);
|
||||
const value = ('value' in props ? props.value : defaultValue);
|
||||
upperBound = this.trimAlignValue(value);
|
||||
}
|
||||
|
||||
let recent;
|
||||
if (props.range && upperBound === lowerBound) {
|
||||
if (lowerBound === props.max) {
|
||||
recent = 'lowerBound';
|
||||
}
|
||||
if (upperBound === props.min) {
|
||||
recent = 'upperBound';
|
||||
}
|
||||
} else {
|
||||
recent = 'upperBound';
|
||||
}
|
||||
|
||||
this.state = {
|
||||
handle: null,
|
||||
recent: recent,
|
||||
upperBound: upperBound,
|
||||
// If Slider is not range, set `lowerBound` equal to `min`.
|
||||
lowerBound: (lowerBound || props.min),
|
||||
};
|
||||
}
|
||||
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.range) {
|
||||
const value = nextProps.value;
|
||||
if (value) {
|
||||
this.setState({
|
||||
upperBound: value[1],
|
||||
lowerBound: value[0],
|
||||
});
|
||||
}
|
||||
} else if ('value' in nextProps) {
|
||||
this.setState({
|
||||
upperBound: nextProps.value,
|
||||
});
|
||||
} else if ('index' in nextProps) {
|
||||
this.setState({
|
||||
upperBound: this.calcValueFromProps(nextProps),
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onMouseMove(e) {
|
||||
const position = getMousePosition(e);
|
||||
this.onMove(e, position);
|
||||
}
|
||||
|
||||
onTouchMove(e) {
|
||||
if (isNotTouchEvent(e)) {
|
||||
this.end('touch');
|
||||
return;
|
||||
}
|
||||
|
||||
const position = getTouchPosition(e);
|
||||
this.onMove(e, position);
|
||||
}
|
||||
|
||||
onMove(e, position) {
|
||||
pauseEvent(e);
|
||||
const props = this.props;
|
||||
const state = this.state;
|
||||
|
||||
const diffPosition = position - this.startPosition;
|
||||
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;
|
||||
|
||||
if (!('value' in props) && !('index' in props)) {
|
||||
this.setState({[state.handle]: value}, () => {
|
||||
this.triggerEvents('onChange', this.getValue());
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
onTouchStart(e) {
|
||||
if (isNotTouchEvent(e)) return;
|
||||
|
||||
const position = getTouchPosition(e);
|
||||
this.onStart(position);
|
||||
this.addDocumentEvents('touch');
|
||||
pauseEvent(e);
|
||||
}
|
||||
|
||||
onSliderMouseDown(e) {
|
||||
const position = getMousePosition(e);
|
||||
this.onStart(position);
|
||||
this.addDocumentEvents('mouse');
|
||||
pauseEvent(e);
|
||||
}
|
||||
|
||||
onStart(position) {
|
||||
this.triggerEvents('onBeforeChange');
|
||||
|
||||
const value = this.calcValueByPos(position);
|
||||
this.startValue = value;
|
||||
this.startPosition = position;
|
||||
|
||||
const state = this.state;
|
||||
const {upperBound, lowerBound} = state;
|
||||
|
||||
let valueNeedChanging = 'upperBound';
|
||||
if (this.props.range) {
|
||||
const isLowerBoundCloser = Math.abs(upperBound - value) > Math.abs(lowerBound - value);
|
||||
if (isLowerBoundCloser) {
|
||||
valueNeedChanging = 'lowerBound';
|
||||
}
|
||||
|
||||
const isAtTheSamePoint = (upperBound === lowerBound);
|
||||
if (isAtTheSamePoint) {
|
||||
valueNeedChanging = state.recent;
|
||||
}
|
||||
|
||||
if (isAtTheSamePoint && (value !== upperBound)) {
|
||||
valueNeedChanging = value < upperBound ? 'lowerBound' : 'upperBound';
|
||||
}
|
||||
}
|
||||
|
||||
this.setState({
|
||||
handle: valueNeedChanging,
|
||||
recent: valueNeedChanging,
|
||||
[valueNeedChanging]: value,
|
||||
}, () => {
|
||||
this.triggerEvents('onChange', this.getValue());
|
||||
});
|
||||
}
|
||||
|
||||
getValue() {
|
||||
const {lowerBound, upperBound} = this.state;
|
||||
return this.props.range ? [lowerBound, upperBound] : upperBound;
|
||||
}
|
||||
|
||||
getIndex(value) {
|
||||
const {marks, min, max, step} = this.props;
|
||||
|
||||
if (marks.length === 0) {
|
||||
return Math.floor((value - min) / step);
|
||||
}
|
||||
const unit = ((max - min) / (marks.length - 1)).toFixed(5);
|
||||
return Math.round(value / unit);
|
||||
}
|
||||
|
||||
getSliderLength() {
|
||||
const slider = this.refs.slider;
|
||||
if (!slider) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return slider.clientWidth;
|
||||
}
|
||||
|
||||
getSliderStart() {
|
||||
const slider = this.refs.slider;
|
||||
const rect = slider.getBoundingClientRect();
|
||||
|
||||
return rect.left;
|
||||
}
|
||||
|
||||
trimAlignValue(v) {
|
||||
const state = this.state || {};
|
||||
const props = this.props;
|
||||
const {marks, min, max} = props;
|
||||
const step = marks.length > 0 ? (max - min) / (marks.length - 1) : props.step;
|
||||
|
||||
let val = v;
|
||||
if (val <= min) {
|
||||
val = min;
|
||||
}
|
||||
if (val >= max) {
|
||||
val = max;
|
||||
}
|
||||
if (state.handle === 'upperBound' && val <= state.lowerBound) {
|
||||
val = state.lowerBound;
|
||||
}
|
||||
if (state.handle === 'lowerBound' && val >= state.upperBound) {
|
||||
val = state.upperBound;
|
||||
}
|
||||
|
||||
const valModStep = (val - min) % step;
|
||||
let alignValue = val - valModStep;
|
||||
|
||||
if (Math.abs(valModStep) * 2 >= step) {
|
||||
alignValue += (valModStep > 0) ? step : (-step);
|
||||
}
|
||||
|
||||
return parseFloat(alignValue.toFixed(5));
|
||||
}
|
||||
|
||||
calcOffset(value) {
|
||||
const {min, max} = this.props;
|
||||
const ratio = (value - min) / (max - min);
|
||||
return ratio * 100;
|
||||
}
|
||||
|
||||
calcValue(offset) {
|
||||
const {min, max} = this.props;
|
||||
const ratio = offset / this.getSliderLength();
|
||||
return ratio * (max - min) + min;
|
||||
}
|
||||
|
||||
calcValueByPos(position) {
|
||||
const pixelOffset = position - this.getSliderStart();
|
||||
const nextValue = this.trimAlignValue(this.calcValue(pixelOffset));
|
||||
return nextValue;
|
||||
}
|
||||
|
||||
calcValueFromProps(props) {
|
||||
const marksLen = props.marks.length;
|
||||
if (marksLen > 0) {
|
||||
const index = ('index' in props ? props.index : props.defaultIndex);
|
||||
const value = ((props.max - props.min) / (marksLen - 1)) * (index);
|
||||
// `'1' / 1 => 1`, to make sure that the returned value is a `Number`.
|
||||
return value.toFixed(5) / 1;
|
||||
}
|
||||
return ('value' in props ? props.value : props.defaultValue);
|
||||
}
|
||||
|
||||
triggerEvents(event, v) {
|
||||
const props = this.props;
|
||||
const hasMarks = (props.marks.length > 0);
|
||||
if (props[event]) {
|
||||
let data;
|
||||
if (hasMarks) {
|
||||
data = this.getIndex(v);
|
||||
} else if (v === undefined) {
|
||||
data = this.state.value;
|
||||
} else {
|
||||
data = v;
|
||||
}
|
||||
props[event](data);
|
||||
}
|
||||
}
|
||||
|
||||
addDocumentEvents(type) {
|
||||
if (type === 'touch') {
|
||||
// just work for chrome iOS Safari and Android Browser
|
||||
this.onTouchMoveListener = DomUtils.addEventListener(document, 'touchmove', this.onTouchMove.bind(this));
|
||||
this.onTouchUpListener = DomUtils.addEventListener(document, 'touchend', this.end.bind(this, 'touch'));
|
||||
} else if (type === 'mouse') {
|
||||
this.onMouseMoveListener = DomUtils.addEventListener(document, 'mousemove', this.onMouseMove.bind(this));
|
||||
this.onMouseUpListener = DomUtils.addEventListener(document, 'mouseup', this.end.bind(this, 'mouse'));
|
||||
}
|
||||
}
|
||||
|
||||
removeEventons(type) {
|
||||
if (type === 'touch') {
|
||||
this.onTouchMoveListener.remove();
|
||||
this.onTouchUpListener.remove();
|
||||
} else if (type === 'mouse') {
|
||||
this.onMouseMoveListener.remove();
|
||||
this.onMouseUpListener.remove();
|
||||
}
|
||||
}
|
||||
|
||||
end(type) {
|
||||
this.removeEventons(type);
|
||||
this.triggerEvents('onAfterChange', this.getValue());
|
||||
this.setState({handle: null});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {handle, upperBound, lowerBound} = this.state;
|
||||
const props = this.props;
|
||||
const {className, prefixCls, disabled, included, isIncluded, dots, range} = props;
|
||||
const {marks, step, max, min, tipTransitionName, children} = props;
|
||||
const marksLen = marks.length;
|
||||
|
||||
const sliderClassName = classSet({
|
||||
[prefixCls]: true,
|
||||
[prefixCls + '-disabled']: disabled,
|
||||
[className]: !!className,
|
||||
});
|
||||
|
||||
const upperOffset = this.calcOffset(upperBound);
|
||||
const lowerOffset = this.calcOffset(lowerBound);
|
||||
|
||||
let track = null;
|
||||
if ((included && isIncluded) || range) {
|
||||
const trackClassName = prefixCls + '-track';
|
||||
track = <Track className={trackClassName} offset={lowerOffset} length={upperOffset - lowerOffset}/>;
|
||||
}
|
||||
|
||||
const handleClassName = prefixCls + '-handle';
|
||||
const isNoTip = marksLen > 0;
|
||||
const upper = (<Handle className={handleClassName} tipTransitionName={tipTransitionName} noTip={isNoTip}
|
||||
offset={upperOffset} value={upperBound} dragging={handle === 'upperBound'}/>);
|
||||
|
||||
let lower = null;
|
||||
if (range) {
|
||||
lower = (<Handle className={handleClassName} tipTransitionName={tipTransitionName} noTip={isNoTip}
|
||||
offset={lowerOffset} value={lowerBound} dragging={handle === 'lowerBound'}/>);
|
||||
}
|
||||
|
||||
const upperIndex = this.getIndex(upperBound);
|
||||
|
||||
let steps = null;
|
||||
if (marksLen > 0 || (step > 1 && dots)) {
|
||||
const stepsClassName = prefixCls + '-step';
|
||||
const stepNum = marksLen > 0 ? marksLen : Math.floor((max - min) / step) + 1;
|
||||
steps = (<Steps className={stepsClassName} stepNum={stepNum}
|
||||
lowerIndex={this.getIndex(lowerBound)} upperIndex={upperIndex}
|
||||
included={(included && isIncluded) || range}/>);
|
||||
}
|
||||
|
||||
let mark = null;
|
||||
if (marksLen > 0) {
|
||||
const markClassName = prefixCls + '-mark';
|
||||
mark = (<Marks className={markClassName} marks={marks}
|
||||
index={upperIndex} included={(included && isIncluded)}/>);
|
||||
}
|
||||
|
||||
return (
|
||||
<div ref="slider" className={sliderClassName}
|
||||
onTouchStart={disabled ? noop : this.onTouchStart.bind(this)}
|
||||
onMouseDown={disabled ? noop : this.onSliderMouseDown.bind(this)}>
|
||||
{track}
|
||||
{upper}
|
||||
{lower}
|
||||
{steps}
|
||||
{mark}
|
||||
{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),
|
||||
]),
|
||||
defaultIndex: React.PropTypes.number,
|
||||
value: React.PropTypes.oneOfType([
|
||||
React.PropTypes.number,
|
||||
React.PropTypes.arrayOf(React.PropTypes.number),
|
||||
]),
|
||||
index: React.PropTypes.number,
|
||||
marks: React.PropTypes.array,
|
||||
isIncluded: React.PropTypes.bool, // @Deprecated
|
||||
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,
|
||||
tipTransitionName: React.PropTypes.string,
|
||||
dots: React.PropTypes.bool,
|
||||
range: React.PropTypes.bool,
|
||||
};
|
||||
|
||||
Slider.defaultProps = {
|
||||
min: 0,
|
||||
max: 100,
|
||||
step: 1,
|
||||
defaultIndex: 0,
|
||||
marks: [],
|
||||
isIncluded: true, // @Deprecated
|
||||
included: true,
|
||||
className: '',
|
||||
prefixCls: 'rc-slider',
|
||||
disabled: false,
|
||||
tipTransitionName: '',
|
||||
dots: false,
|
||||
range: false,
|
||||
};
|
||||
|
||||
export default Slider;
|
||||
@@ -1,28 +0,0 @@
|
||||
import React from 'react';
|
||||
import rcUtil from 'rc-util';
|
||||
|
||||
const Steps = ({className, stepNum, included, lowerIndex, upperIndex}) => {
|
||||
const dotClassName = className.replace('step', 'dot');
|
||||
const unit = 100 / (stepNum - 1);
|
||||
|
||||
const elements = [];
|
||||
for (let i = 0; i < stepNum; i++) {
|
||||
const offset = unit * i + '%';
|
||||
const style = { left: offset };
|
||||
|
||||
const isActived = (included && i <= upperIndex && i >= lowerIndex ) ||
|
||||
(!included && i === upperIndex);
|
||||
const stepClassName = rcUtil.classSet({
|
||||
[dotClassName]: true,
|
||||
[dotClassName + '-active']: isActived,
|
||||
});
|
||||
|
||||
elements.push(<span className={stepClassName} style={style} key={i} />);
|
||||
}
|
||||
|
||||
return (<div className={className}>
|
||||
{elements}
|
||||
</div>);
|
||||
};
|
||||
|
||||
export default Steps;
|
||||
@@ -1,11 +0,0 @@
|
||||
import React from 'react';
|
||||
|
||||
const Track = ({className, offset, length}) => {
|
||||
const style = {
|
||||
left: offset + '%',
|
||||
width: length + '%',
|
||||
};
|
||||
return <div className={className} style={style} />;
|
||||
};
|
||||
|
||||
export default Track;
|
||||
@@ -1,2 +0,0 @@
|
||||
|
||||
module.exports = require('./Slider');
|
||||
@@ -1,83 +0,0 @@
|
||||
|
||||
var expect = require('expect.js');
|
||||
var Slider = require('../index.js');
|
||||
var React = require('react');
|
||||
var ReactDOM = require('react-dom');
|
||||
var TestUtils = require('react-addons-test-utils');
|
||||
var Simulate = TestUtils.Simulate;
|
||||
var $ = require('jquery');
|
||||
require('../assets/index.less');
|
||||
|
||||
describe('rc-slider', function () {
|
||||
this.timeout(5000);
|
||||
var div = document.createElement('div');
|
||||
document.body.appendChild(div);
|
||||
|
||||
afterEach(function () {
|
||||
React.unmountComponentAtNode(div);
|
||||
});
|
||||
|
||||
it('should render a simple slider with value correctly!', function () {
|
||||
var slider = ReactDOM.render(
|
||||
<Slider className='rc-slider' defaultValue={40}/>,
|
||||
div
|
||||
);
|
||||
var node = $(div);
|
||||
expect(node.find('.rc-slider').length).to.be(1);
|
||||
expect(node.find('.rc-slider-handle').length).to.be(1);
|
||||
expect(node.find('.rc-slider-track').length).to.be(1);
|
||||
expect(slider.state.upperBound).to.be(40);
|
||||
var trackWidth = node.find('.rc-slider-track')[0].style.width;
|
||||
expect(trackWidth).to.eql(node.find('.rc-slider-handle')[0].style.left);
|
||||
});
|
||||
|
||||
it('should render a slider with correct numbers of step!', function () {
|
||||
var slider = ReactDOM.render(
|
||||
<Slider className='rc-slider' step={20}/>,
|
||||
div
|
||||
);
|
||||
var node = $(div);
|
||||
expect(node.find('.rc-slider').length).to.be(1);
|
||||
expect(node.find('.rc-slider-handle').length).to.be(1);
|
||||
expect(node.find('.rc-slider-track').length).to.be(1);
|
||||
expect(slider.state.upperBound).to.be(0);
|
||||
|
||||
var sliderWithDots = ReactDOM.render(
|
||||
<Slider className='rc-slider' step={20} dots/>,
|
||||
div
|
||||
);
|
||||
var node1 = $(div);
|
||||
expect(node1.find('.rc-slider-dot').length).to.be(6);
|
||||
});
|
||||
|
||||
it('should render a slider with marks correctly!', function () {
|
||||
var slider = ReactDOM.render(
|
||||
<Slider marks={["一","二","三","四","五"]} defaultIndex={3} />,
|
||||
div
|
||||
);
|
||||
var node = $(div);
|
||||
expect(node.find('.rc-slider').length).to.be(1);
|
||||
expect(node.find('.rc-slider-handle').length).to.be(1);
|
||||
expect(node.find('.rc-slider-track').length).to.be(1);
|
||||
expect(node.find('.rc-slider-dot').length).to.be(slider.props.marks.length);
|
||||
expect(node.find('.rc-slider-mark').length).to.be(1);
|
||||
expect(node.find('.rc-slider-mark-text').length).to.be(slider.props.marks.length);
|
||||
expect(slider.getIndex(slider.state.upperBound)).to.be(3);
|
||||
});
|
||||
|
||||
// it('should mouseDown works!', function (done) {
|
||||
// var slider = ReactDOM.render(
|
||||
// <Slider marks={["一","二","三","四","五"]} />,
|
||||
// div
|
||||
// );
|
||||
// var selectedStep = slider.refs.step3.getDOMNode();
|
||||
|
||||
// Simulate.mouseDown(selectedStep);
|
||||
|
||||
// setTimeout( function() {
|
||||
// expect(slider.state.active).to.be('active');
|
||||
// done();
|
||||
// }, 200);
|
||||
// });
|
||||
|
||||
});
|
||||
@@ -1 +0,0 @@
|
||||
stub
|
||||
Reference in New Issue
Block a user