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

Updates

Browse Source
This commit is contained in:
Benjy Cui
2016-08-16 10:02:43 +08:00
parent a6492206d3
commit 6a1c904ca8
24 changed files with 95 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
examples/common.css
-5
View File
@@ -17,7 +17,6 @@
height: 4px;
border-radius: 6px;
background-color: #abe2fb;
z-index: 1;
}
.rc-slider-handle {
position: absolute;
@@ -29,7 +28,6 @@
border-radius: 50%;
border: solid 2px #96dbfa;
background-color: #fff;
z-index: 2;
}
.rc-slider-handle:hover {
border-color: #57c5f7;
@@ -44,7 +42,6 @@
left: 0;
width: 100%;
font-size: 12px;
z-index: 3;
}
.rc-slider-mark-text {
position: absolute;
@@ -62,7 +59,6 @@
width: 100%;
height: 4px;
background: transparent;
z-index: 1;
}
.rc-slider-dot {
position: absolute;
@@ -240,7 +236,6 @@
position: absolute;
left: -9999px;
top: -9999px;
z-index: 4;
visibility: visible;
box-sizing: border-box;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
examples/common.css.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/common.js
+8 -5
View File
@@ -22095,7 +22095,8 @@
var trackClassName = (0, _classnames2.default)((_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, prefixCls + '-track', true), (0, _defineProperty3.default)(_classNames2, prefixCls + '-track-' + i, true), _classNames2));
tracks.push(_react2.default.createElement(_Track2.default, { className: trackClassName, vertical: vertical, included: isIncluded,
offset: offsets[i - 1], length: offsets[i] - offsets[i - 1], key: i }));
offset: offsets[i - 1], length: offsets[i] - offsets[i - 1], key: i
}));
}
var sliderClassName = (0, _classnames2.default)((_classNames3 = {}, (0, _defineProperty3.default)(_classNames3, prefixCls, true), (0, _defineProperty3.default)(_classNames3, prefixCls + '-disabled', disabled), (0, _defineProperty3.default)(_classNames3, className, !!className), (0, _defineProperty3.default)(_classNames3, prefixCls + '-vertical', this.props.vertical), _classNames3));
@@ -22106,14 +22107,16 @@
onTouchStart: disabled ? noop : this.onTouchStart.bind(this),
onMouseDown: disabled ? noop : this.onMouseDown.bind(this)
},
handles,
tracks,
_react2.default.createElement(_Steps2.default, { prefixCls: prefixCls, vertical: vertical, marks: marks, dots: dots, step: step,
included: isIncluded, lowerBound: bounds[0],
upperBound: bounds[bounds.length - 1], max: max, min: min }),
upperBound: bounds[bounds.length - 1], max: max, min: min
}),
handles,
_react2.default.createElement(_Marks2.default, { className: prefixCls + '-mark', vertical: vertical, marks: marks,
included: isIncluded, lowerBound: bounds[0],
upperBound: bounds[bounds.length - 1], max: max, min: min }),
upperBound: bounds[bounds.length - 1], max: max, min: min
}),
children
);
};
@@ -28323,7 +28326,7 @@
var bottomStyle = {
// height: markWidth + '%',
marginBottom: '-200' + '%',
marginBottom: '-200%',
bottom: (point - min) / range * 100 + '%'
};
examples/common.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/custom-handles.html
+6 -6
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>custom-handles.js - example - rc-slider@4.0.0</title>
<title>custom-handles.js - example - rc-slider@4.0.1</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"/>
@@ -258,7 +258,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@4.0.0</h1>
<h1>rc-slider@4.0.1</h1>
<p>slider ui component for react</p>
</div>
@@ -282,11 +282,10 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
background: <span class="hljs-string">'#fff'</span>,
fontSize: <span class="hljs-string">'14px'</span>,
textAlign: <span class="hljs-string">'center'</span>,
zIndex: <span class="hljs-number">3</span>,
};
<span class="hljs-keyword">const</span> CustomHandle = props =&gt; {
<span class="hljs-keyword">const</span> style = <span class="hljs-built_in">Object</span>.assign({ left: props.offset + <span class="hljs-string">'%'</span> }, handleStyle);
<span class="hljs-keyword">const</span> style = <span class="hljs-built_in">Object</span>.assign({ left: <span class="hljs-string">`<span class="hljs-subst">${props.offset}</span>%`</span> }, handleStyle);
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>val: {props.value}<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
)</span>;
@@ -306,8 +305,9 @@ ReactDOM.render(
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Slider with custom handle<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">min</span>=<span class="hljs-value">{0}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{3}</span> <span class="hljs-attribute">handle</span>=<span class="hljs-value">{&lt;CustomHandle</span> /&gt;</span>} /&gt;
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
, document.getElementById('__react-content'));
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>,
document.getElementById('__react-content')
);
</span></code></pre></div>
</div>
<a href="http://github.com/react-component/slider">
examples/custom-handles.js
+1 -2
View File
@@ -28,8 +28,7 @@ webpackJsonp([0],[
borderRadius: '3px',
background: '#fff',
fontSize: '14px',
textAlign: 'center',
zIndex: 3
textAlign: 'center'
};
var CustomHandle = function CustomHandle(props) {
examples/custom-handles.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sources":["webpack:///./examples/custom-handles.js"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,qBAAQ,CAAR;;AAEA,KAAM,QAAQ,oBAAQ,CAAR,CAAd;AACA,KAAM,WAAW,oBAAQ,EAAR,CAAjB;AACA,KAAM,SAAS,oBAAQ,GAAR,CAAf;;AAEA,KAAM,eAAe,EAAE,OAAO,GAAT,EAAc,QAAQ,EAAtB,EAArB;;AAEA,KAAM,cAAc;AAClB,aAAU,UADQ;AAElB,cAAW,uBAFO;AAGlB,WAAQ,SAHU;AAIlB,YAAS,KAJS;AAKlB,WAAQ,mBALU;AAMlB,iBAAc,KANI;AAOlB,eAAY,MAPM;AAQlB,aAAU,MARQ;AASlB,cAAW,QATO;AAUlB,WAAQ;AAVU,EAApB;;AAaA,KAAM,eAAe,SAAf,YAAe,QAAS;AAC5B,OAAM,QAAQ,OAAO,MAAP,CAAc,EAAE,MAAM,MAAM,MAAN,GAAe,GAAvB,EAAd,EAA4C,WAA5C,CAAd;AACA,UACE;AAAA;AAAA,OAAK,OAAO,KAAZ;AAAA;AAAyB,WAAM;AAA/B,IADF;AAGD,EALD;AAMA,cAAa,SAAb,GAAyB;AACvB,UAAO,MAAM,SAAN,CAAgB,GADA;AAEvB,WAAQ,MAAM,SAAN,CAAgB;AAFD,EAAzB;;AAKA,UAAS,MAAT,CACE;AAAA;AAAA;AACE;AAAA;AAAA,OAAK,OAAO,YAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAb,EAAgB,KAAK,EAArB,EAAyB,cAAc,CAAvC;AAFF,IADF;AAKE;AAAA;AAAA,OAAK,OAAO,YAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAb,EAAgB,KAAK,EAArB,EAAyB,cAAc,CAAvC,EAA0C,QAAQ,oBAAC,YAAD,OAAlD;AAFF;AALF,EADF,EAWI,SAAS,cAAT,CAAwB,iBAAxB,CAXJ,E","file":"custom-handles.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst wrapperStyle = { width: 400, margin: 50 };\n\nconst handleStyle = {\n position: 'absolute',\n transform: 'translate(-50%, -50%)',\n cursor: 'pointer',\n padding: '2px',\n border: '2px solid #abe2fb',\n borderRadius: '3px',\n background: '#fff',\n fontSize: '14px',\n textAlign: 'center',\n zIndex: 3,\n};\n\nconst CustomHandle = props => {\n const style = Object.assign({ left: props.offset + '%' }, handleStyle);\n return (\n <div style={style}>val: {props.value}</div>\n );\n};\nCustomHandle.propTypes = {\n value: React.PropTypes.any,\n offset: React.PropTypes.number,\n};\n\nReactDOM.render(\n <div>\n <div style={wrapperStyle}>\n <p>Default slider</p>\n <Slider min={0} max={20} defaultValue={3} />\n </div>\n <div style={wrapperStyle}>\n <p>Slider with custom handle</p>\n <Slider min={0} max={20} defaultValue={3} handle={<CustomHandle />} />\n </div>\n </div>\n , document.getElementById('__react-content'));\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/custom-handles.js\n **/"],"sourceRoot":""}
{"version":3,"sources":["webpack:///./examples/custom-handles.js"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,qBAAQ,CAAR;;AAEA,KAAM,QAAQ,oBAAQ,CAAR,CAAd;AACA,KAAM,WAAW,oBAAQ,EAAR,CAAjB;AACA,KAAM,SAAS,oBAAQ,GAAR,CAAf;;AAEA,KAAM,eAAe,EAAE,OAAO,GAAT,EAAc,QAAQ,EAAtB,EAArB;;AAEA,KAAM,cAAc;AAClB,aAAU,UADQ;AAElB,cAAW,uBAFO;AAGlB,WAAQ,SAHU;AAIlB,YAAS,KAJS;AAKlB,WAAQ,mBALU;AAMlB,iBAAc,KANI;AAOlB,eAAY,MAPM;AAQlB,aAAU,MARQ;AASlB,cAAW;AATO,EAApB;;AAYA,KAAM,eAAe,SAAf,YAAe,QAAS;AAC5B,OAAM,QAAQ,OAAO,MAAP,CAAc,EAAE,MAAS,MAAM,MAAf,MAAF,EAAd,EAA4C,WAA5C,CAAd;AACA,UACE;AAAA;AAAA,OAAK,OAAO,KAAZ;AAAA;AAAyB,WAAM;AAA/B,IADF;AAGD,EALD;AAMA,cAAa,SAAb,GAAyB;AACvB,UAAO,MAAM,SAAN,CAAgB,GADA;AAEvB,WAAQ,MAAM,SAAN,CAAgB;AAFD,EAAzB;;AAKA,UAAS,MAAT,CACE;AAAA;AAAA;AACE;AAAA;AAAA,OAAK,OAAO,YAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAb,EAAgB,KAAK,EAArB,EAAyB,cAAc,CAAvC;AAFF,IADF;AAKE;AAAA;AAAA,OAAK,OAAO,YAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,KAAK,CAAb,EAAgB,KAAK,EAArB,EAAyB,cAAc,CAAvC,EAA0C,QAAQ,oBAAC,YAAD,OAAlD;AAFF;AALF,EADF,EAWE,SAAS,cAAT,CAAwB,iBAAxB,CAXF,E","file":"custom-handles.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst wrapperStyle = { width: 400, margin: 50 };\n\nconst handleStyle = {\n position: 'absolute',\n transform: 'translate(-50%, -50%)',\n cursor: 'pointer',\n padding: '2px',\n border: '2px solid #abe2fb',\n borderRadius: '3px',\n background: '#fff',\n fontSize: '14px',\n textAlign: 'center',\n};\n\nconst CustomHandle = props => {\n const style = Object.assign({ left: `${props.offset}%` }, handleStyle);\n return (\n <div style={style}>val: {props.value}</div>\n );\n};\nCustomHandle.propTypes = {\n value: React.PropTypes.any,\n offset: React.PropTypes.number,\n};\n\nReactDOM.render(\n <div>\n <div style={wrapperStyle}>\n <p>Default slider</p>\n <Slider min={0} max={20} defaultValue={3} />\n </div>\n <div style={wrapperStyle}>\n <p>Slider with custom handle</p>\n <Slider min={0} max={20} defaultValue={3} handle={<CustomHandle />} />\n </div>\n </div>,\n document.getElementById('__react-content')\n);\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/custom-handles.js\n **/"],"sourceRoot":""}
examples/marks.html
+2 -2
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>marks.js - example - rc-slider@4.0.0</title>
<title>marks.js - example - rc-slider@4.0.1</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"/>
@@ -258,7 +258,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@4.0.0</h1>
<h1>rc-slider@4.0.1</h1>
<p>slider ui component for react</p>
</div>
examples/range.html
+5 -3
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>range.js - example - rc-slider@4.0.0</title>
<title>range.js - example - rc-slider@4.0.1</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"/>
@@ -258,7 +258,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@4.0.0</h1>
<h1>rc-slider@4.0.1</h1>
<p>slider ui component for react</p>
</div>
@@ -347,7 +347,9 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Max: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMaxChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">50</span>]} <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">50</span>]} <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</span>
<span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
)</span>;
},
examples/range.js
+3 -1
View File
@@ -124,7 +124,9 @@ webpackJsonp([2],{
React.createElement('input', { type: 'number', value: this.state.max, onChange: this.onMaxChange }),
React.createElement('br', null),
React.createElement('br', null),
React.createElement(Slider, { range: true, defaultValue: [20, 50], min: this.state.min, max: this.state.max, onChange: this.onSliderChange })
React.createElement(Slider, { range: true, defaultValue: [20, 50], min: this.state.min, max: this.state.max,
onChange: this.onSliderChange
})
);
}
});
examples/range.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/slider.html
+14 -6
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>slider.js - example - rc-slider@4.0.0</title>
<title>slider.js - example - rc-slider@4.0.1</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"/>
@@ -258,7 +258,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@4.0.0</h1>
<h1>rc-slider@4.0.1</h1>
<p>slider ui component for react</p>
</div>
@@ -279,7 +279,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">percentFormatter</span>(<span class="hljs-params">v</span>) </span>{
<span class="hljs-keyword">return</span> v + <span class="hljs-string">' %'</span>;
<span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${v}</span> %`</span>;
}
<span class="hljs-keyword">const</span> CustomizedSlider = React.createClass({
@@ -298,7 +298,11 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-built_in">console</span>.log(value);
},
render() {
<span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> <span class="hljs-attribute">onAfterChange</span>=<span class="hljs-value">{this.onAfterChange}</span> /&gt;</span>;</span>
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span>
<span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> <span class="hljs-attribute">onAfterChange</span>=<span class="hljs-value">{this.onAfterChange}</span>
/&gt;</span>
)</span>;
},
});
@@ -331,7 +335,9 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Max: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMaxChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{50}</span> <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{50}</span> <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</span>
<span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
)</span>;
},
@@ -353,7 +359,9 @@ ReactDOM.render(
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Slider with `tipFormatter`<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">tipFormatter</span>=<span class="hljs-value">{percentFormatter}</span> <span class="hljs-attribute">tipTransitionName</span>=<span class="hljs-value">"rc-slider-tooltip-zoom-down"</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">tipFormatter</span>=<span class="hljs-value">{percentFormatter}</span>
<span class="hljs-attribute">tipTransitionName</span>=<span class="hljs-value">"rc-slider-tooltip-zoom-down"</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Slider without tooltip<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
examples/slider.js
+9 -3
View File
@@ -47,7 +47,9 @@ webpackJsonp([3],{
console.log(value);
},
render: function render() {
return React.createElement(Slider, { value: this.state.value, onChange: this.onSliderChange, onAfterChange: this.onAfterChange });
return React.createElement(Slider, { value: this.state.value,
onChange: this.onSliderChange, onAfterChange: this.onAfterChange
});
}
});
@@ -91,7 +93,9 @@ webpackJsonp([3],{
React.createElement('input', { type: 'number', value: this.state.max, onChange: this.onMaxChange }),
React.createElement('br', null),
React.createElement('br', null),
React.createElement(Slider, { defaultValue: 50, min: this.state.min, max: this.state.max, onChange: this.onSliderChange })
React.createElement(Slider, { defaultValue: 50, min: this.state.min, max: this.state.max,
onChange: this.onSliderChange
})
);
}
});
@@ -137,7 +141,9 @@ webpackJsonp([3],{
null,
'Basic Slider with `tipFormatter`'
),
React.createElement(Slider, { tipFormatter: percentFormatter, tipTransitionName: 'rc-slider-tooltip-zoom-down', onChange: log })
React.createElement(Slider, { tipFormatter: percentFormatter,
tipTransitionName: 'rc-slider-tooltip-zoom-down', onChange: log
})
),
React.createElement(
'div',
examples/slider.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/v-marks.html
+5 -3
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>v-marks.js - example - rc-slider@4.0.0</title>
<title>v-marks.js - example - rc-slider@4.0.1</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"/>
@@ -258,7 +258,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@4.0.0</h1>
<h1>rc-slider@4.0.1</h1>
<p>slider ui component for react</p>
</div>
@@ -315,7 +315,9 @@ ReactDOM.render(
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Range with marks and steps<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">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>]} /&gt;</span>
<span class="hljs-tag">&lt;<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>]}
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
, document.getElementById('__react-content'));
examples/v-marks.js
+3 -1
View File
@@ -109,7 +109,9 @@ webpackJsonp([4],{
null,
'Range with marks and steps'
),
React.createElement(Slider, { vertical: true, min: -10, range: true, marks: marks, step: 10, onChange: log, defaultValue: [20, 40] })
React.createElement(Slider, { vertical: true, min: -10, range: true, marks: marks, step: 10,
onChange: log, defaultValue: [20, 40]
})
)
), document.getElementById('__react-content'));
examples/v-marks.js.map
+1 -1
View File
@@ -1 +1 @@
{"version":3,"sources":["webpack:///./examples/v-marks.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,qBAAQ,CAAR;;AAEA,KAAM,QAAQ,oBAAQ,CAAR,CAAd;AACA,KAAM,WAAW,oBAAQ,EAAR,CAAjB;AACA,KAAM,SAAS,oBAAQ,GAAR,CAAf;;AAEA,KAAM,QAAQ,EAAE,OAAO,MAAT,EAAiB,OAAO,GAAxB,EAA6B,QAAQ,GAArC,EAA0C,cAAc,GAAxD,EAA6D,YAAY,EAAzE,EAAd;AACA,KAAM,cAAc,EAAE,UAAU,QAAZ,EAApB;;AAEA,KAAM,QAAQ;AACZ,UAAO,OADK;AAEZ,MAAG;AAAA;AAAA;AAAA;AAAA,IAFS;AAGZ,OAAI,MAHQ;AAIZ,OAAI,MAJQ;AAKZ,OAAI,MALQ;AAMZ,QAAK;AACH,YAAO;AACL,cAAO;AADF,MADJ;AAIH,YAAO;AAAA;AAAA;AAAA;AAAA;AAJJ;AANO,EAAd;;AAcA,UAAS,GAAT,CAAa,KAAb,EAAoB;AAClB,WAAQ,GAAR,CAAY,KAAZ;AACD;;AAED,UAAS,MAAT,CACE;AAAA;AAAA,KAAK,OAAO,WAAZ;AACE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,OAAO,KAAlC,EAAyC,MAAM,IAA/C,EAAqD,UAAU,GAA/D,EAAoE,cAAc,EAAlF;AAFF,IADF;AAKE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACG;AAAA;AAAA;AAAA;AAAA,MADH;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,UAAjB,EAAsB,KAAK,CAAC,EAA5B,EAAgC,OAAO,KAAvC,EAA8C,MAAM,EAApD,EAAwD,UAAU,GAAlE,EAAuE,cAAc,EAArF;AAFF,IALF;AASE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,OAAO,KAAlC,EAAyC,UAAU,KAAnD,EAA0D,cAAc,EAAxE;AAFF,IATF;AAaE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,OAAO,KAAlC,EAAyC,MAAM,EAA/C,EAAmD,UAAU,KAA7D,EAAoE,cAAc,EAAlF;AAFF,IAbF;AAiBE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,WAA3B,EAAiC,OAAO,KAAxC,EAA+C,UAAU,GAAzD,EAA8D,cAAc,CAAC,EAAD,EAAK,EAAL,CAA5E;AAFF,IAjBF;AAqBE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,WAA3B,EAAiC,OAAO,KAAxC,EAA+C,MAAM,EAArD,EAAyD,UAAU,GAAnE,EAAwE,cAAc,CAAC,EAAD,EAAK,EAAL,CAAtF;AAFF;AArBF,EADF,EA2BI,SAAS,cAAT,CAAwB,iBAAxB,CA3BJ,E","file":"v-marks.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst style = { float: 'left', width: 160, height: 400, marginBottom: 160, marginLeft: 50 };\nconst parentStyle = { overflow: 'hidden' };\n\nconst marks = {\n '-10': '-10°C',\n 0: <strong>0°C</strong>,\n 26: '26°C',\n 37: '37°C',\n 50: '50°C',\n 100: {\n style: {\n color: 'red',\n },\n label: <strong>100°C</strong>,\n },\n};\n\nfunction log(value) {\n console.log(value);\n}\n\nReactDOM.render(\n <div style={parentStyle}>\n <div style={style}>\n <p>Slider with marks, `step=null`</p>\n <Slider vertical min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks and steps</p>\n <Slider vertical dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks, `included=false`</p>\n <Slider vertical min={-10} marks={marks} included={false} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks and steps, `included=false`</p>\n <Slider vertical min={-10} marks={marks} step={10} included={false} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Range with marks</p>\n <Slider vertical min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />\n </div>\n <div style={style}>\n <p>Range with marks and steps</p>\n <Slider vertical min={-10} range marks={marks} step={10} onChange={log} defaultValue={[20, 40]} />\n </div>\n </div>\n , document.getElementById('__react-content'));\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/v-marks.js\n **/"],"sourceRoot":""}
{"version":3,"sources":["webpack:///./examples/v-marks.js"],"names":[],"mappings":";;;;;;;;;;;;;;;AAAA,qBAAQ,CAAR;;AAEA,KAAM,QAAQ,oBAAQ,CAAR,CAAd;AACA,KAAM,WAAW,oBAAQ,EAAR,CAAjB;AACA,KAAM,SAAS,oBAAQ,GAAR,CAAf;;AAEA,KAAM,QAAQ,EAAE,OAAO,MAAT,EAAiB,OAAO,GAAxB,EAA6B,QAAQ,GAArC,EAA0C,cAAc,GAAxD,EAA6D,YAAY,EAAzE,EAAd;AACA,KAAM,cAAc,EAAE,UAAU,QAAZ,EAApB;;AAEA,KAAM,QAAQ;AACZ,UAAO,OADK;AAEZ,MAAG;AAAA;AAAA;AAAA;AAAA,IAFS;AAGZ,OAAI,MAHQ;AAIZ,OAAI,MAJQ;AAKZ,OAAI,MALQ;AAMZ,QAAK;AACH,YAAO;AACL,cAAO;AADF,MADJ;AAIH,YAAO;AAAA;AAAA;AAAA;AAAA;AAJJ;AANO,EAAd;;AAcA,UAAS,GAAT,CAAa,KAAb,EAAoB;AAClB,WAAQ,GAAR,CAAY,KAAZ;AACD;;AAED,UAAS,MAAT,CACE;AAAA;AAAA,KAAK,OAAO,WAAZ;AACE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,OAAO,KAAlC,EAAyC,MAAM,IAA/C,EAAqD,UAAU,GAA/D,EAAoE,cAAc,EAAlF;AAFF,IADF;AAKE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACG;AAAA;AAAA;AAAA;AAAA,MADH;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,UAAjB,EAAsB,KAAK,CAAC,EAA5B,EAAgC,OAAO,KAAvC,EAA8C,MAAM,EAApD,EAAwD,UAAU,GAAlE,EAAuE,cAAc,EAArF;AAFF,IALF;AASE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,OAAO,KAAlC,EAAyC,UAAU,KAAnD,EAA0D,cAAc,EAAxE;AAFF,IATF;AAaE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,OAAO,KAAlC,EAAyC,MAAM,EAA/C,EAAmD,UAAU,KAA7D,EAAoE,cAAc,EAAlF;AAFF,IAbF;AAiBE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,WAA3B,EAAiC,OAAO,KAAxC,EAA+C,UAAU,GAAzD,EAA8D,cAAc,CAAC,EAAD,EAAK,EAAL,CAA5E;AAFF,IAjBF;AAqBE;AAAA;AAAA,OAAK,OAAO,KAAZ;AACE;AAAA;AAAA;AAAA;AAAA,MADF;AAEE,yBAAC,MAAD,IAAQ,cAAR,EAAiB,KAAK,CAAC,EAAvB,EAA2B,WAA3B,EAAiC,OAAO,KAAxC,EAA+C,MAAM,EAArD;AACE,iBAAU,GADZ,EACiB,cAAc,CAAC,EAAD,EAAK,EAAL;AAD/B;AAFF;AArBF,EADF,EA6BI,SAAS,cAAT,CAAwB,iBAAxB,CA7BJ,E","file":"v-marks.js","sourcesContent":["require('rc-slider/assets/index.less');\n\nconst React = require('react');\nconst ReactDOM = require('react-dom');\nconst Slider = require('rc-slider');\n\nconst style = { float: 'left', width: 160, height: 400, marginBottom: 160, marginLeft: 50 };\nconst parentStyle = { overflow: 'hidden' };\n\nconst marks = {\n '-10': '-10°C',\n 0: <strong>0°C</strong>,\n 26: '26°C',\n 37: '37°C',\n 50: '50°C',\n 100: {\n style: {\n color: 'red',\n },\n label: <strong>100°C</strong>,\n },\n};\n\nfunction log(value) {\n console.log(value);\n}\n\nReactDOM.render(\n <div style={parentStyle}>\n <div style={style}>\n <p>Slider with marks, `step=null`</p>\n <Slider vertical min={-10} marks={marks} step={null} onChange={log} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks and steps</p>\n <Slider vertical dots min={-10} marks={marks} step={10} onChange={log} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks, `included=false`</p>\n <Slider vertical min={-10} marks={marks} included={false} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Slider with marks and steps, `included=false`</p>\n <Slider vertical min={-10} marks={marks} step={10} included={false} defaultValue={20} />\n </div>\n <div style={style}>\n <p>Range with marks</p>\n <Slider vertical min={-10} range marks={marks} onChange={log} defaultValue={[20, 40]} />\n </div>\n <div style={style}>\n <p>Range with marks and steps</p>\n <Slider vertical min={-10} range marks={marks} step={10}\n onChange={log} defaultValue={[20, 40]}\n />\n </div>\n </div>\n , document.getElementById('__react-content'));\n\n\n\n/** WEBPACK FOOTER **\n ** ./examples/v-marks.js\n **/"],"sourceRoot":""}
examples/v-range.html
+8 -4
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>v-range.js - example - rc-slider@4.0.0</title>
<title>v-range.js - example - rc-slider@4.0.1</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"/>
@@ -258,7 +258,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@4.0.0</h1>
<h1>rc-slider@4.0.1</h1>
<p>slider ui component for react</p>
</div>
@@ -305,7 +305,9 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">allowCross</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">allowCross</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span>
<span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span>
/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>LowerBound: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.lowerBound}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onLowerBoundChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
@@ -341,7 +343,9 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
render() {
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">50</span>]} <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">vertical</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">50</span>]} <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</span>
<span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span>
/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Min: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMinChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
examples/v-range.js
+6 -2
View File
@@ -59,7 +59,9 @@ webpackJsonp([5],{
return React.createElement(
'div',
{ style: style },
React.createElement(Slider, { range: true, vertical: true, allowCross: false, value: this.state.value, onChange: this.onSliderChange }),
React.createElement(Slider, { range: true, vertical: true, allowCross: false, value: this.state.value,
onChange: this.onSliderChange
}),
React.createElement(
'label',
null,
@@ -108,7 +110,9 @@ webpackJsonp([5],{
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(Slider, { range: true, vertical: true, defaultValue: [20, 50], min: this.state.min, max: this.state.max,
onChange: this.onSliderChange
}),
React.createElement(
'label',
null,
examples/v-range.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
examples/v-slider.html
+9 -5
View File
@@ -2,7 +2,7 @@
<html>
<head>
<title>v-slider.js - example - rc-slider@4.0.0</title>
<title>v-slider.js - example - rc-slider@4.0.1</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"/>
@@ -258,7 +258,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<body>
<div class="container">
<div class="header">
<h1>rc-slider@4.0.0</h1>
<h1>rc-slider@4.0.1</h1>
<p>slider ui component for react</p>
</div>
@@ -280,7 +280,7 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">percentFormatter</span>(<span class="hljs-params">v</span>) </span>{
<span class="hljs-keyword">return</span> v + <span class="hljs-string">' %'</span>;
<span class="hljs-keyword">return</span> <span class="hljs-string">`<span class="hljs-subst">${v}</span> %`</span>;
}
<span class="hljs-keyword">const</span> CustomizedSlider = React.createClass({
@@ -324,7 +324,9 @@ Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-lic
<span class="hljs-keyword">return</span> (
<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Slider with dynamic `min` `max`<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<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> /&gt;</span>
<span class="hljs-tag">&lt;<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>
/&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">label</span>&gt;</span>Min: <span class="hljs-tag">&lt;/<span class="hljs-title">label</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMinChange}</span> /&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">br</span> /&gt;</span>
@@ -351,7 +353,9 @@ ReactDOM.render(
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Slider with `tipFormatter`<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">Slider</span> <span class="hljs-attribute">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> /&gt;</span>
<span class="hljs-tag">&lt;<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>
/&gt;</span>
<span class="hljs-tag">&lt;/<span class="hljs-title">div</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-title">p</span>&gt;</span>Basic Slider without tooltip<span class="hljs-tag">&lt;/<span class="hljs-title">p</span>&gt;</span>
examples/v-slider.js
+6 -2
View File
@@ -79,7 +79,9 @@ webpackJsonp([6],{
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(Slider, { vertical: true, defaultValue: 50, min: this.state.min, max: this.state.max,
onChange: this.onSliderChange
}),
React.createElement(
'label',
null,
@@ -138,7 +140,9 @@ webpackJsonp([6],{
null,
'Basic Slider with `tipFormatter`'
),
React.createElement(Slider, { vertical: true, tipFormatter: percentFormatter, tipTransitionName: 'rc-slider-tooltip-zoom-down', onChange: log })
React.createElement(Slider, { vertical: true, tipFormatter: percentFormatter,
tipTransitionName: 'rc-slider-tooltip-zoom-down', onChange: log
})
),
React.createElement(
'div',
examples/v-slider.js.map
+1 -1
View File
File diff suppressed because one or more lines are too long
index.html
+2 -2
View File
@@ -7,7 +7,7 @@
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
<title>rc-slider@4.0.0 - slider ui component for react</title>
<title>rc-slider@4.0.1 - slider ui component for react</title>
<style>
@font-face {
font-family: octicons-anchor;
@@ -737,7 +737,7 @@
<body>
<div class="header">
<h1>rc-slider@4.0.0</h1>
<h1>rc-slider@4.0.1</h1>
</div>
<div class="examples">
<h3>EXAMPLES</h3>