mirror of
https://github.com/wassname/slider.git
synced 2026-09-09 11:35:22 +08:00
Updates
This commit is contained in:
Benjy Cui
+33
-1
@@ -66,7 +66,7 @@
|
||||
}
|
||||
.rc-slider-dot {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
bottom: -2px;
|
||||
margin-left: -4px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
@@ -101,6 +101,38 @@
|
||||
.rc-slider-disabled .rc-slider-dot {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
.rc-slider-vertical {
|
||||
width: 4px;
|
||||
height: 100%;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-track {
|
||||
bottom: 0;
|
||||
width: 4px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-handle {
|
||||
position: absolute;
|
||||
margin-left: -5px;
|
||||
margin-bottom: -7px;
|
||||
}
|
||||
.rc-slider-vertical .rc-slider-mark {
|
||||
top: 0;
|
||||
left: 10px;
|
||||
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;
|
||||
|
||||
File diff suppressed because one or more lines are too long
+64
-42
@@ -30,7 +30,7 @@
|
||||
/******/ // "0" means "already loaded"
|
||||
/******/ // Array means "loading", array contains callbacks
|
||||
/******/ var installedChunks = {
|
||||
/******/ 3:0
|
||||
/******/ 6:0
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // The require function
|
||||
@@ -76,7 +76,7 @@
|
||||
/******/ script.charset = 'utf-8';
|
||||
/******/ script.async = true;
|
||||
/******/
|
||||
/******/ script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"marks","1":"range","2":"slider"}[chunkId]||chunkId) + ".js";
|
||||
/******/ script.src = __webpack_require__.p + "" + chunkId + "." + ({"0":"marks","1":"range","2":"slider","3":"v-marks","4":"v-range","5":"v-slider"}[chunkId]||chunkId) + ".js";
|
||||
/******/ head.appendChild(script);
|
||||
/******/ }
|
||||
/******/ };
|
||||
@@ -19726,6 +19726,8 @@
|
||||
value: true
|
||||
});
|
||||
|
||||
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
||||
|
||||
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
|
||||
|
||||
var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
|
||||
@@ -19748,10 +19750,6 @@
|
||||
|
||||
var _classnames2 = _interopRequireDefault(_classnames);
|
||||
|
||||
var _objectAssign2 = __webpack_require__(182);
|
||||
|
||||
var _objectAssign3 = _interopRequireDefault(_objectAssign2);
|
||||
|
||||
var _Track = __webpack_require__(186);
|
||||
|
||||
var _Track2 = _interopRequireDefault(_Track);
|
||||
@@ -19774,12 +19772,12 @@
|
||||
return e.touches.length > 1 || e.type.toLowerCase() === 'touchend' && e.touches.length > 0;
|
||||
}
|
||||
|
||||
function getTouchPosition(e) {
|
||||
return e.touches[0].pageX;
|
||||
function getTouchPosition(vertical, e) {
|
||||
return vertical ? e.touches[0].clientY : e.touches[0].pageX;
|
||||
}
|
||||
|
||||
function getMousePosition(e) {
|
||||
return e.pageX;
|
||||
function getMousePosition(vertical, e) {
|
||||
return vertical ? e.clientY : e.pageX;
|
||||
}
|
||||
|
||||
function pauseEvent(e) {
|
||||
@@ -19880,14 +19878,14 @@
|
||||
this.setState({ handle: state.handle });
|
||||
}
|
||||
|
||||
var data = (0, _objectAssign3['default'])({}, this.state, state);
|
||||
var data = _extends({}, this.state, state);
|
||||
var changedValue = props.range ? [data.lowerBound, data.upperBound] : data.upperBound;
|
||||
props.onChange(changedValue);
|
||||
}
|
||||
}, {
|
||||
key: 'onMouseMove',
|
||||
value: function onMouseMove(e) {
|
||||
var position = getMousePosition(e);
|
||||
var position = getMousePosition(this.props.vertical, e);
|
||||
this.onMove(e, position);
|
||||
}
|
||||
}, {
|
||||
@@ -19898,7 +19896,7 @@
|
||||
return;
|
||||
}
|
||||
|
||||
var position = getTouchPosition(e);
|
||||
var position = getTouchPosition(this.props.vertical, e);
|
||||
this.onMove(e, position);
|
||||
}
|
||||
}, {
|
||||
@@ -19909,6 +19907,7 @@
|
||||
var state = this.state;
|
||||
|
||||
var diffPosition = position - this.startPosition;
|
||||
diffPosition = this.props.vertical ? -diffPosition : diffPosition;
|
||||
var diffValue = diffPosition / this.getSliderLength() * (props.max - props.min);
|
||||
|
||||
var value = this.trimAlignValue(this.startValue + diffValue);
|
||||
@@ -19939,7 +19938,7 @@
|
||||
value: function onTouchStart(e) {
|
||||
if (isNotTouchEvent(e)) return;
|
||||
|
||||
var position = getTouchPosition(e);
|
||||
var position = getTouchPosition(this.props.vertical, e);
|
||||
this.onStart(position);
|
||||
this.addDocumentEvents('touch');
|
||||
pauseEvent(e);
|
||||
@@ -19947,7 +19946,7 @@
|
||||
}, {
|
||||
key: 'onMouseDown',
|
||||
value: function onMouseDown(e) {
|
||||
var position = getMousePosition(e);
|
||||
var position = getMousePosition(this.props.vertical, e);
|
||||
this.onStart(position);
|
||||
this.addDocumentEvents('mouse');
|
||||
pauseEvent(e);
|
||||
@@ -20010,7 +20009,7 @@
|
||||
return 0;
|
||||
}
|
||||
|
||||
return slider.clientWidth;
|
||||
return this.props.vertical ? slider.clientHeight : slider.clientWidth;
|
||||
}
|
||||
}, {
|
||||
key: 'getSliderStart',
|
||||
@@ -20018,7 +20017,7 @@
|
||||
var slider = this.refs.slider;
|
||||
var rect = slider.getBoundingClientRect();
|
||||
|
||||
return rect.left;
|
||||
return this.props.vertical ? rect.top : rect.left;
|
||||
}
|
||||
}, {
|
||||
key: 'getPrecision',
|
||||
@@ -20044,13 +20043,13 @@
|
||||
var lowerBound = state.lowerBound;
|
||||
var upperBound = state.upperBound;
|
||||
|
||||
var _objectAssign = (0, _objectAssign3['default'])({}, this.props, nextProps || {});
|
||||
var _extends2 = _extends({}, this.props, nextProps || {});
|
||||
|
||||
var marks = _objectAssign.marks;
|
||||
var step = _objectAssign.step;
|
||||
var min = _objectAssign.min;
|
||||
var max = _objectAssign.max;
|
||||
var allowCross = _objectAssign.allowCross;
|
||||
var marks = _extends2.marks;
|
||||
var step = _extends2.step;
|
||||
var min = _extends2.min;
|
||||
var max = _extends2.max;
|
||||
var allowCross = _extends2.allowCross;
|
||||
|
||||
var val = v;
|
||||
if (val <= min) {
|
||||
@@ -20093,11 +20092,13 @@
|
||||
key: 'calcValue',
|
||||
value: function calcValue(offset) {
|
||||
var _props2 = this.props;
|
||||
var vertical = _props2.vertical;
|
||||
var min = _props2.min;
|
||||
var max = _props2.max;
|
||||
|
||||
var ratio = offset / this.getSliderLength();
|
||||
return ratio * (max - min) + min;
|
||||
var ratio = Math.abs(offset / this.getSliderLength());
|
||||
var value = vertical ? (1 - ratio) * (max - min) + min : ratio * (max - min) + min;
|
||||
return value;
|
||||
}
|
||||
}, {
|
||||
key: 'calcValueByPos',
|
||||
@@ -20149,6 +20150,7 @@
|
||||
var className = _props3.className;
|
||||
var prefixCls = _props3.prefixCls;
|
||||
var disabled = _props3.disabled;
|
||||
var vertical = _props3.vertical;
|
||||
var dots = _props3.dots;
|
||||
var included = _props3.included;
|
||||
var range = _props3.range;
|
||||
@@ -20168,16 +20170,16 @@
|
||||
|
||||
var upper = _react2['default'].createElement(_Handle2['default'], { className: handleClassName,
|
||||
noTip: isNoTip, tipTransitionName: tipTransitionName, tipFormatter: tipFormatter,
|
||||
offset: upperOffset, value: upperBound, dragging: handle === 'upperBound' });
|
||||
vertical: vertical, offset: upperOffset, value: upperBound, dragging: handle === 'upperBound' });
|
||||
|
||||
var lower = null;
|
||||
if (range) {
|
||||
lower = _react2['default'].createElement(_Handle2['default'], { className: handleClassName,
|
||||
noTip: isNoTip, tipTransitionName: tipTransitionName, tipFormatter: tipFormatter,
|
||||
offset: lowerOffset, value: lowerBound, dragging: handle === 'lowerBound' });
|
||||
vertical: vertical, offset: lowerOffset, value: lowerBound, dragging: handle === 'lowerBound' });
|
||||
}
|
||||
|
||||
var sliderClassName = (0, _classnames2['default'])((_classNames = {}, _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, prefixCls + '-disabled', disabled), _defineProperty(_classNames, className, !!className), _classNames));
|
||||
var sliderClassName = (0, _classnames2['default'])((_classNames = {}, _defineProperty(_classNames, prefixCls, true), _defineProperty(_classNames, prefixCls + '-disabled', disabled), _defineProperty(_classNames, className, !!className), _defineProperty(_classNames, prefixCls + '-vertical', this.props.vertical), _classNames));
|
||||
var isIncluded = included || range;
|
||||
return _react2['default'].createElement(
|
||||
'div',
|
||||
@@ -20186,12 +20188,12 @@
|
||||
onMouseDown: disabled ? noop : this.onMouseDown.bind(this) },
|
||||
upper,
|
||||
lower,
|
||||
_react2['default'].createElement(_Track2['default'], { className: prefixCls + '-track', included: isIncluded,
|
||||
_react2['default'].createElement(_Track2['default'], { className: prefixCls + '-track', vertical: vertical, included: isIncluded,
|
||||
offset: lowerOffset, length: upperOffset - lowerOffset }),
|
||||
_react2['default'].createElement(_Steps2['default'], { prefixCls: prefixCls, marks: marks, dots: dots, step: step,
|
||||
_react2['default'].createElement(_Steps2['default'], { prefixCls: prefixCls, vertical: vertical, marks: marks, dots: dots, step: step,
|
||||
included: isIncluded, lowerBound: lowerBound,
|
||||
upperBound: upperBound, max: max, min: min }),
|
||||
_react2['default'].createElement(_Marks2['default'], { className: prefixCls + '-mark', marks: marks,
|
||||
_react2['default'].createElement(_Marks2['default'], { className: prefixCls + '-mark', vertical: vertical, marks: marks,
|
||||
included: isIncluded, lowerBound: lowerBound,
|
||||
upperBound: upperBound, max: max, min: min }),
|
||||
children
|
||||
@@ -20221,6 +20223,7 @@
|
||||
tipFormatter: _react2['default'].PropTypes.func,
|
||||
dots: _react2['default'].PropTypes.bool,
|
||||
range: _react2['default'].PropTypes.bool,
|
||||
vertical: _react2['default'].PropTypes.bool,
|
||||
allowCross: _react2['default'].PropTypes.bool
|
||||
};
|
||||
|
||||
@@ -20242,6 +20245,7 @@
|
||||
disabled: false,
|
||||
dots: false,
|
||||
range: false,
|
||||
vertical: false,
|
||||
allowCross: true
|
||||
};
|
||||
|
||||
@@ -22437,14 +22441,20 @@
|
||||
var Track = function Track(_ref) {
|
||||
var className = _ref.className;
|
||||
var included = _ref.included;
|
||||
var vertical = _ref.vertical;
|
||||
var offset = _ref.offset;
|
||||
var length = _ref.length;
|
||||
|
||||
var style = {
|
||||
left: offset + '%',
|
||||
width: length + '%',
|
||||
visibility: included ? 'visible' : 'hidden'
|
||||
};
|
||||
if (vertical) {
|
||||
style.bottom = offset + '%';
|
||||
style.height = length + '%';
|
||||
} else {
|
||||
style.left = offset + '%';
|
||||
style.width = length + '%';
|
||||
}
|
||||
return _react2['default'].createElement('div', { className: className, style: style });
|
||||
};
|
||||
|
||||
@@ -22513,12 +22523,13 @@
|
||||
var className = props.className;
|
||||
var tipTransitionName = props.tipTransitionName;
|
||||
var tipFormatter = props.tipFormatter;
|
||||
var vertical = props.vertical;
|
||||
var offset = props.offset;
|
||||
var value = props.value;
|
||||
var dragging = props.dragging;
|
||||
var noTip = props.noTip;
|
||||
|
||||
var style = { left: offset + '%' };
|
||||
var style = vertical ? { bottom: offset + '%' } : { left: offset + '%' };
|
||||
var handle = _react2['default'].createElement('div', { className: className, style: style,
|
||||
onMouseUp: this.showTooltip.bind(this),
|
||||
onMouseEnter: this.showTooltip.bind(this),
|
||||
@@ -22554,6 +22565,7 @@
|
||||
|
||||
Handle.propTypes = {
|
||||
className: _react2['default'].PropTypes.string,
|
||||
vertical: _react2['default'].PropTypes.bool,
|
||||
offset: _react2['default'].PropTypes.number,
|
||||
tipTransitionName: _react2['default'].PropTypes.string,
|
||||
tipFormatter: _react2['default'].PropTypes.func,
|
||||
@@ -25637,7 +25649,7 @@
|
||||
|
||||
var _classnames2 = _interopRequireDefault(_classnames);
|
||||
|
||||
function calcPoints(marks, dots, step, min, max) {
|
||||
function calcPoints(vertical, marks, dots, step, min, max) {
|
||||
var points = Object.keys(marks).map(parseFloat);
|
||||
if (dots) {
|
||||
for (var i = min; i <= max; i = i + step) {
|
||||
@@ -25650,6 +25662,7 @@
|
||||
|
||||
var Steps = function Steps(_ref) {
|
||||
var prefixCls = _ref.prefixCls;
|
||||
var vertical = _ref.vertical;
|
||||
var marks = _ref.marks;
|
||||
var dots = _ref.dots;
|
||||
var step = _ref.step;
|
||||
@@ -25660,11 +25673,11 @@
|
||||
var min = _ref.min;
|
||||
|
||||
var range = max - min;
|
||||
var elements = calcPoints(marks, dots, step, min, max).map(function (point) {
|
||||
var elements = calcPoints(vertical, marks, dots, step, min, max).map(function (point) {
|
||||
var _classNames;
|
||||
|
||||
var offset = (point - min) / range * 100 + '%';
|
||||
var style = { left: offset };
|
||||
var offset = Math.abs(point - min) / range * 100 + '%';
|
||||
var style = vertical ? { bottom: offset } : { left: offset };
|
||||
|
||||
var isActived = !included && point === upperBound || included && point <= upperBound && point >= lowerBound;
|
||||
var pointClassName = (0, _classnames2['default'])((_classNames = {}, _defineProperty(_classNames, prefixCls + '-dot', true), _defineProperty(_classNames, prefixCls + '-dot-active', isActived), _classNames));
|
||||
@@ -25708,6 +25721,7 @@
|
||||
|
||||
var Marks = function Marks(_ref) {
|
||||
var className = _ref.className;
|
||||
var vertical = _ref.vertical;
|
||||
var marks = _ref.marks;
|
||||
var included = _ref.included;
|
||||
var upperBound = _ref.upperBound;
|
||||
@@ -25729,11 +25743,19 @@
|
||||
var isActived = !included && point === upperBound || included && point <= upperBound && point >= lowerBound;
|
||||
var markClassName = (0, _classnames2['default'])((_classNames = {}, _defineProperty(_classNames, className + '-text', true), _defineProperty(_classNames, className + '-text-active', isActived), _classNames));
|
||||
|
||||
var style = {
|
||||
width: markWidth + '%',
|
||||
marginLeft: -markWidth / 2 + '%'
|
||||
var bottomStyle = {
|
||||
// height: markWidth + '%',
|
||||
marginBottom: '-200' + '%',
|
||||
bottom: (point - min) / range * 100 + '%'
|
||||
};
|
||||
style.left = (point - min) / range * 100 + '%';
|
||||
|
||||
var leftStyle = {
|
||||
width: markWidth + '%',
|
||||
marginLeft: -markWidth / 2 + '%',
|
||||
left: (point - min) / range * 100 + '%'
|
||||
};
|
||||
|
||||
var style = vertical ? bottomStyle : leftStyle;
|
||||
|
||||
var markPoint = marks[point];
|
||||
var markPointIsObject = typeof markPoint === 'object' && !_react2['default'].isValidElement(markPoint);
|
||||
|
||||
File diff suppressed because one or more lines are too long
+2
-2
@@ -2,7 +2,7 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>marks.js - example - rc-slider@3.5.1</title>
|
||||
<title>marks.js - example - rc-slider@3.6.0</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta charset="utf-8"/>
|
||||
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>rc-slider@3.5.1</h1>
|
||||
<h1>rc-slider@3.6.0</h1>
|
||||
|
||||
<p>slider ui component for react</p>
|
||||
</div>
|
||||
|
||||
+50
-26
@@ -2,7 +2,7 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>range.js - example - rc-slider@3.5.1</title>
|
||||
<title>range.js - example - rc-slider@3.6.0</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta charset="utf-8"/>
|
||||
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>rc-slider@3.5.1</h1>
|
||||
<h1>rc-slider@3.6.0</h1>
|
||||
|
||||
<p>slider ui component for react</p>
|
||||
</div>
|
||||
@@ -280,43 +280,67 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
|
||||
<span class="hljs-keyword">const</span> CustomizedRange = React.createClass({
|
||||
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">return</span> {
|
||||
lowerBound: <span class="hljs-number">20</span>,
|
||||
upperBound: <span class="hljs-number">40</span>,
|
||||
value: [<span class="hljs-number">20</span>, <span class="hljs-number">40</span>],
|
||||
};
|
||||
},
|
||||
onLowerBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
<span class="hljs-keyword">this</span>.setState({ lowerBound: +e.target.value });
|
||||
},
|
||||
onUpperBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
<span class="hljs-keyword">this</span>.setState({ upperBound: +e.target.value });
|
||||
},
|
||||
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
|
||||
log(value);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
value: value,
|
||||
});
|
||||
},
|
||||
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /></span>;</span>
|
||||
},
|
||||
});
|
||||
|
||||
<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
|
||||
getInitialState() {
|
||||
<span class="hljs-keyword">return</span> {
|
||||
min: <span class="hljs-number">0</span>,
|
||||
max: <span class="hljs-number">100</span>,
|
||||
};
|
||||
},
|
||||
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
|
||||
log(value);
|
||||
},
|
||||
onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
min: +e.target.value || <span class="hljs-number">0</span>,
|
||||
});
|
||||
},
|
||||
onMaxChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
max: +e.target.value || <span class="hljs-number">100</span>,
|
||||
});
|
||||
handleApply: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">const</span> { lowerBound, upperBound } = <span class="hljs-keyword">this</span>.state;
|
||||
<span class="hljs-keyword">this</span>.setState({ value: [lowerBound, upperBound]});
|
||||
},
|
||||
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<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>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const DynamicBounds = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
min: 0,
|
||||
max: 100,
|
||||
};
|
||||
},
|
||||
onSliderChange: function(value) {
|
||||
log(value);
|
||||
},
|
||||
onMinChange: function(e) {
|
||||
this.setState({
|
||||
min: +e.target.value || 0,
|
||||
});
|
||||
},
|
||||
onMaxChange: function(e) {
|
||||
this.setState({
|
||||
max: +e.target.value || 100,
|
||||
});
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<span class="hljs-tag"><<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>
|
||||
|
||||
+41
-1
@@ -31,17 +31,57 @@ webpackJsonp([1],{
|
||||
|
||||
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;
|
||||
var lowerBound = _state.lowerBound;
|
||||
var upperBound = _state.upperBound;
|
||||
|
||||
this.setState({ value: [lowerBound, upperBound] });
|
||||
},
|
||||
render: function render() {
|
||||
return React.createElement(Slider, { range: true, value: this.state.value, onChange: this.onSliderChange });
|
||||
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 })
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -2,7 +2,7 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>slider.js - example - rc-slider@3.5.1</title>
|
||||
<title>slider.js - example - rc-slider@3.6.0</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta charset="utf-8"/>
|
||||
@@ -257,7 +257,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>rc-slider@3.5.1</h1>
|
||||
<h1>rc-slider@3.6.0</h1>
|
||||
|
||||
<p>slider ui component for react</p>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,332 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>v-marks.js - example - rc-slider@3.6.0</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
|
||||
<style>
|
||||
.highlight pre {
|
||||
padding: .8em 1em;
|
||||
font: 14px/20px Consolas, Monaco, 'Andale Mono', monospace;
|
||||
border: 1px solid #e5e8ec;
|
||||
border-radius: 3px;
|
||||
background-color: #21221d;
|
||||
background-image: -webkit-linear-gradient(#21221d 50%, #272822 50%);
|
||||
background-image: -moz-linear-gradient(#21221d 50%, #272822 50%);
|
||||
background-image: -ms-linear-gradient(#21221d 50%, #272822 50%);
|
||||
background-image: -o-linear-gradient(#21221d 50%, #272822 50%);
|
||||
background-image: linear-gradient(#21221d 50%, #272822 50%);
|
||||
background-size: 40px 40px;
|
||||
background-origin: content-box;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.highlight pre > code {
|
||||
font-family: inherit;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
vertical-align: 2px;
|
||||
display: block;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
color: #E5E5C2;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
/*
|
||||
|
||||
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #23241f;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
.hljs,
|
||||
.hljs-tag,
|
||||
.css .hljs-rule,
|
||||
.css .hljs-value,
|
||||
.aspectj .hljs-function,
|
||||
.css .hljs-function
|
||||
.hljs-preprocessor,
|
||||
.hljs-pragma {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.hljs-strongemphasis,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis {
|
||||
color: #a8a8a2;
|
||||
}
|
||||
|
||||
.hljs-bullet,
|
||||
.hljs-blockquote,
|
||||
.hljs-horizontal_rule,
|
||||
.hljs-number,
|
||||
.hljs-regexp,
|
||||
.alias .hljs-keyword,
|
||||
.hljs-literal,
|
||||
.hljs-hexcolor {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
.hljs-code,
|
||||
.hljs-title,
|
||||
.css .hljs-class,
|
||||
.hljs-class .hljs-title:last-child {
|
||||
color: #a6e22e;
|
||||
/*color: #e6db74;*/
|
||||
}
|
||||
|
||||
.hljs-link_url {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.hljs-strong,
|
||||
.hljs-strongemphasis {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-emphasis,
|
||||
.hljs-strongemphasis,
|
||||
.hljs-class .hljs-title:last-child,
|
||||
.hljs-typename {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.ruby .hljs-class .hljs-keyword:first-child,
|
||||
.ruby .hljs-function .hljs-keyword,
|
||||
.hljs-function,
|
||||
.hljs-change,
|
||||
.hljs-winutils,
|
||||
.hljs-flow,
|
||||
.nginx .hljs-title,
|
||||
.tex .hljs-special,
|
||||
.hljs-header,
|
||||
.hljs-symbol,
|
||||
.hljs-symbol .hljs-string,
|
||||
.hljs-tag .hljs-title,
|
||||
.hljs-value,
|
||||
.alias .hljs-keyword:first-child,
|
||||
.css .hljs-tag,
|
||||
.css .unit,
|
||||
.css .hljs-important {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
.hljs-function .hljs-keyword,
|
||||
.hljs-class .hljs-keyword:first-child,
|
||||
.hljs-aspect .hljs-keyword:first-child,
|
||||
.hljs-constant,
|
||||
.hljs-typename,
|
||||
.hljs-name,
|
||||
.css .hljs-attribute {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
.hljs-variable,
|
||||
.hljs-params,
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-aspect .hljs-title {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.hljs-tag .hljs-value,
|
||||
.hljs-string,
|
||||
.css .hljs-id,
|
||||
.hljs-subst,
|
||||
.hljs-type,
|
||||
.ruby .hljs-class .hljs-parent,
|
||||
.django .hljs-template_tag,
|
||||
.django .hljs-variable,
|
||||
.smalltalk .hljs-class,
|
||||
.django .hljs-filter .hljs-argument,
|
||||
.smalltalk .hljs-localvars,
|
||||
.smalltalk .hljs-array,
|
||||
.hljs-attr_selector,
|
||||
.hljs-pseudo,
|
||||
.hljs-addition,
|
||||
.hljs-stream,
|
||||
.hljs-envvar,
|
||||
.apache .hljs-tag,
|
||||
.apache .hljs-cbracket,
|
||||
.tex .hljs-command,
|
||||
.hljs-prompt,
|
||||
.hljs-link_label,
|
||||
.hljs-link_url {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-annotation,
|
||||
.hljs-decorator,
|
||||
.hljs-pi,
|
||||
.hljs-doctype,
|
||||
.hljs-deletion,
|
||||
.hljs-shebang,
|
||||
.apache .hljs-sqbracket,
|
||||
.tex .hljs-formula {
|
||||
color: #75715e;
|
||||
}
|
||||
|
||||
.coffeescript .javascript,
|
||||
.javascript .xml,
|
||||
.tex .hljs-formula,
|
||||
.xml .javascript,
|
||||
.xml .vbscript,
|
||||
.xml .css,
|
||||
.xml .hljs-cdata,
|
||||
.xml .php,
|
||||
.php .xml {
|
||||
opacity: 0.5;
|
||||
}
|
||||
/***********/
|
||||
.hljs-attribute{
|
||||
color: #a6e22e;
|
||||
}
|
||||
/***** node keyword ******/
|
||||
.hljs-built_in{
|
||||
color: #3396dc;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.container {
|
||||
width: 86%;
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.example {
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Console-polyfill. MIT license.
|
||||
// https://github.com/paulmillr/console-polyfill
|
||||
// Make it safe to do console.log() always.
|
||||
(function (global) {
|
||||
'use strict';
|
||||
global.console = global.console || {};
|
||||
var con = global.console;
|
||||
var prop, method;
|
||||
var empty = {};
|
||||
var dummy = function () {
|
||||
};
|
||||
var properties = 'memory'.split(',');
|
||||
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
|
||||
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
|
||||
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
|
||||
while (prop = properties.pop()) con[prop] = con[prop] || empty;
|
||||
while (method = methods.pop()) con[method] = con[method] || dummy;
|
||||
})(typeof window === 'undefined' ? this : window);
|
||||
// Using `this` for web workers while maintaining compatibility with browser
|
||||
// targeted script loaders such as Browserify or Webpack where the only way to
|
||||
// get to the global object is via `window`.
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<link rel="stylesheet" href="common.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>rc-slider@3.6.0</h1>
|
||||
|
||||
<p>slider ui component for react</p>
|
||||
</div>
|
||||
<div class="example" id="__react-content"></div>
|
||||
<script src="common.js?nowrap"></script>
|
||||
<script src="v-marks.js?nowrap"></script>
|
||||
<div class="highlight"><pre><code language="js"><span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
|
||||
|
||||
<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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,119 @@
|
||||
webpackJsonp([3],{
|
||||
|
||||
/***/ 0:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(220);
|
||||
|
||||
|
||||
/***/ },
|
||||
|
||||
/***/ 220:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
'use strict';
|
||||
|
||||
__webpack_require__(2);
|
||||
|
||||
var React = __webpack_require__(3);
|
||||
var ReactDOM = __webpack_require__(160);
|
||||
var Slider = __webpack_require__(161);
|
||||
|
||||
var style = { 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°C'
|
||||
),
|
||||
26: '26°C',
|
||||
37: '37°C',
|
||||
50: '50°C',
|
||||
100: {
|
||||
style: {
|
||||
color: 'red'
|
||||
},
|
||||
label: React.createElement(
|
||||
'strong',
|
||||
null,
|
||||
'100°C'
|
||||
)
|
||||
}
|
||||
};
|
||||
|
||||
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":[],"mappings":";;;;;;;;;;;;;;;AAAA,oBAAO,CAAC,CAA6B,CAAC,CAAC;;AAEvC,KAAM,KAAK,GAAG,mBAAO,CAAC,CAAO,CAAC,CAAC;AAC/B,KAAM,QAAQ,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;AACtC,KAAM,MAAM,GAAG,mBAAO,CAAC,GAAW,CAAC,CAAC;;AAEpC,KAAM,KAAK,GAAG,EAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,YAAY,EAAE,GAAG,EAAE,UAAU,EAAE,EAAE,EAAC,CAAC;AAC1F,KAAM,WAAW,GAAG,EAAC,QAAQ,EAAE,QAAQ,EAAC,CAAC;;AAEzC,KAAM,KAAK,GAAG;AACZ,QAAK,EAAE,OAAO;AACd,IAAC,EAAE;;;;IAAoB;AACvB,KAAE,EAAE,MAAM;AACV,KAAE,EAAE,MAAM;AACV,KAAE,EAAE,MAAM;AACV,MAAG,EAAE;AACH,UAAK,EAAE;AACL,YAAK,EAAE,KAAK;MACb;AACD,UAAK,EAAE;;;;MAAsB;IAC9B;EACF,CAAC;;AAEF,UAAS,GAAG,CAAC,KAAK,EAAE;AAClB,UAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;EACpB;;AAED,SAAQ,CAAC,MAAM,CACb;;KAAK,KAAK,EAAE,WAAY;GACtB;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAqC;KACrC,oBAAC,MAAM,IAAC,QAAQ,QAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,IAAK,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,EAAG,GAAG;IACpF;GACN;;OAAK,KAAK,EAAE,KAAM;KACf;;;;MAAkC;KACnC,oBAAC,MAAM,IAAC,QAAQ,QAAC,IAAI,QAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,EAAG,GAAG;IACvF;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAA0C;KAC1C,oBAAC,MAAM,IAAC,QAAQ,QAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,QAAQ,EAAE,KAAM,EAAC,YAAY,EAAE,EAAG,GAAG;IAC1E;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAoD;KACpD,oBAAC,MAAM,IAAC,QAAQ,QAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,KAAM,EAAC,YAAY,EAAE,EAAG,GAAG;IACpF;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAuB;KACvB,oBAAC,MAAM,IAAC,QAAQ,QAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,QAAC,KAAK,EAAE,KAAM,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAE,GAAG;IACpF;GACN;;OAAK,KAAK,EAAE,KAAM;KAChB;;;;MAAiC;KACjC,oBAAC,MAAM,IAAC,QAAQ,QAAC,GAAG,EAAE,CAAC,EAAG,EAAC,KAAK,QAAC,KAAK,EAAE,KAAM,EAAC,IAAI,EAAE,EAAG,EAAC,QAAQ,EAAE,GAAI,EAAC,YAAY,EAAE,CAAC,EAAE,EAAE,EAAE,CAAE,GAAG;IAC9F;EACF,EACJ,QAAQ,CAAC,cAAc,CAAC,iBAAiB,CAAC,CAAC,C","file":"v-marks.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst style = {float: 'left', width: 160, height: 400, marginBottom: 160, marginLeft: 50};\nconst parentStyle = {overflow: 'hidden'};\n\nconst marks = {\n '-10': '-10°C',\n 0: <strong>0°C</strong>,\n 26: '26°C',\n 37: '37°C',\n 50: '50°C',\n 100: {\n style: {\n color: 'red',\n },\n label: <strong>100°C</strong>,\n },\n};\n\nfunction log(value) {\n console.log(value);\n}\n\nReactDOM.render(\n <div style={parentStyle}>\n <div style={style}>\n <p>Slider with marks, `step=null`</p>\n <Slider vertical min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks and steps</p>\n <Slider vertical dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks, `included=false`</p>\n <Slider vertical min={-10} marks={marks} included={false} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks and steps, `included=false`</p>\n <Slider vertical min={-10} marks={marks} step={10} included={false} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Range with marks</p>\n <Slider vertical min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />\n </div>\n <div style={style}>\n <p>Range with marks and steps</p>\n <Slider vertical min={-10} range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />\n </div>\n </div>\n , document.getElementById('__react-content'));\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/v-marks.js\n **/"],"sourceRoot":""}
|
||||
@@ -0,0 +1,393 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>v-range.js - example - rc-slider@3.6.0</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
|
||||
<style>
|
||||
.highlight pre {
|
||||
padding: .8em 1em;
|
||||
font: 14px/20px Consolas, Monaco, 'Andale Mono', monospace;
|
||||
border: 1px solid #e5e8ec;
|
||||
border-radius: 3px;
|
||||
background-color: #21221d;
|
||||
background-image: -webkit-linear-gradient(#21221d 50%, #272822 50%);
|
||||
background-image: -moz-linear-gradient(#21221d 50%, #272822 50%);
|
||||
background-image: -ms-linear-gradient(#21221d 50%, #272822 50%);
|
||||
background-image: -o-linear-gradient(#21221d 50%, #272822 50%);
|
||||
background-image: linear-gradient(#21221d 50%, #272822 50%);
|
||||
background-size: 40px 40px;
|
||||
background-origin: content-box;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.highlight pre > code {
|
||||
font-family: inherit;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
vertical-align: 2px;
|
||||
display: block;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
color: #E5E5C2;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
/*
|
||||
|
||||
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #23241f;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
.hljs,
|
||||
.hljs-tag,
|
||||
.css .hljs-rule,
|
||||
.css .hljs-value,
|
||||
.aspectj .hljs-function,
|
||||
.css .hljs-function
|
||||
.hljs-preprocessor,
|
||||
.hljs-pragma {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.hljs-strongemphasis,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis {
|
||||
color: #a8a8a2;
|
||||
}
|
||||
|
||||
.hljs-bullet,
|
||||
.hljs-blockquote,
|
||||
.hljs-horizontal_rule,
|
||||
.hljs-number,
|
||||
.hljs-regexp,
|
||||
.alias .hljs-keyword,
|
||||
.hljs-literal,
|
||||
.hljs-hexcolor {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
.hljs-code,
|
||||
.hljs-title,
|
||||
.css .hljs-class,
|
||||
.hljs-class .hljs-title:last-child {
|
||||
color: #a6e22e;
|
||||
/*color: #e6db74;*/
|
||||
}
|
||||
|
||||
.hljs-link_url {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.hljs-strong,
|
||||
.hljs-strongemphasis {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-emphasis,
|
||||
.hljs-strongemphasis,
|
||||
.hljs-class .hljs-title:last-child,
|
||||
.hljs-typename {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.ruby .hljs-class .hljs-keyword:first-child,
|
||||
.ruby .hljs-function .hljs-keyword,
|
||||
.hljs-function,
|
||||
.hljs-change,
|
||||
.hljs-winutils,
|
||||
.hljs-flow,
|
||||
.nginx .hljs-title,
|
||||
.tex .hljs-special,
|
||||
.hljs-header,
|
||||
.hljs-symbol,
|
||||
.hljs-symbol .hljs-string,
|
||||
.hljs-tag .hljs-title,
|
||||
.hljs-value,
|
||||
.alias .hljs-keyword:first-child,
|
||||
.css .hljs-tag,
|
||||
.css .unit,
|
||||
.css .hljs-important {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
.hljs-function .hljs-keyword,
|
||||
.hljs-class .hljs-keyword:first-child,
|
||||
.hljs-aspect .hljs-keyword:first-child,
|
||||
.hljs-constant,
|
||||
.hljs-typename,
|
||||
.hljs-name,
|
||||
.css .hljs-attribute {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
.hljs-variable,
|
||||
.hljs-params,
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-aspect .hljs-title {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.hljs-tag .hljs-value,
|
||||
.hljs-string,
|
||||
.css .hljs-id,
|
||||
.hljs-subst,
|
||||
.hljs-type,
|
||||
.ruby .hljs-class .hljs-parent,
|
||||
.django .hljs-template_tag,
|
||||
.django .hljs-variable,
|
||||
.smalltalk .hljs-class,
|
||||
.django .hljs-filter .hljs-argument,
|
||||
.smalltalk .hljs-localvars,
|
||||
.smalltalk .hljs-array,
|
||||
.hljs-attr_selector,
|
||||
.hljs-pseudo,
|
||||
.hljs-addition,
|
||||
.hljs-stream,
|
||||
.hljs-envvar,
|
||||
.apache .hljs-tag,
|
||||
.apache .hljs-cbracket,
|
||||
.tex .hljs-command,
|
||||
.hljs-prompt,
|
||||
.hljs-link_label,
|
||||
.hljs-link_url {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-annotation,
|
||||
.hljs-decorator,
|
||||
.hljs-pi,
|
||||
.hljs-doctype,
|
||||
.hljs-deletion,
|
||||
.hljs-shebang,
|
||||
.apache .hljs-sqbracket,
|
||||
.tex .hljs-formula {
|
||||
color: #75715e;
|
||||
}
|
||||
|
||||
.coffeescript .javascript,
|
||||
.javascript .xml,
|
||||
.tex .hljs-formula,
|
||||
.xml .javascript,
|
||||
.xml .vbscript,
|
||||
.xml .css,
|
||||
.xml .hljs-cdata,
|
||||
.xml .php,
|
||||
.php .xml {
|
||||
opacity: 0.5;
|
||||
}
|
||||
/***********/
|
||||
.hljs-attribute{
|
||||
color: #a6e22e;
|
||||
}
|
||||
/***** node keyword ******/
|
||||
.hljs-built_in{
|
||||
color: #3396dc;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.container {
|
||||
width: 86%;
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.example {
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Console-polyfill. MIT license.
|
||||
// https://github.com/paulmillr/console-polyfill
|
||||
// Make it safe to do console.log() always.
|
||||
(function (global) {
|
||||
'use strict';
|
||||
global.console = global.console || {};
|
||||
var con = global.console;
|
||||
var prop, method;
|
||||
var empty = {};
|
||||
var dummy = function () {
|
||||
};
|
||||
var properties = 'memory'.split(',');
|
||||
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
|
||||
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
|
||||
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
|
||||
while (prop = properties.pop()) con[prop] = con[prop] || empty;
|
||||
while (method = methods.pop()) con[method] = con[method] || dummy;
|
||||
})(typeof window === 'undefined' ? this : window);
|
||||
// Using `this` for web workers while maintaining compatibility with browser
|
||||
// targeted script loaders such as Browserify or Webpack where the only way to
|
||||
// get to the global object is via `window`.
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<link rel="stylesheet" href="common.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>rc-slider@3.6.0</h1>
|
||||
|
||||
<p>slider ui component for react</p>
|
||||
</div>
|
||||
<div class="example" id="__react-content"></div>
|
||||
<script src="common.js?nowrap"></script>
|
||||
<script src="v-range.js?nowrap"></script>
|
||||
<div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint react/no-multi-comp: 0 */</span>
|
||||
<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-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">return</span> {
|
||||
lowerBound: <span class="hljs-number">20</span>,
|
||||
upperBound: <span class="hljs-number">40</span>,
|
||||
value: [<span class="hljs-number">20</span>, <span class="hljs-number">40</span>],
|
||||
};
|
||||
},
|
||||
onLowerBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
<span class="hljs-keyword">this</span>.setState({ lowerBound: +e.target.value });
|
||||
},
|
||||
onUpperBoundChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
<span class="hljs-keyword">this</span>.setState({ upperBound: +e.target.value });
|
||||
},
|
||||
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
|
||||
log(value);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
value: value,
|
||||
});
|
||||
},
|
||||
handleApply: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">const</span> { lowerBound, upperBound } = <span class="hljs-keyword">this</span>.state;
|
||||
<span class="hljs-keyword">this</span>.setState({ value: [lowerBound, upperBound]});
|
||||
},
|
||||
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<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>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
const DynamicBounds = React.createClass({
|
||||
getInitialState() {
|
||||
return {
|
||||
min: 0,
|
||||
max: 100,
|
||||
};
|
||||
},
|
||||
onSliderChange: function(value) {
|
||||
log(value);
|
||||
},
|
||||
onMinChange: function(e) {
|
||||
this.setState({
|
||||
min: +e.target.value || 0,
|
||||
});
|
||||
},
|
||||
onMaxChange: function(e) {
|
||||
this.setState({
|
||||
max: +e.target.value || 100,
|
||||
});
|
||||
},
|
||||
render: function() {
|
||||
return (
|
||||
<span class="hljs-tag"><<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>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
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>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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,199 @@
|
||||
webpackJsonp([4],{
|
||||
|
||||
/***/ 0:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(221);
|
||||
|
||||
|
||||
/***/ },
|
||||
|
||||
/***/ 221:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
/* eslint react/no-multi-comp: 0 */
|
||||
'use strict';
|
||||
|
||||
__webpack_require__(2);
|
||||
|
||||
var React = __webpack_require__(3);
|
||||
var ReactDOM = __webpack_require__(160);
|
||||
var Slider = __webpack_require__(161);
|
||||
|
||||
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;
|
||||
var lowerBound = _state.lowerBound;
|
||||
var 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，`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，`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，`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,383 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>v-slider.js - example - rc-slider@3.6.0</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
|
||||
<style>
|
||||
.highlight pre {
|
||||
padding: .8em 1em;
|
||||
font: 14px/20px Consolas, Monaco, 'Andale Mono', monospace;
|
||||
border: 1px solid #e5e8ec;
|
||||
border-radius: 3px;
|
||||
background-color: #21221d;
|
||||
background-image: -webkit-linear-gradient(#21221d 50%, #272822 50%);
|
||||
background-image: -moz-linear-gradient(#21221d 50%, #272822 50%);
|
||||
background-image: -ms-linear-gradient(#21221d 50%, #272822 50%);
|
||||
background-image: -o-linear-gradient(#21221d 50%, #272822 50%);
|
||||
background-image: linear-gradient(#21221d 50%, #272822 50%);
|
||||
background-size: 40px 40px;
|
||||
background-origin: content-box;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.highlight pre > code {
|
||||
font-family: inherit;
|
||||
direction: ltr;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
vertical-align: 2px;
|
||||
display: block;
|
||||
-moz-tab-size: 2;
|
||||
-o-tab-size: 2;
|
||||
tab-size: 2;
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
color: #E5E5C2;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
/*
|
||||
|
||||
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
|
||||
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #23241f;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
.hljs,
|
||||
.hljs-tag,
|
||||
.css .hljs-rule,
|
||||
.css .hljs-value,
|
||||
.aspectj .hljs-function,
|
||||
.css .hljs-function
|
||||
.hljs-preprocessor,
|
||||
.hljs-pragma {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.hljs-strongemphasis,
|
||||
.hljs-strong,
|
||||
.hljs-emphasis {
|
||||
color: #a8a8a2;
|
||||
}
|
||||
|
||||
.hljs-bullet,
|
||||
.hljs-blockquote,
|
||||
.hljs-horizontal_rule,
|
||||
.hljs-number,
|
||||
.hljs-regexp,
|
||||
.alias .hljs-keyword,
|
||||
.hljs-literal,
|
||||
.hljs-hexcolor {
|
||||
color: #ae81ff;
|
||||
}
|
||||
|
||||
.hljs-code,
|
||||
.hljs-title,
|
||||
.css .hljs-class,
|
||||
.hljs-class .hljs-title:last-child {
|
||||
color: #a6e22e;
|
||||
/*color: #e6db74;*/
|
||||
}
|
||||
|
||||
.hljs-link_url {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
.hljs-strong,
|
||||
.hljs-strongemphasis {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-emphasis,
|
||||
.hljs-strongemphasis,
|
||||
.hljs-class .hljs-title:last-child,
|
||||
.hljs-typename {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.ruby .hljs-class .hljs-keyword:first-child,
|
||||
.ruby .hljs-function .hljs-keyword,
|
||||
.hljs-function,
|
||||
.hljs-change,
|
||||
.hljs-winutils,
|
||||
.hljs-flow,
|
||||
.nginx .hljs-title,
|
||||
.tex .hljs-special,
|
||||
.hljs-header,
|
||||
.hljs-symbol,
|
||||
.hljs-symbol .hljs-string,
|
||||
.hljs-tag .hljs-title,
|
||||
.hljs-value,
|
||||
.alias .hljs-keyword:first-child,
|
||||
.css .hljs-tag,
|
||||
.css .unit,
|
||||
.css .hljs-important {
|
||||
color: #f92672;
|
||||
}
|
||||
|
||||
.hljs-function .hljs-keyword,
|
||||
.hljs-class .hljs-keyword:first-child,
|
||||
.hljs-aspect .hljs-keyword:first-child,
|
||||
.hljs-constant,
|
||||
.hljs-typename,
|
||||
.hljs-name,
|
||||
.css .hljs-attribute {
|
||||
color: #66d9ef;
|
||||
}
|
||||
|
||||
.hljs-variable,
|
||||
.hljs-params,
|
||||
.hljs-class .hljs-title,
|
||||
.hljs-aspect .hljs-title {
|
||||
color: #f8f8f2;
|
||||
}
|
||||
|
||||
.hljs-tag .hljs-value,
|
||||
.hljs-string,
|
||||
.css .hljs-id,
|
||||
.hljs-subst,
|
||||
.hljs-type,
|
||||
.ruby .hljs-class .hljs-parent,
|
||||
.django .hljs-template_tag,
|
||||
.django .hljs-variable,
|
||||
.smalltalk .hljs-class,
|
||||
.django .hljs-filter .hljs-argument,
|
||||
.smalltalk .hljs-localvars,
|
||||
.smalltalk .hljs-array,
|
||||
.hljs-attr_selector,
|
||||
.hljs-pseudo,
|
||||
.hljs-addition,
|
||||
.hljs-stream,
|
||||
.hljs-envvar,
|
||||
.apache .hljs-tag,
|
||||
.apache .hljs-cbracket,
|
||||
.tex .hljs-command,
|
||||
.hljs-prompt,
|
||||
.hljs-link_label,
|
||||
.hljs-link_url {
|
||||
color: #e6db74;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-annotation,
|
||||
.hljs-decorator,
|
||||
.hljs-pi,
|
||||
.hljs-doctype,
|
||||
.hljs-deletion,
|
||||
.hljs-shebang,
|
||||
.apache .hljs-sqbracket,
|
||||
.tex .hljs-formula {
|
||||
color: #75715e;
|
||||
}
|
||||
|
||||
.coffeescript .javascript,
|
||||
.javascript .xml,
|
||||
.tex .hljs-formula,
|
||||
.xml .javascript,
|
||||
.xml .vbscript,
|
||||
.xml .css,
|
||||
.xml .hljs-cdata,
|
||||
.xml .php,
|
||||
.php .xml {
|
||||
opacity: 0.5;
|
||||
}
|
||||
/***********/
|
||||
.hljs-attribute{
|
||||
color: #a6e22e;
|
||||
}
|
||||
/***** node keyword ******/
|
||||
.hljs-built_in{
|
||||
color: #3396dc;
|
||||
font-weight: bold;
|
||||
}
|
||||
</style>
|
||||
<style>
|
||||
.container {
|
||||
width: 86%;
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.example {
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
// Console-polyfill. MIT license.
|
||||
// https://github.com/paulmillr/console-polyfill
|
||||
// Make it safe to do console.log() always.
|
||||
(function (global) {
|
||||
'use strict';
|
||||
global.console = global.console || {};
|
||||
var con = global.console;
|
||||
var prop, method;
|
||||
var empty = {};
|
||||
var dummy = function () {
|
||||
};
|
||||
var properties = 'memory'.split(',');
|
||||
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
|
||||
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
|
||||
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
|
||||
while (prop = properties.pop()) con[prop] = con[prop] || empty;
|
||||
while (method = methods.pop()) con[method] = con[method] || dummy;
|
||||
})(typeof window === 'undefined' ? this : window);
|
||||
// Using `this` for web workers while maintaining compatibility with browser
|
||||
// targeted script loaders such as Browserify or Webpack where the only way to
|
||||
// get to the global object is via `window`.
|
||||
</script>
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
<link rel="stylesheet" href="common.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>rc-slider@3.6.0</h1>
|
||||
|
||||
<p>slider ui component for react</p>
|
||||
</div>
|
||||
<div class="example" id="__react-content"></div>
|
||||
<script src="common.js?nowrap"></script>
|
||||
<script src="v-slider.js?nowrap"></script>
|
||||
<div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint react/no-multi-comp: 0 */</span>
|
||||
<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> v + <span class="hljs-string">' %'</span>;
|
||||
}
|
||||
|
||||
<span class="hljs-keyword">const</span> CustomizedSlider = React.createClass({
|
||||
getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">return</span> {
|
||||
value: <span class="hljs-number">50</span>,
|
||||
};
|
||||
},
|
||||
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
|
||||
log(value);
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
value: value,
|
||||
});
|
||||
},
|
||||
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag"><<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-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">return</span> {
|
||||
min: <span class="hljs-number">0</span>,
|
||||
max: <span class="hljs-number">100</span>,
|
||||
};
|
||||
},
|
||||
onSliderChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(value)</span> </span>{
|
||||
log(value);
|
||||
},
|
||||
onMinChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
min: +e.target.value || <span class="hljs-number">0</span>,
|
||||
});
|
||||
},
|
||||
onMaxChange: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">(e)</span> </span>{
|
||||
<span class="hljs-keyword">this</span>.setState({
|
||||
max: +e.target.value || <span class="hljs-number">100</span>,
|
||||
});
|
||||
},
|
||||
render: <span class="hljs-function"><span class="hljs-keyword">function</span><span class="hljs-params">()</span> </span>{
|
||||
<span class="hljs-keyword">return</span> (
|
||||
<span class="xml"><span class="hljs-tag"><<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>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
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>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>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -0,0 +1,185 @@
|
||||
webpackJsonp([5],{
|
||||
|
||||
/***/ 0:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
module.exports = __webpack_require__(222);
|
||||
|
||||
|
||||
/***/ },
|
||||
|
||||
/***/ 222:
|
||||
/***/ function(module, exports, __webpack_require__) {
|
||||
|
||||
/* eslint react/no-multi-comp: 0 */
|
||||
'use strict';
|
||||
|
||||
__webpack_require__(2);
|
||||
|
||||
var React = __webpack_require__(3);
|
||||
var ReactDOM = __webpack_require__(160);
|
||||
var Slider = __webpack_require__(161);
|
||||
|
||||
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，`step=20`'
|
||||
),
|
||||
React.createElement(Slider, { vertical: true, step: 20, defaultValue: 50, onBeforeChange: log })
|
||||
),
|
||||
React.createElement(
|
||||
'div',
|
||||
{ style: style },
|
||||
React.createElement(
|
||||
'p',
|
||||
null,
|
||||
'Basic Slider，`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
+14
-2
@@ -7,7 +7,7 @@
|
||||
<meta charset="utf-8"/>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
|
||||
<title>rc-slider@3.5.1 - slider ui component for react</title>
|
||||
<title>rc-slider@3.6.0 - slider ui component for react</title>
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: octicons-anchor;
|
||||
@@ -737,7 +737,7 @@
|
||||
|
||||
<body>
|
||||
<div class="header">
|
||||
<h1>rc-slider@3.5.1</h1>
|
||||
<h1>rc-slider@3.6.0</h1>
|
||||
</div>
|
||||
<div class="examples">
|
||||
<h3>EXAMPLES</h3>
|
||||
@@ -750,6 +750,12 @@
|
||||
|
||||
<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>
|
||||
@@ -828,6 +834,12 @@ ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-t
|
||||
<td>true</td>
|
||||
<td>When <code>range</code> is <code>true</code>, <code>allowCross</code> could be set as <code>true</code> to allow those two handles cross.</td>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user