mirror of
https://github.com/wassname/slider.git
synced 2026-09-09 11:35:22 +08:00
409 lines
19 KiB
HTML
409 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<title>range.js - example - rc-slider@5.2.0</title>
|
||
<meta name="viewport"
|
||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
||
<meta charset="utf-8"/>
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<link href="https://a.alipayobjects.com/normalize.css/3.0.1/normalize.css" rel="stylesheet"/>
|
||
<style>
|
||
.highlight pre {
|
||
padding: .8em 1em;
|
||
font: 14px/20px Consolas, Monaco, 'Andale Mono', monospace;
|
||
border: 1px solid #e5e8ec;
|
||
border-radius: 3px;
|
||
background-color: #21221d;
|
||
background-image: -webkit-linear-gradient(#21221d 50%, #272822 50%);
|
||
background-image: -moz-linear-gradient(#21221d 50%, #272822 50%);
|
||
background-image: -ms-linear-gradient(#21221d 50%, #272822 50%);
|
||
background-image: -o-linear-gradient(#21221d 50%, #272822 50%);
|
||
background-image: linear-gradient(#21221d 50%, #272822 50%);
|
||
background-size: 40px 40px;
|
||
background-origin: content-box;
|
||
overflow: auto;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
|
||
.highlight pre > code {
|
||
font-family: inherit;
|
||
direction: ltr;
|
||
text-align: left;
|
||
white-space: pre;
|
||
word-spacing: normal;
|
||
vertical-align: 2px;
|
||
display: block;
|
||
-moz-tab-size: 2;
|
||
-o-tab-size: 2;
|
||
tab-size: 2;
|
||
-webkit-hyphens: none;
|
||
-moz-hyphens: none;
|
||
-ms-hyphens: none;
|
||
hyphens: none;
|
||
color: #E5E5C2;
|
||
}
|
||
</style>
|
||
<style>
|
||
/*
|
||
|
||
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
|
||
|
||
*/
|
||
|
||
.hljs {
|
||
display: block;
|
||
overflow-x: auto;
|
||
padding: 0.5em;
|
||
background: #23241f;
|
||
-webkit-text-size-adjust: none;
|
||
}
|
||
|
||
.hljs,
|
||
.hljs-tag,
|
||
.css .hljs-rule,
|
||
.css .hljs-value,
|
||
.aspectj .hljs-function,
|
||
.css .hljs-function
|
||
.hljs-preprocessor,
|
||
.hljs-pragma {
|
||
color: #f8f8f2;
|
||
}
|
||
|
||
.hljs-strongemphasis,
|
||
.hljs-strong,
|
||
.hljs-emphasis {
|
||
color: #a8a8a2;
|
||
}
|
||
|
||
.hljs-bullet,
|
||
.hljs-blockquote,
|
||
.hljs-horizontal_rule,
|
||
.hljs-number,
|
||
.hljs-regexp,
|
||
.alias .hljs-keyword,
|
||
.hljs-literal,
|
||
.hljs-hexcolor {
|
||
color: #ae81ff;
|
||
}
|
||
|
||
.hljs-code,
|
||
.hljs-title,
|
||
.css .hljs-class,
|
||
.hljs-class .hljs-title:last-child {
|
||
color: #a6e22e;
|
||
/*color: #e6db74;*/
|
||
}
|
||
|
||
.hljs-link_url {
|
||
font-size: 80%;
|
||
}
|
||
|
||
.hljs-strong,
|
||
.hljs-strongemphasis {
|
||
font-weight: bold;
|
||
}
|
||
|
||
.hljs-emphasis,
|
||
.hljs-strongemphasis,
|
||
.hljs-class .hljs-title:last-child,
|
||
.hljs-typename {
|
||
font-style: italic;
|
||
}
|
||
|
||
.hljs-keyword,
|
||
.ruby .hljs-class .hljs-keyword:first-child,
|
||
.ruby .hljs-function .hljs-keyword,
|
||
.hljs-function,
|
||
.hljs-change,
|
||
.hljs-winutils,
|
||
.hljs-flow,
|
||
.nginx .hljs-title,
|
||
.tex .hljs-special,
|
||
.hljs-header,
|
||
.hljs-symbol,
|
||
.hljs-symbol .hljs-string,
|
||
.hljs-tag .hljs-title,
|
||
.hljs-value,
|
||
.alias .hljs-keyword:first-child,
|
||
.css .hljs-tag,
|
||
.css .unit,
|
||
.css .hljs-important {
|
||
color: #f92672;
|
||
}
|
||
|
||
.hljs-function .hljs-keyword,
|
||
.hljs-class .hljs-keyword:first-child,
|
||
.hljs-aspect .hljs-keyword:first-child,
|
||
.hljs-constant,
|
||
.hljs-typename,
|
||
.hljs-name,
|
||
.css .hljs-attribute {
|
||
color: #66d9ef;
|
||
}
|
||
|
||
.hljs-variable,
|
||
.hljs-params,
|
||
.hljs-class .hljs-title,
|
||
.hljs-aspect .hljs-title {
|
||
color: #f8f8f2;
|
||
}
|
||
|
||
.hljs-tag .hljs-value,
|
||
.hljs-string,
|
||
.css .hljs-id,
|
||
.hljs-subst,
|
||
.hljs-type,
|
||
.ruby .hljs-class .hljs-parent,
|
||
.django .hljs-template_tag,
|
||
.django .hljs-variable,
|
||
.smalltalk .hljs-class,
|
||
.django .hljs-filter .hljs-argument,
|
||
.smalltalk .hljs-localvars,
|
||
.smalltalk .hljs-array,
|
||
.hljs-attr_selector,
|
||
.hljs-pseudo,
|
||
.hljs-addition,
|
||
.hljs-stream,
|
||
.hljs-envvar,
|
||
.apache .hljs-tag,
|
||
.apache .hljs-cbracket,
|
||
.tex .hljs-command,
|
||
.hljs-prompt,
|
||
.hljs-link_label,
|
||
.hljs-link_url {
|
||
color: #e6db74;
|
||
}
|
||
|
||
.hljs-comment,
|
||
.hljs-annotation,
|
||
.hljs-decorator,
|
||
.hljs-pi,
|
||
.hljs-doctype,
|
||
.hljs-deletion,
|
||
.hljs-shebang,
|
||
.apache .hljs-sqbracket,
|
||
.tex .hljs-formula {
|
||
color: #75715e;
|
||
}
|
||
|
||
.coffeescript .javascript,
|
||
.javascript .xml,
|
||
.tex .hljs-formula,
|
||
.xml .javascript,
|
||
.xml .vbscript,
|
||
.xml .css,
|
||
.xml .hljs-cdata,
|
||
.xml .php,
|
||
.php .xml {
|
||
opacity: 0.5;
|
||
}
|
||
/***********/
|
||
.hljs-attribute{
|
||
color: #a6e22e;
|
||
}
|
||
/***** node keyword ******/
|
||
.hljs-built_in{
|
||
color: #3396dc;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|
||
<style>
|
||
.container {
|
||
width: 86%;
|
||
max-width: 1000px;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
}
|
||
|
||
.header p {
|
||
color: #666;
|
||
}
|
||
|
||
.example {
|
||
padding: 20px 0;
|
||
}
|
||
</style>
|
||
|
||
<script>
|
||
// Console-polyfill. MIT license.
|
||
// https://github.com/paulmillr/console-polyfill
|
||
// Make it safe to do console.log() always.
|
||
(function (global) {
|
||
'use strict';
|
||
global.console = global.console || {};
|
||
var con = global.console;
|
||
var prop, method;
|
||
var empty = {};
|
||
var dummy = function () {
|
||
};
|
||
var properties = 'memory'.split(',');
|
||
var methods = ('assert,clear,count,debug,dir,dirxml,error,exception,group,' +
|
||
'groupCollapsed,groupEnd,info,log,markTimeline,profile,profiles,profileEnd,' +
|
||
'show,table,time,timeEnd,timeline,timelineEnd,timeStamp,trace,warn').split(',');
|
||
while (prop = properties.pop()) con[prop] = con[prop] || empty;
|
||
while (method = methods.pop()) con[method] = con[method] || dummy;
|
||
})(typeof window === 'undefined' ? this : window);
|
||
// Using `this` for web workers while maintaining compatibility with browser
|
||
// targeted script loaders such as Browserify or Webpack where the only way to
|
||
// get to the global object is via `window`.
|
||
</script>
|
||
<!--[if lt IE 9]>
|
||
<script src="https://a.alipayobjects.com/??es5-shim/4.0.5/es5-shim.js,es5-shim/4.0.5/es5-sham.js,html5shiv/3.7.2/src/html5shiv.js"></script>
|
||
<![endif]-->
|
||
<script src="https://as.alipayobjects.com/g/component/??modernizr/2.8.3/modernizr.js,fastclick/1.0.6/fastclick.js"></script>
|
||
<script>
|
||
if(!window.Promise) {
|
||
document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
|
||
}
|
||
</script>
|
||
<link rel="stylesheet" href="common.css" />
|
||
</head>
|
||
|
||
<body>
|
||
<div class="container">
|
||
<div class="header">
|
||
<h1>rc-slider@5.2.0</h1>
|
||
|
||
<p>slider ui component for react</p>
|
||
</div>
|
||
<div class="example" id="__react-content"></div>
|
||
|
||
<div class="highlight"><pre><code language="js"><span class="hljs-comment">/* eslint react/no-multi-comp: 0 */</span>
|
||
<span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
|
||
|
||
<span class="hljs-keyword">const</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
|
||
<span class="hljs-keyword">const</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>);
|
||
<span class="hljs-keyword">const</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
|
||
|
||
<span class="hljs-keyword">const</span> style = { width: <span class="hljs-number">400</span>, margin: <span class="hljs-number">50</span> };
|
||
|
||
<span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">log</span>(<span class="hljs-params">value</span>) </span>{
|
||
<span class="hljs-built_in">console</span>.log(value);
|
||
}
|
||
|
||
<span class="hljs-keyword">const</span> CustomizedRange = React.createClass({
|
||
getInitialState() {
|
||
<span class="hljs-keyword">return</span> {
|
||
lowerBound: <span class="hljs-number">20</span>,
|
||
upperBound: <span class="hljs-number">40</span>,
|
||
value: [<span class="hljs-number">20</span>, <span class="hljs-number">40</span>],
|
||
};
|
||
},
|
||
onLowerBoundChange(e) {
|
||
<span class="hljs-keyword">this</span>.setState({ lowerBound: +e.target.value });
|
||
},
|
||
onUpperBoundChange(e) {
|
||
<span class="hljs-keyword">this</span>.setState({ upperBound: +e.target.value });
|
||
},
|
||
onSliderChange(value) {
|
||
log(value);
|
||
<span class="hljs-keyword">this</span>.setState({
|
||
value,
|
||
});
|
||
},
|
||
handleApply() {
|
||
<span class="hljs-keyword">const</span> { lowerBound, upperBound } = <span class="hljs-keyword">this</span>.state;
|
||
<span class="hljs-keyword">this</span>.setState({ value: [lowerBound, upperBound] });
|
||
},
|
||
render() {
|
||
<span class="hljs-keyword">return</span> (
|
||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>LowerBound: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.lowerBound}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onLowerBoundChange}</span> /></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>UpperBound: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.upperBound}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onUpperBoundChange}</span> /></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">button</span> <span class="hljs-attribute">onClick</span>=<span class="hljs-value">{this.handleApply}</span>></span>Apply<span class="hljs-tag"></<span class="hljs-title">button</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">allowCross</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.value}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span> /></span>
|
||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||
)</span>;
|
||
},
|
||
});
|
||
|
||
<span class="hljs-keyword">const</span> DynamicBounds = React.createClass({
|
||
getInitialState() {
|
||
<span class="hljs-keyword">return</span> {
|
||
min: <span class="hljs-number">0</span>,
|
||
max: <span class="hljs-number">100</span>,
|
||
};
|
||
},
|
||
onSliderChange(value) {
|
||
log(value);
|
||
},
|
||
onMinChange(e) {
|
||
<span class="hljs-keyword">this</span>.setState({
|
||
min: +e.target.value || <span class="hljs-number">0</span>,
|
||
});
|
||
},
|
||
onMaxChange(e) {
|
||
<span class="hljs-keyword">this</span>.setState({
|
||
max: +e.target.value || <span class="hljs-number">100</span>,
|
||
});
|
||
},
|
||
render() {
|
||
<span class="hljs-keyword">return</span> (
|
||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Min: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMinChange}</span> /></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">label</span>></span>Max: <span class="hljs-tag"></<span class="hljs-title">label</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">input</span> <span class="hljs-attribute">type</span>=<span class="hljs-value">"number"</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{this.state.max}</span> <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onMaxChange}</span> /></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">br</span> /></span><span class="hljs-tag"><<span class="hljs-title">br</span> /></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">50</span>]} <span class="hljs-attribute">min</span>=<span class="hljs-value">{this.state.min}</span> <span class="hljs-attribute">max</span>=<span class="hljs-value">{this.state.max}</span>
|
||
<span class="hljs-attribute">onChange</span>=<span class="hljs-value">{this.onSliderChange}</span>
|
||
/></span>
|
||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||
)</span>;
|
||
},
|
||
});
|
||
|
||
ReactDOM.render(
|
||
<span class="xml"><span class="hljs-tag"><<span class="hljs-title">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Range，`allowCross=false`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">allowCross</span>=<span class="hljs-value">{false}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[0,</span> <span class="hljs-attribute">20</span>]} <span class="hljs-attribute">onChange</span>=<span class="hljs-value">{log}</span> /></span>
|
||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Range，`step=20` <span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">20</span>]} <span class="hljs-attribute">onBeforeChange</span>=<span class="hljs-value">{log}</span> /></span>
|
||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Basic Range，`step=20, dots` <span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">dots</span> <span class="hljs-attribute">step</span>=<span class="hljs-value">{20}</span> <span class="hljs-attribute">defaultValue</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</span>]} <span class="hljs-attribute">onAfterChange</span>=<span class="hljs-value">{log}</span> /></span>
|
||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Controlled Range<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</span>]} /></span>
|
||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Multi Range<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">Slider</span> <span class="hljs-attribute">range</span>=<span class="hljs-value">{3}</span> <span class="hljs-attribute">value</span>=<span class="hljs-value">{[20,</span> <span class="hljs-attribute">40</span>, <span class="hljs-attribute">60</span>, <span class="hljs-attribute">80</span>]} /></span>
|
||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Customized Range<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">CustomizedRange</span> /></span>
|
||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">div</span> <span class="hljs-attribute">style</span>=<span class="hljs-value">{style}</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">p</span>></span>Range with dynamic `max` `min`<span class="hljs-tag"></<span class="hljs-title">p</span>></span>
|
||
<span class="hljs-tag"><<span class="hljs-title">DynamicBounds</span> /></span>
|
||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||
<span class="hljs-tag"></<span class="hljs-title">div</span>></span>
|
||
, document.getElementById('__react-content'));
|
||
</span></code></pre></div>
|
||
</div>
|
||
<a href="http://github.com/react-component/slider">
|
||
<img style="position: absolute; top: 0; right: 0; border: 0;"
|
||
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
|
||
alt="Fork me on GitHub"
|
||
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png">
|
||
</a>
|
||
<script>FastClick.attach(document.body);</script>
|
||
<script src="common.js?nowrap"></script>
|
||
<script src="range.js?nowrap"></script>
|
||
</body>
|
||
|
||
</html>
|