mirror of
https://github.com/wassname/slider.git
synced 2026-09-09 11:35:22 +08:00
933 lines
28 KiB
HTML
933 lines
28 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta name="viewport"
|
|
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
|
|
<meta charset="utf-8"/>
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<link href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.css" rel="stylesheet"/>
|
|
<title>rc-slider@5.4.0 - slider ui component for react</title>
|
|
<style>
|
|
@font-face {
|
|
font-family: octicons-anchor;
|
|
src: url(data:font/woff;charset=utf-8;base64,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) format('woff');
|
|
}
|
|
|
|
.markdown-body, .examples, #readme {
|
|
-webkit-text-size-adjust: 100%;
|
|
-ms-text-size-adjust: 100%;
|
|
text-size-adjust: 100%;
|
|
color: #333;
|
|
overflow: hidden;
|
|
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.markdown-body a, .examples a {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.markdown-body a:active,
|
|
.markdown-body a:hover {
|
|
outline: 0;
|
|
}
|
|
|
|
.markdown-body strong {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.markdown-body h1 {
|
|
font-size: 2em;
|
|
margin: 0.67em 0;
|
|
}
|
|
|
|
.markdown-body img {
|
|
border: 0;
|
|
}
|
|
|
|
.markdown-body hr {
|
|
box-sizing: content-box;
|
|
height: 0;
|
|
}
|
|
|
|
.markdown-body pre {
|
|
overflow: auto;
|
|
}
|
|
|
|
.markdown-body code,
|
|
.markdown-body kbd,
|
|
.markdown-body pre {
|
|
font-family: monospace, monospace;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.markdown-body input {
|
|
color: inherit;
|
|
font: inherit;
|
|
margin: 0;
|
|
}
|
|
|
|
.markdown-body html input[disabled] {
|
|
cursor: default;
|
|
}
|
|
|
|
.markdown-body input {
|
|
line-height: normal;
|
|
}
|
|
|
|
.markdown-body input[type="checkbox"] {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
}
|
|
|
|
.markdown-body table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
}
|
|
|
|
.markdown-body td,
|
|
.markdown-body th {
|
|
padding: 0;
|
|
}
|
|
|
|
.markdown-body * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.markdown-body input {
|
|
font: 13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
|
|
}
|
|
|
|
.markdown-body a {
|
|
color: #4078c0;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.markdown-body a:hover,
|
|
.markdown-body a:active {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.markdown-body hr {
|
|
height: 0;
|
|
margin: 15px 0;
|
|
overflow: hidden;
|
|
background: transparent;
|
|
border: 0;
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
.markdown-body hr:before {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
|
|
.markdown-body hr:after {
|
|
display: table;
|
|
clear: both;
|
|
content: "";
|
|
}
|
|
|
|
.markdown-body h1,
|
|
.markdown-body h2,
|
|
.markdown-body h3,
|
|
.markdown-body h4,
|
|
.markdown-body h5,
|
|
.markdown-body h6 {
|
|
margin-top: 15px;
|
|
margin-bottom: 15px;
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.markdown-body h1 {
|
|
font-size: 30px;
|
|
}
|
|
|
|
.markdown-body h2 {
|
|
font-size: 21px;
|
|
}
|
|
|
|
.markdown-body h3 {
|
|
font-size: 16px;
|
|
}
|
|
|
|
.markdown-body h4 {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.markdown-body h5 {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.markdown-body h6 {
|
|
font-size: 11px;
|
|
}
|
|
|
|
.markdown-body blockquote {
|
|
margin: 0;
|
|
}
|
|
|
|
.markdown-body ul,
|
|
.markdown-body ol {
|
|
padding: 0;
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.markdown-body ol ol,
|
|
.markdown-body ul ol {
|
|
list-style-type: lower-roman;
|
|
}
|
|
|
|
.markdown-body ul ul ol,
|
|
.markdown-body ul ol ol,
|
|
.markdown-body ol ul ol,
|
|
.markdown-body ol ol ol {
|
|
list-style-type: lower-alpha;
|
|
}
|
|
|
|
.markdown-body dd {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.markdown-body code {
|
|
font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.markdown-body pre {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
|
}
|
|
|
|
.markdown-body .octicon {
|
|
font: normal normal normal 16px/1 octicons-anchor;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
text-rendering: auto;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
.markdown-body .octicon-link:before {
|
|
content: '\f05c';
|
|
}
|
|
|
|
.markdown-body > *:first-child {
|
|
margin-top: 0 !important;
|
|
}
|
|
|
|
.markdown-body > *:last-child {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.markdown-body a:not([href]) {
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.markdown-body .anchor {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
display: block;
|
|
padding-right: 6px;
|
|
padding-left: 30px;
|
|
margin-left: -30px;
|
|
}
|
|
|
|
.markdown-body .anchor:focus {
|
|
outline: none;
|
|
}
|
|
|
|
.markdown-body h1,
|
|
.markdown-body h2,
|
|
.markdown-body h3,
|
|
.markdown-body h4,
|
|
.markdown-body h5,
|
|
.markdown-body h6 {
|
|
position: relative;
|
|
margin-top: 1em;
|
|
margin-bottom: 16px;
|
|
font-weight: bold;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.markdown-body h1 .octicon-link,
|
|
.markdown-body h2 .octicon-link,
|
|
.markdown-body h3 .octicon-link,
|
|
.markdown-body h4 .octicon-link,
|
|
.markdown-body h5 .octicon-link,
|
|
.markdown-body h6 .octicon-link {
|
|
display: none;
|
|
color: #000;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.markdown-body h1:hover .anchor,
|
|
.markdown-body h2:hover .anchor,
|
|
.markdown-body h3:hover .anchor,
|
|
.markdown-body h4:hover .anchor,
|
|
.markdown-body h5:hover .anchor,
|
|
.markdown-body h6:hover .anchor {
|
|
padding-left: 8px;
|
|
margin-left: -30px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.markdown-body h1:hover .anchor .octicon-link,
|
|
.markdown-body h2:hover .anchor .octicon-link,
|
|
.markdown-body h3:hover .anchor .octicon-link,
|
|
.markdown-body h4:hover .anchor .octicon-link,
|
|
.markdown-body h5:hover .anchor .octicon-link,
|
|
.markdown-body h6:hover .anchor .octicon-link {
|
|
display: inline-block;
|
|
}
|
|
|
|
.markdown-body h1 {
|
|
padding-bottom: 0.3em;
|
|
font-size: 2.25em;
|
|
line-height: 1.2;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.markdown-body h1 .anchor {
|
|
line-height: 1;
|
|
}
|
|
|
|
.markdown-body h2 {
|
|
padding-bottom: 0.3em;
|
|
font-size: 1.75em;
|
|
line-height: 1.225;
|
|
border-bottom: 1px solid #eee;
|
|
}
|
|
|
|
.markdown-body h2 .anchor {
|
|
line-height: 1;
|
|
}
|
|
|
|
.markdown-body h3 {
|
|
font-size: 1.5em;
|
|
line-height: 1.43;
|
|
}
|
|
|
|
.markdown-body h3 .anchor {
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.markdown-body h4 {
|
|
font-size: 1.25em;
|
|
}
|
|
|
|
.markdown-body h4 .anchor {
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.markdown-body h5 {
|
|
font-size: 1em;
|
|
}
|
|
|
|
.markdown-body h5 .anchor {
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.markdown-body h6 {
|
|
font-size: 1em;
|
|
color: #777;
|
|
}
|
|
|
|
.markdown-body h6 .anchor {
|
|
line-height: 1.1;
|
|
}
|
|
|
|
.markdown-body p,
|
|
.markdown-body blockquote,
|
|
.markdown-body ul,
|
|
.markdown-body ol,
|
|
.markdown-body dl,
|
|
.markdown-body table,
|
|
.markdown-body pre {
|
|
margin-top: 0;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.markdown-body hr {
|
|
height: 4px;
|
|
padding: 0;
|
|
margin: 16px 0;
|
|
background-color: #e7e7e7;
|
|
border: 0 none;
|
|
}
|
|
|
|
.markdown-body ul,
|
|
.markdown-body ol {
|
|
padding-left: 2em;
|
|
}
|
|
|
|
.markdown-body ul ul,
|
|
.markdown-body ul ol,
|
|
.markdown-body ol ol,
|
|
.markdown-body ol ul {
|
|
margin-top: 0;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.markdown-body li > p {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
.markdown-body dl {
|
|
padding: 0;
|
|
}
|
|
|
|
.markdown-body dl dt {
|
|
padding: 0;
|
|
margin-top: 16px;
|
|
font-size: 1em;
|
|
font-style: italic;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.markdown-body dl dd {
|
|
padding: 0 16px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.markdown-body blockquote {
|
|
padding: 0 15px;
|
|
color: #777;
|
|
border-left: 4px solid #ddd;
|
|
}
|
|
|
|
.markdown-body blockquote > :first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.markdown-body blockquote > :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.markdown-body table {
|
|
display: block;
|
|
width: 100%;
|
|
overflow: auto;
|
|
word-break: normal;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.markdown-body table th {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.markdown-body table th,
|
|
.markdown-body table td {
|
|
padding: 6px 13px;
|
|
border: 1px solid #ddd;
|
|
}
|
|
|
|
.markdown-body table tr {
|
|
background-color: #fff;
|
|
border-top: 1px solid #ccc;
|
|
}
|
|
|
|
.markdown-body table tr:nth-child(2n) {
|
|
background-color: #f8f8f8;
|
|
}
|
|
|
|
.markdown-body img {
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.markdown-body code {
|
|
padding: 0;
|
|
padding-top: 0.2em;
|
|
padding-bottom: 0.2em;
|
|
margin: 0;
|
|
font-size: 85%;
|
|
background-color: rgba(0, 0, 0, 0.04);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.markdown-body code:before,
|
|
.markdown-body code:after {
|
|
letter-spacing: -0.2em;
|
|
content: "\00a0";
|
|
}
|
|
|
|
.markdown-body pre > code {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-size: 100%;
|
|
word-break: normal;
|
|
white-space: pre;
|
|
background: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.markdown-body .highlight {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.markdown-body .highlight pre,
|
|
.markdown-body pre {
|
|
padding: 16px;
|
|
overflow: auto;
|
|
font-size: 85%;
|
|
line-height: 1.45;
|
|
background-color: #f7f7f7;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.markdown-body .highlight pre {
|
|
margin-bottom: 0;
|
|
word-break: normal;
|
|
}
|
|
|
|
.markdown-body pre {
|
|
word-wrap: normal;
|
|
}
|
|
|
|
.markdown-body pre code {
|
|
display: inline;
|
|
max-width: initial;
|
|
padding: 0;
|
|
margin: 0;
|
|
overflow: initial;
|
|
line-height: inherit;
|
|
word-wrap: normal;
|
|
background-color: transparent;
|
|
border: 0;
|
|
}
|
|
|
|
.markdown-body pre code:before,
|
|
.markdown-body pre code:after {
|
|
content: normal;
|
|
}
|
|
|
|
.markdown-body kbd {
|
|
display: inline-block;
|
|
padding: 3px 5px;
|
|
font-size: 11px;
|
|
line-height: 10px;
|
|
color: #555;
|
|
vertical-align: middle;
|
|
background-color: #fcfcfc;
|
|
border: solid 1px #ccc;
|
|
border-bottom-color: #bbb;
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 -1px 0 #bbb;
|
|
}
|
|
|
|
.markdown-body kbd {
|
|
display: inline-block;
|
|
padding: 3px 5px;
|
|
font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
|
line-height: 10px;
|
|
color: #555;
|
|
vertical-align: middle;
|
|
background-color: #fcfcfc;
|
|
border: solid 1px #ccc;
|
|
border-bottom-color: #bbb;
|
|
border-radius: 3px;
|
|
box-shadow: inset 0 -1px 0 #bbb;
|
|
}
|
|
|
|
.markdown-body .task-list-item {
|
|
list-style-type: none;
|
|
}
|
|
|
|
.markdown-body .task-list-item + .task-list-item {
|
|
margin-top: 3px;
|
|
}
|
|
|
|
.markdown-body .task-list-item input {
|
|
margin: 0 0.35em 0.25em -1.6em;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.markdown-body:checked + .radio-label {
|
|
z-index: 1;
|
|
position: relative;
|
|
border-color: #4078c0;
|
|
}
|
|
|
|
#readme, .examples {
|
|
min-width: 200px;
|
|
max-width: 790px;
|
|
margin: 30px auto;
|
|
padding: 0 30px;
|
|
}
|
|
|
|
#readme .boxed-group {
|
|
position: relative;
|
|
border-radius: 3px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
#readme .markdown-body,
|
|
#readme .plain,
|
|
.examples .examples-body {
|
|
background-color: #fff;
|
|
border: 1px solid #ddd;
|
|
border-bottom-left-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
padding: 30px;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
.boxed-group > h3,
|
|
.examples > h3,
|
|
.boxed-group .heading {
|
|
background-color: #f5f5f5;
|
|
margin: 0;
|
|
border-radius: 3px 3px 0 0;
|
|
border: 1px solid #d8d8d8;
|
|
border-bottom: 0;
|
|
padding: 9px 10px 10px;
|
|
font-size: 14px;
|
|
line-height: 17px;
|
|
display: block;
|
|
}
|
|
|
|
.examples-body ul {
|
|
margin: 0;
|
|
}
|
|
</style>
|
|
<style type="text/css">
|
|
/*
|
|
|
|
github.com style (c) Vasily Polovnyov <vast@whiteants.net>
|
|
|
|
*/
|
|
|
|
.hljs {
|
|
display: block;
|
|
overflow-x: auto;
|
|
padding: 0.5em;
|
|
color: #333;
|
|
background: #f8f8f8;
|
|
-webkit-text-size-adjust: none;
|
|
}
|
|
|
|
.hljs-comment,
|
|
.diff .hljs-header {
|
|
color: #998;
|
|
font-style: italic;
|
|
}
|
|
|
|
.hljs-keyword,
|
|
.css .rule .hljs-keyword,
|
|
.hljs-winutils,
|
|
.nginx .hljs-title,
|
|
.hljs-subst,
|
|
.hljs-request,
|
|
.hljs-status {
|
|
color: #333;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hljs-number,
|
|
.hljs-hexcolor,
|
|
.ruby .hljs-constant {
|
|
color: #008080;
|
|
}
|
|
|
|
.hljs-string,
|
|
.hljs-tag .hljs-value,
|
|
.hljs-doctag,
|
|
.tex .hljs-formula {
|
|
color: #d14;
|
|
}
|
|
|
|
.hljs-title,
|
|
.hljs-id,
|
|
.scss .hljs-preprocessor {
|
|
color: #900;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hljs-list .hljs-keyword,
|
|
.hljs-subst {
|
|
font-weight: normal;
|
|
}
|
|
|
|
.hljs-class .hljs-title,
|
|
.hljs-type,
|
|
.vhdl .hljs-literal,
|
|
.tex .hljs-command {
|
|
color: #458;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hljs-tag,
|
|
.hljs-tag .hljs-title,
|
|
.hljs-rule .hljs-property,
|
|
.django .hljs-tag .hljs-keyword {
|
|
color: #000080;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.hljs-attribute,
|
|
.hljs-variable,
|
|
.lisp .hljs-body,
|
|
.hljs-name {
|
|
color: #008080;
|
|
}
|
|
|
|
.hljs-regexp {
|
|
color: #009926;
|
|
}
|
|
|
|
.hljs-symbol,
|
|
.ruby .hljs-symbol .hljs-string,
|
|
.lisp .hljs-keyword,
|
|
.clojure .hljs-keyword,
|
|
.scheme .hljs-keyword,
|
|
.tex .hljs-special,
|
|
.hljs-prompt {
|
|
color: #990073;
|
|
}
|
|
|
|
.hljs-built_in {
|
|
color: #0086b3;
|
|
}
|
|
|
|
.hljs-preprocessor,
|
|
.hljs-pragma,
|
|
.hljs-pi,
|
|
.hljs-doctype,
|
|
.hljs-shebang,
|
|
.hljs-cdata {
|
|
color: #999;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hljs-deletion {
|
|
background: #fdd;
|
|
}
|
|
|
|
.hljs-addition {
|
|
background: #dfd;
|
|
}
|
|
|
|
.diff .hljs-change {
|
|
background: #0086b3;
|
|
}
|
|
|
|
.hljs-chunk {
|
|
color: #aaa;
|
|
}
|
|
|
|
.header {
|
|
min-width: 200px;
|
|
max-width: 790px;
|
|
margin:0 auto;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="header">
|
|
<h1>rc-slider@5.4.0</h1>
|
|
</div>
|
|
<div class="examples">
|
|
<h3>EXAMPLES</h3>
|
|
<div class="examples-body">
|
|
<ul>
|
|
|
|
<li><a href="examples/custom-handles.html">custom-handles</a></li>
|
|
|
|
<li><a href="examples/marks.html">marks</a></li>
|
|
|
|
<li><a href="examples/range.html">range</a></li>
|
|
|
|
<li><a href="examples/slider.html">slider</a></li>
|
|
|
|
<li><a href="examples/v-marks.html">v-marks</a></li>
|
|
|
|
<li><a href="examples/v-range.html">v-range</a></li>
|
|
|
|
<li><a href="examples/v-slider.html">v-slider</a></li>
|
|
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div id="readme" class="boxed-group">
|
|
<h3>README.md</h3>
|
|
<div class="markdown-body">
|
|
<h1>rc-slider<a id="user-content-rc-slider" name="rc-slider" class="anchor" aria-hidden="true" href="#rc-slider"><span class="octicon octicon-link"></span></a></h1><hr>
|
|
<p>slider ui component for react</p>
|
|
<p><a href="http://npmjs.org/package/rc-slider" title="null"><img src="http://img.shields.io/npm/v/rc-slider.svg?style=flat-square" alt="NPM version"></a>
|
|
<a href="https://travis-ci.org/react-component/slider" title="null"><img src="https://img.shields.io/travis/react-component/slider.svg?style=flat-square" alt="build status"></a>
|
|
<a href="https://coveralls.io/r/react-component/slider?branch=master" title="null"><img src="https://img.shields.io/coveralls/react-component/slider.svg?style=flat-square" alt="Test coverage"></a>
|
|
<a href="https://gemnasium.com/react-component/slider" title="null"><img src="http://img.shields.io/gemnasium/react-component/slider.svg?style=flat-square" alt="gemnasium deps"></a>
|
|
<a href="http://nodejs.org/download/" title="null"><img src="https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square" alt="node version"></a>
|
|
<a href="https://npmjs.org/package/rc-slider" title="null"><img src="https://img.shields.io/npm/dm/rc-slider.svg?style=flat-square" alt="npm download"></a>
|
|
<a href="https://saucelabs.com/u/rc-slider" title="null"><img src="https://saucelabs.com/buildstatus/rc-slider" alt="Sauce Test Status"></a></p>
|
|
<p><a href="https://saucelabs.com/u/rc-slider" title="null"><img src="https://saucelabs.com/browser-matrix/rc-slider.svg" alt="Sauce Test Status"></a></p>
|
|
<h2>Screenshots<a id="user-content-screenshots" name="screenshots" class="anchor" aria-hidden="true" href="#screenshots"><span class="octicon octicon-link"></span></a></h2><p><img src="https://t.alipayobjects.com/images/T1ki8fXeprXXXXXXXX.png" width="550"/></p>
|
|
<p><img src="https://t.alipayobjects.com/images/T1pPhfXhBqXXXXXXXX.png" width="550"/></p>
|
|
<p><img src="https://t.alipayobjects.com/images/T1wO8fXd4rXXXXXXXX.png" width="550"/></p>
|
|
<p><img src="http://i.giphy.com/l46Cs36c9HrHMExoc.gif"/></p>
|
|
<h2>Feature<a id="user-content-feature" name="feature" class="anchor" aria-hidden="true" href="#feature"><span class="octicon octicon-link"></span></a></h2><ul>
|
|
<li>support ie8,ie8+,chrome,firefox,safari</li>
|
|
</ul>
|
|
<h3>Keyboard<a id="user-content-keyboard" name="keyboard" class="anchor" aria-hidden="true" href="#keyboard"><span class="octicon octicon-link"></span></a></h3><h2>install<a id="user-content-install" name="install" class="anchor" aria-hidden="true" href="#install"><span class="octicon octicon-link"></span></a></h2><p><a href="https://npmjs.org/package/rc-slider" title="null"><img src="https://nodei.co/npm/rc-slider.png" alt="rc-slider"></a></p>
|
|
<h2>Usage<a id="user-content-usage" name="usage" class="anchor" aria-hidden="true" href="#usage"><span class="octicon octicon-link"></span></a></h2><div class="highlight"><pre><code language="js"><span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider/assets/index.css'</span>);
|
|
|
|
<span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
|
|
<span class="hljs-keyword">var</span> ReactDOM = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react-dom'</span>);
|
|
<span class="hljs-keyword">var</span> Slider = <span class="hljs-built_in">require</span>(<span class="hljs-string">'rc-slider'</span>);
|
|
ReactDOM.render(<span class="xml"><span class="hljs-tag"><<span class="hljs-title">Slider</span> /></span>, container);</span></code></pre></div><h2>API<a id="user-content-api" name="api" class="anchor" aria-hidden="true" href="#api"><span class="octicon octicon-link"></span></a></h2><h3>props<a id="user-content-props" name="props" class="anchor" aria-hidden="true" href="#props"><span class="octicon octicon-link"></span></a></h3><table class="table table-bordered table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 100px;">name</th>
|
|
<th style="width: 50px;">type</th>
|
|
<th style="width: 50px;">default</th>
|
|
<th>description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>className</td>
|
|
<td>String</td>
|
|
<td>rc-slider</td>
|
|
<td>Additional css class for the root dom node</td>
|
|
</tr>
|
|
<tr>
|
|
<td>min</td>
|
|
<td>number</td>
|
|
<td>0</td>
|
|
<td>The minimum value of the slider</td>
|
|
</tr>
|
|
<tr>
|
|
<td>max</td>
|
|
<td>number</td>
|
|
<td>100</td>
|
|
<td>The maximum value of the slider</td>
|
|
</tr>
|
|
<tr>
|
|
<td>marks</td>
|
|
<td>object{number: string} or object{number: object{ style, label }}</td>
|
|
<td>{}</td>
|
|
<td>Mark on the slider. The key determines the position, and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains <code>style</code> and <code>label</code> properties.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>step</td>
|
|
<td>number or <code>null</code></td>
|
|
<td>1</td>
|
|
<td>Value to be added or subtracted on each step the slider makes. Must be greater than zero. max - min should be evenly divisible by the step value. When <code>marks</code> is not an empty object, <code>step</code> can be set to <code>null</code>, to make marks as steps.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>range</td>
|
|
<td>boolean or number</td>
|
|
<td>false</td>
|
|
<td>Determines the type of slider. If range is <code>true</code>, two handles will be rendered in order to select a range. If range is a number, multiple handles will be rendered (number + 1). Using <code>range={true}</code> is equivalent to <code>range={1}</code>.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>allowCross</td>
|
|
<td>boolean</td>
|
|
<td>true</td>
|
|
<td>When <code>range</code> is <code>true</code>, <code>allowCross</code> could be set as <code>true</code> to allow those handles to cross.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>pushable</td>
|
|
<td>boolean or number</td>
|
|
<td>true</td>
|
|
<td>When <code>range</code> is <code>true</code>, <code>pushable</code> could be set as <code>true</code> to allow pushing of surrounding handles when moving an handle. When set to a number, the number will be the minimum ensured distance between handles. Example: <img src="http://i.giphy.com/l46Cs36c9HrHMExoc.gif"/></td>
|
|
</tr>
|
|
<tr>
|
|
<td>vertical</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>If vertical is <code>true</code>, the slider will be vertical.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>defaultValue</td>
|
|
<td>number or [number, number, ...]</td>
|
|
<td>0 or [0, 0]</td>
|
|
<td>Set initial positions of handles. If range is <code>false</code>, the type of <code>defaultValue</code> should be <code>number</code>. Otherwise, <code>[number, number, ...]</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>value</td>
|
|
<td>number or [number, number, ...]</td>
|
|
<td></td>
|
|
<td>Set current positions of handles. If range is <code>false</code>, the type of <code>defaultValue</code> should be <code>number</code>. Otherwise, <code>[number, number, ...]</code></td>
|
|
</tr>
|
|
<tr>
|
|
<td>handle</td>
|
|
<td>Component</td>
|
|
<td></td>
|
|
<td>Provide a custom Handle to use in the slider by passing a component. This component will have a <code>value</code> and <code>offset</code> props used to define custom styling/content.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>included</td>
|
|
<td>boolean</td>
|
|
<td>true</td>
|
|
<td>If the value is <code>true</code>, it means a continuous value interval, otherwise, it is a independent value.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>disabled</td>
|
|
<td>boolean</td>
|
|
<td>false</td>
|
|
<td>If <code>true</code>, handles can't be moved.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>tipTransitionName</td>
|
|
<td>string</td>
|
|
<td>''</td>
|
|
<td>Set the animation for tooltip if it shows.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>tipFormatter</td>
|
|
<td>function or <code>null</code></td>
|
|
<td></td>
|
|
<td>Format the value of the tooltip if it shows. If <code>null</code> the tooltip will always be hidden. When given a function, the first argument will be the value and the second will be the index of the slider handle.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>dots</td>
|
|
<td>bool</td>
|
|
<td>false</td>
|
|
<td>When the <code>step</code> value is greater than 1, you can set the <code>dots</code> to <code>true</code> if you want to render the slider with dots.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onChange</td>
|
|
<td>function</td>
|
|
<td>NOOP</td>
|
|
<td><code>onChange</code> will be triggered while the value of Slider changing.</td>
|
|
</tr>
|
|
<tr>
|
|
<td>onAfterChange</td>
|
|
<td>function</td>
|
|
<td>NOOP</td>
|
|
<td><code>onAfterChange</code> will be triggered when <code>ontouchend</code> or <code>onmouseup</code> is triggered.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>Development<a id="user-content-development" name="development" class="anchor" aria-hidden="true" href="#development"><span class="octicon octicon-link"></span></a></h2><div class="highlight"><pre><code language="undefined">npm install
|
|
npm start</code></pre></div><h2>Example<a id="user-content-example" name="example" class="anchor" aria-hidden="true" href="#example"><span class="octicon octicon-link"></span></a></h2><p><a href="http://localhost:8005/examples/" title="null">http://localhost:8005/examples/</a></p>
|
|
<p>online example: <a href="http://react-component.github.io/slider/" title="null">http://react-component.github.io/slider/</a></p>
|
|
<h2>Test Case<a id="user-content-test-case" name="test-case" class="anchor" aria-hidden="true" href="#test-case"><span class="octicon octicon-link"></span></a></h2><p><a href="http://localhost:8005/tests/runner.html?coverage" title="null">http://localhost:8005/tests/runner.html?coverage</a></p>
|
|
<h2>Coverage<a id="user-content-coverage" name="coverage" class="anchor" aria-hidden="true" href="#coverage"><span class="octicon octicon-link"></span></a></h2><p><a href="http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage" title="null">http://localhost:8005/node_modules/rc-server/node_modules/node-jscover/lib/front-end/jscoverage.html?w=http://localhost:8088/tests/runner.html?coverage</a></p>
|
|
<h2>License<a id="user-content-license" name="license" class="anchor" aria-hidden="true" href="#license"><span class="octicon octicon-link"></span></a></h2><p>rc-slider is released under the MIT license.</p>
|
|
|
|
</div>
|
|
</div>
|
|
<a href="http://github.com/react-component/slider"><img style="position: absolute; top: 0; right: 0; border: 0;"
|
|
src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
|
|
alt="Fork me on GitHub"
|
|
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
|
|
</body>
|
|
|
|
</html>
|