apeman-react-range

<html class="react-demo"><head class="ap-head"><meta class="ap-head-meta" charset="UTF-8"/><title class="ap-head-title">apeman-react-range Demo</title><link rel="icon" href="https://raw.githubusercontent.com/apeman-asset-labo/apeman-asset-images/master/dist/favicon/react-favicon.png?v=2.1.0"/><style class="ap-style" type="text/css">.react-demo body { margin: 0; padding: 0; color: #555; background-color: #FAFAFA; } .react-demo .react-demo-playground { display: block; padding: 40px; min-height: 120px; overflow-x: auto; background-image: -moz-linear-gradient(45deg, #F0F0F0 25%, transparent 25%), -moz-linear-gradient(-45deg, #F0F0F0 25%, transparent 25%), -moz-linear-gradient(45deg, transparent 75%, #F0F0F0 75%), -moz-linear-gradient(-45deg, transparent 75%, #F0F0F0 75%); background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.25, #F0F0F0), color-stop(0.25, transparent)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, #F0F0F0), color-stop(0.25, transparent)), -webkit-gradient(linear, 0 100%, 100% 0, color-stop(0.75, transparent), color-stop(0.75, #F0F0F0)), -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.75, transparent), color-stop(0.75, #F0F0F0)); -moz-background-size: 50px 50px; background-size: 50px 50px; -webkit-background-size: 50px 51px; /* override value for shitty webkit */ background-position: 0 0, 25px 0, 25px -25px, 0px 25px; border: 1px solid #CCC; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) inset; } .react-demo .react-demo-container { max-width: 860px; margin: 0 auto; } .react-demo .react-demo-header h1 { text-align: center; margin: 8px 0; font-size: 48px; } .react-demo a:link, .react-demo a:visited { color: #b35600; text-decoration: none; } .react-demo a:link:hover, .react-demo a:visited:hover { text-decoration: underline; } .react-demo .react-demo-src { margin: 0; } .react-demo .syntaxhighlighter { padding: 8px; border-radius: 4px; border: 1px solid #EEE; box-sizing: border-box; } .react-demo .syntaxhighlighter .string, .react-demo .syntaxhighlighter .string a { color: #FF9D43 !important; } .react-demo .syntaxhighlighter .keyword { color: #b35600 !important; } /*# sourceMappingURL=react-demo.css.map */ </style><style class="ap-style" type="text/css">@media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-body{ margin:0;padding:0;font-family:Meiryo, sans-serif;color:#555; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-icon{ display:inline-block;margin:0 2px; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-header-space{ display:block;position:relative;width:100%;height:44px;padding:0;margin:0;box-sizing:border-box; } .ap-header{ position:fixed;left:0;top:0;right:0;height:auto;line-height:44px;text-align:left;background:rgba(255,255,255,0.9);border-bottom:1px solid #F0F0F0;z-index:9; } .ap-header-back{ position:absolute;left:0;top:0;right:0;z-index:-1;height:44px;border-bottom:1px solid #F0F0F0; } .ap-header-logo{ padding:0;margin:0;display:inline-block;font-weight:100;font-size:29px; } .ap-header-logo .ap-header-logo-link,.ap-header-logo .ap-header-logo-link:link{ display:inline-block;padding:0 2px;cursor:default;color:#555555;text-decoration:none; } .ap-header-logo .ap-header-logo-link:active{ opacity:0.8; } .ap-header-tab{ display:flex;box-sizing:border-box;font-size:14px;color:#888;height:36px;line-height:36px; } .ap-header-tab-item{ flex:1;padding:0 8px;text-align:center;box-sizing:border-box;cursor:pointer;display:inline-block;height:36px;border-color:transparent;border-bottom-width:2px; } .ap-header-tab-item:hover{ color:#333; } .ap-header-tab-item:active{ color:#38E; } .ap-header-tab-item-selected,.ap-header-tab-item-selected:hover,.ap-header-tab-item-selected:active{ color:#38E;border-bottom-color:#38E; } @media (min-width: 768px) { .ap-header-logo{ float:left; } .ap-header-tab{ display:inline-block;margin:0 16px;padding:0 8px;height:44px;line-height:44px; } .ap-header-tab-item{ flex:initial;height:44px;padding:0 16px; } } @media (min-width: 992px) { } @media (min-width: 1200px) { }@media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-note{ font-size:12px;color:#666;max-width:480px; } .ap-note a:link, .ap-note a:visited{ text-decoration:underline;color:#666;cursor:pointer; } .ap-note a:link:active{ opacity:0.5; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-footer{ display:block;padding:24px; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-container{ max-width:1024px;margin:0 auto;display:block;padding:0; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-tab{ display:flex;background-color:#FFF; } .ap-tab-item{ display:inline-block;flex:1;text-align:center;padding:8px;border:1px solid #888;margin-right:-1px;position:relative; } .ap-tab-item:hover{ box-sizing:border-box;cursor:pointer; } .ap-tab-item-selected{ color:#38E;border-color:#38E;z-index:2; } .ap-tab-item:active{ color:#38E; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-button{ display:inline-block;padding:0.25em 0.5em;border-radius:2px;margin:4px;color:#38E;border:1px solid #38E;background:#FFF; } .ap-button:hover{ cursor:pointer;opacity:0.98; } .ap-button:active{ box-shadow:1px 1px 2px rgba(0,0,0,0.1) inset; } .ap-button.ap-button-disabled,.ap-button.ap-button-disabled:hover,.ap-button.ap-button-disabled:active{ cursor:default;box-shadow:none;color:#888;border-color:#888;background-color:#F0F0F0; } .ap-button-primary{ color:white;background:#38E; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-checkbox{ display:inline-block;padding:0 4px;cursor:pointer;position:relative; } .ap-checkbox:hover{ opacity:0.9; } .ap-checkbox:active{ opacity:0.75; } .ap-checkbox-input{ display:inline-block;padding:0 2px;position:relative;top:-2px;opacity:0;z-index:8; } .ap-checkbox-icon{ position:absolute;left:2px;top:0; } .ap-checkbox:hover .ap-checkbox-icon{ color:#38E; } .ap-checkbox:active .ap-checkbox-icon{ opacity:0.5; } .ap-checkbox-icon-checked{ color:#38E; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-radio{ display:inline-block;padding:0 4px;cursor:pointer;position:relative; } .ap-radio:hover{ opacity:0.9; } .ap-radio:active{ opacity:0.75; } .ap-radio-input{ display:inline-block;padding:0 2px;position:relative;top:-2px;opacity:0;z-index:8; } .ap-radio-title{ display:inline-block; } .ap-radio-icon{ position:absolute;left:2px;top:0; } .ap-radio:hover .ap-radio-icon{ color:#38E; } .ap-radio:active .ap-radio-icon{ opacity:0.5; } .ap-radio-icon-checked{ color:#38E; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-label{ display:inline-block;padding:4px 8px;font-size:14px;color:#888; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-text{ display:block;padding:4px 8px;border:1px solid #AAA;margin:4px;width:100%;max-width:480px;border-radius:2px;box-shadow:1px 1px 1px rgba(0,0,0,.05) inset; } .ap-text-multiple{ overflow:auto; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-password{ display:block;padding:4px 8px;border:1px solid #AAA;margin:4px;width:100%;max-width:480px;border-radius:2px;box-shadow:1px 1px 1px rgba(0,0,0,.05) inset; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-image{ background-color:#DDD;overflow:hidden;text-align:center;display:inline-block;position:relative; } .ap-image-content{ position:relative;display:inline-block; } .ap-image-spinner{ position:absolute;left:0;top:0;right:0;bottom:0;text-align:center;display:block;z-index:8;background-color:rgba(0,0,0,0.1);color:rgba(255,255,255,0.5); } .ap-image-notfound{ display:block;text-align:center;color:rgba(0,0,0,0.1);font-family:monospace; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-image{ background-color:#DDD;overflow:hidden;text-align:center;display:inline-block;position:relative; } .ap-image-content{ position:relative;display:inline-block; } .ap-image-spinner{ position:absolute;left:0;top:0;right:0;bottom:0;text-align:center;display:block;z-index:8;background-color:rgba(0,0,0,0.1);color:rgba(255,255,255,0.5); } .ap-image-notfound{ display:block;text-align:center;color:rgba(0,0,0,0.1);font-family:monospace; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { } .ap-spinner{ text-align:center;display:none; } .ap-spinner.ap-spinner-enabled{ display:block; } .ap-spinner-icon{ display:inline-block;margin:0 4px; } .ap-spinner-dummy-text{ width:1px;overflow:hidden;display:inline-block;margin-right:-1px;vertical-align:middle;color:transparent;opacity:0;height:100%; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-slider{ position:relative;height:26px; } .ap-slider-inner{ display:flex; } .ap-slider-bar-wrap{ display:block;position:relative;width:100%;box-sizing:border-box; } .ap-slider-bar{ position:absolute;left:0;right:0;height:10px;top:6px; } .ap-slider-bar-bg{ position:absolute;left:0;top:6px;right:0;height:4px;border-radius:2px;border:1px solid #BBB;background-color:#CCC; } .ap-slider-bar-highlight{ background-color:#38E;top:6px;position:absolute;height:4px;border-radius:2px;border:1px solid rgba(0,0,0,0.1); } .ap-slider-handle{ position:relative;display:inline-block;cursor:-webkit-grab; } .ap-slider-handle:before{ position:absolute;display:inline-block;content:b;color:transparent;opacity:0;left:-10%;top:-10%;right:-10%;bottom:-10%; } .ap-slider-handle:active{ cursor:-webkit-grabbing; } .ap-slider-handle-icon{ width:24px;height:24px;border-radius:50%;display:inline-block;background-color:white;border:1px solid #DDD;box-shadow:1px 1px 2px rgba(0,0,0,0.5); } .ap-slider-label{ display:inline-block;padding:2px 4px;text-align:right;min-width:24px;font-size:14px;line-height:26px;box-sizing:border-box; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-range{ position:relative;height:26px; } .ap-range-bar{ position:absolute;left:0;right:0;top:0;height:24px; } .ap-range-bar-bg{ position:absolute;top:10px;left:0;right:0;height:4px;border-radius:2px;border:1px solid #BBB;background-color:#CCC; } .ap-range-bar-highlight{ background-color:#38E;top:9px;position:absolute;height:6px;border-radius:2px;border:1px solid rgba(0,0,0,0.1); } .ap-range-handle{ position:absolute;left:-12px;top:0;display:inline-block;cursor:-webkit-grab; } .ap-range-handle:active{ cursor:-webkit-grabbing;background-color:#FCFCFC; } .ap-range-handle-from{ left:-12px; } .ap-range-handle-to{ left:-12px; } .ap-range-handle-icon{ width:24px;height:24px;border-radius:0;display:inline-block;background-color:white;border:1px solid #DDD;box-shadow:1px 1px 2px rgba(0,0,0,0.5); } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }.ap-accordion{ position:relative;overflow-y:hidden;transition:max-height 300ms;border:1px solid #AAA;background:white;border-radius:4px; } .ap-accordion-header{ padding:0 8px;line-height:44px;height:45px;cursor:pointer;box-sizing:border-box;margin:-1px;border-radius:0 0 4px 4px;border:1px solid #AAA; } .ap-accordion-header:hover{ opacity:0.9; } .ap-accordion-header:active{ opacity:0.66; } .ap-accordion-body{ padding:8px; } .ap-accordion-arrow{ display:inline-block;margin-right:2px;transform:rotate(0deg);transition:transform 300ms; } .ap-accordion-closed{ max-height:44px !important; } .ap-accordion-closed .ap-accordion-arrow{ transform:rotate(-90deg); } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { } </style><style class="ap-style" type="text/css">.ap-range{ position:relative;height:26px; } .ap-range-inner{ display:flex; } .ap-range-bar-wrap{ display:block;position:relative;width:100%;box-sizing:border-box; } .ap-range-bar{ position:absolute;left:0;right:0;top:0;height:24px; } .ap-range-bar-bg{ position:absolute;top:10px;left:0;right:0;height:4px;border-radius:2px;border:1px solid #BBB;background-color:#CCC; } .ap-range-bar-highlight{ background-color:#FFE622;top:9px;position:absolute;height:6px;border-radius:2px;border:1px solid rgba(0,0,0,0.1); } .ap-range-handle{ position:absolute;left:-12px;top:0;display:inline-block;cursor:-webkit-grab; } .ap-range-handle:active{ cursor:-webkit-grabbing;background-color:#FCFCFC; } .ap-range-handle-from{ left:-12px; } .ap-range-handle-to{ left:-12px; } .ap-range-handle-icon{ width:24px;height:24px;border-radius:0;display:inline-block;background-color:white;border:1px solid #DDD;box-shadow:1px 1px 2px rgba(0,0,0,0.5); } .ap-range-label{ display:inline-block;padding:2px 4px;text-align:right;min-width:24px;font-size:14px;line-height:26px;box-sizing:border-box; } @media (min-width: 768px) { } @media (min-width: 992px) { } @media (min-width: 1200px) { }</style></head><body class="ap-body"><div id="demo-style"></div><header class="react-demo-header"><div class="react-demo-container"><h1><a href="https://github.com/apeman-react-labo/apeman-react-range#readme">apeman-react-range</a></h1></div></header><main><div><div class="react-demo-playground"><div class="react-demo-container" id="demo-wrap"><div style="position:relative;"><div class="ap-range"><div class="ap-range-inner"><label class="ap-range-label"><span>0</span></label><div class="ap-range-bar-wrap"><div class="ap-touchable"><div class="ap-range-bar"><div class="ap-range-bar-bg"></div><div class="ap-range-bar-highlight" style="left:0;width:1200px;"></div></div></div><div class="ap-draggable ap-range-handle ap-range-handle-from"><div class="ap-range-handle-icon"></div></div><div class="ap-draggable ap-range-handle ap-range-handle-to"><div class="ap-range-handle-icon"></div></div></div><label class="ap-range-label"><span>100</span></label></div></div><br/><br/><div><span></span></div></div></div></div></div><div class="react-demo-container"><div><pre class="react-demo-src"><div><style scoped="scoped">.syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea { -moz-border-radius: 0 0 0 0 !important; -webkit-border-radius: 0 0 0 0 !important; background: none !important; border: 0 !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; margin: 0 !important; outline: 0 !important; overflow: visible !important; padding: 0 !important; position: static !important; right: auto !important; text-align: left !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; min-height: inherit !important; min-height: auto !important; } .syntaxhighlighter { width: 100% !important; margin: 1em 0 1em 0 !important; position: relative !important; overflow: auto !important; font-size: 1em !important; } .syntaxhighlighter.source { overflow: hidden !important; } .syntaxhighlighter .bold { font-weight: bold !important; } .syntaxhighlighter .italic { font-style: italic !important; } .syntaxhighlighter .line { white-space: pre !important; } .syntaxhighlighter table { width: 100% !important; } .syntaxhighlighter table caption { text-align: left !important; padding: .5em 0 0.5em 1em !important; } .syntaxhighlighter table td.code { width: 100% !important; } .syntaxhighlighter table td.code .container { position: relative !important; } .syntaxhighlighter table td.code .container textarea { box-sizing: border-box !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border: none !important; background: white !important; padding-left: 1em !important; overflow: hidden !important; white-space: pre !important; } .syntaxhighlighter table td.gutter .line { text-align: right !important; padding: 0 0.5em 0 1em !important; } .syntaxhighlighter table td.code .line { padding: 0 1em !important; } .syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line { padding-left: 0em !important; } .syntaxhighlighter.show { display: block !important; } .syntaxhighlighter.collapsed table { display: none !important; } .syntaxhighlighter.collapsed .toolbar { padding: 0.1em 0.8em 0em 0.8em !important; font-size: 1em !important; position: static !important; width: auto !important; height: auto !important; } .syntaxhighlighter.collapsed .toolbar span { display: inline !important; margin-right: 1em !important; } .syntaxhighlighter.collapsed .toolbar span a { padding: 0 !important; display: none !important; } .syntaxhighlighter.collapsed .toolbar span a.expandSource { display: inline !important; } .syntaxhighlighter .toolbar { position: absolute !important; right: 1px !important; top: 1px !important; width: 11px !important; height: 11px !important; font-size: 10px !important; z-index: 10 !important; } .syntaxhighlighter .toolbar span.title { display: inline !important; } .syntaxhighlighter .toolbar a { display: block !important; text-align: center !important; text-decoration: none !important; padding-top: 1px !important; } .syntaxhighlighter .toolbar a.expandSource { display: none !important; } .syntaxhighlighter.ie { font-size: .9em !important; padding: 1px 0 1px 0 !important; } .syntaxhighlighter.ie .toolbar { line-height: 8px !important; } .syntaxhighlighter.ie .toolbar a { padding-top: 0px !important; } .syntaxhighlighter.printing .line.alt1 .content, .syntaxhighlighter.printing .line.alt2 .content, .syntaxhighlighter.printing .line.highlighted .number, .syntaxhighlighter.printing .line.highlighted.alt1 .content, .syntaxhighlighter.printing .line.highlighted.alt2 .content { background: none !important; } .syntaxhighlighter.printing .line .number { color: #bbbbbb !important; } .syntaxhighlighter.printing .line .content { color: black !important; } .syntaxhighlighter.printing .toolbar { display: none !important; } .syntaxhighlighter.printing a { text-decoration: none !important; } .syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a { color: black !important; } .syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a { color: #008200 !important; } .syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a { color: blue !important; } .syntaxhighlighter.printing .keyword { color: #006699 !important; font-weight: bold !important; } .syntaxhighlighter.printing .preprocessor { color: gray !important; } .syntaxhighlighter.printing .variable { color: #aa7700 !important; } .syntaxhighlighter.printing .value { color: #009900 !important; } .syntaxhighlighter.printing .functions { color: #ff1493 !important; } .syntaxhighlighter.printing .constants { color: #0066cc !important; } .syntaxhighlighter.printing .script { font-weight: bold !important; } .syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a { color: gray !important; } .syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a { color: #ff1493 !important; } .syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a { color: red !important; } .syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a { color: black !important; } .syntaxhighlighter { background-color: white !important; } .syntaxhighlighter .line.alt1 { background-color: white !important; } .syntaxhighlighter .line.alt2 { background-color: white !important; } .syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 { background-color: #e0e0e0 !important; } .syntaxhighlighter .line.highlighted.number { color: black !important; } .syntaxhighlighter table caption { color: black !important; } .syntaxhighlighter .gutter { color: #afafaf !important; } .syntaxhighlighter .gutter .line { border-right: 3px solid #6ce26c !important; } .syntaxhighlighter .gutter .line.highlighted { background-color: #6ce26c !important; color: white !important; } .syntaxhighlighter.printing .line .content { border: none !important; } .syntaxhighlighter.collapsed { overflow: visible !important; } .syntaxhighlighter.collapsed .toolbar { color: blue !important; background: white !important; border: 1px solid #6ce26c !important; } .syntaxhighlighter.collapsed .toolbar a { color: blue !important; } .syntaxhighlighter.collapsed .toolbar a:hover { color: red !important; } .syntaxhighlighter .toolbar { color: white !important; background: #6ce26c !important; border: none !important; } .syntaxhighlighter .toolbar a { color: white !important; } .syntaxhighlighter .toolbar a:hover { color: black !important; } .syntaxhighlighter .plain, .syntaxhighlighter .plain a { color: black !important; } .syntaxhighlighter .comments, .syntaxhighlighter .comments a { color: #008200 !important; } .syntaxhighlighter .string, .syntaxhighlighter .string a { color: blue !important; } .syntaxhighlighter .keyword { color: #006699 !important; } .syntaxhighlighter .preprocessor { color: gray !important; } .syntaxhighlighter .variable { color: #aa7700 !important; } .syntaxhighlighter .value { color: #009900 !important; } .syntaxhighlighter .functions { color: #ff1493 !important; } .syntaxhighlighter .constants { color: #0066cc !important; } .syntaxhighlighter .script { font-weight: bold !important; color: #006699 !important; background-color: none !important; } .syntaxhighlighter .color1, .syntaxhighlighter .color1 a { color: gray !important; } .syntaxhighlighter .color2, .syntaxhighlighter .color2 a { color: #ff1493 !important; } .syntaxhighlighter .color3, .syntaxhighlighter .color3 a { color: red !important; } .syntaxhighlighter .keyword { font-weight: bold !important; } </style><div id="highlighter_391314" class="syntaxhighlighter nogutter "><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="string">"use strict"</code><code class="plain">;</code></div><div class="line number2 index1 alt1"> </div><div class="line number3 index2 alt2"><code class="keyword">var</code> <code class="plain">React = require(</code><code class="string">'react'</code><code class="plain">),</code></div><div class="line number4 index3 alt1"><code class="undefined spaces">    </code><code class="plain">ApRange = require(</code><code class="string">'../../lib/ap_range'</code><code class="plain">);</code></div><div class="line number5 index4 alt2"> </div><div class="line number6 index5 alt1"><code class="plain">module.exports = React.createClass({</code></div><div class="line number7 index6 alt2"><code class="undefined spaces">    </code><code class="plain">getInitialState: </code><code class="keyword">function</code> <code class="plain">() {</code></div><div class="line number8 index7 alt1"><code class="undefined spaces">        </code><code class="keyword">return</code> <code class="plain">{};</code></div><div class="line number9 index8 alt2"><code class="undefined spaces">    </code><code class="plain">},</code></div><div class="line number10 index9 alt1"><code class="undefined spaces">    </code><code class="plain">setDebugText: </code><code class="keyword">function</code> <code class="plain">(text) {</code></div><div class="line number11 index10 alt2"><code class="undefined spaces">        </code><code class="keyword">var</code> <code class="plain">s = </code><code class="keyword">this</code><code class="plain">;</code></div><div class="line number12 index11 alt1"><code class="undefined spaces">        </code><code class="plain">s.setState({</code></div><div class="line number13 index12 alt2"><code class="undefined spaces">            </code><code class="plain">debugText: text</code></div><div class="line number14 index13 alt1"><code class="undefined spaces">        </code><code class="plain">});</code></div><div class="line number15 index14 alt2"><code class="undefined spaces">        </code><code class="plain">console.debug(text);</code></div><div class="line number16 index15 alt1"><code class="undefined spaces">    </code><code class="plain">},</code></div><div class="line number17 index16 alt2"><code class="undefined spaces">    </code><code class="plain">render: </code><code class="keyword">function</code> <code class="plain">() {</code></div><div class="line number18 index17 alt1"><code class="undefined spaces">        </code><code class="keyword">var</code> <code class="plain">s = </code><code class="keyword">this</code><code class="plain">,</code></div><div class="line number19 index18 alt2"><code class="undefined spaces">            </code><code class="plain">state = s.state;</code></div><div class="line number20 index19 alt1"><code class="undefined spaces">        </code><code class="keyword">return</code> <code class="plain">(</code></div><div class="line number21 index20 alt2"><code class="undefined spaces">            </code><code class="plain"><</code><code class="keyword">div</code> <code class="plain">style={</code></div><div class="line number22 index21 alt1"><code class="undefined spaces">                </code><code class="plain">{</code></div><div class="line number23 index22 alt2"><code class="undefined spaces">                    </code><code class="string">'position'</code><code class="plain">: </code><code class="string">'relative'</code></div><div class="line number24 index23 alt1"><code class="undefined spaces">                </code><code class="plain">}</code></div><div class="line number25 index24 alt2"><code class="undefined spaces">            </code><code class="plain">}></code></div><div class="line number26 index25 alt1"><code class="undefined spaces">                </code><code class="plain"><</code><code class="keyword">ApRange</code></div><div class="line number27 index26 alt2"><code class="undefined spaces">                    </code><code class="plain">step={0.1}</code></div><div class="line number28 index27 alt1"><code class="undefined spaces">                    </code><code class="plain">onChange={</code><code class="keyword">function</code> <code class="plain">(from, to, ui) {</code></div><div class="line number29 index28 alt2"><code class="undefined spaces">                        </code><code class="plain">s.setDebugText(</code><code class="string">'Value changed: '</code> <code class="plain">+ from + </code><code class="string">' '</code> <code class="plain">+ to);</code></div><div class="line number30 index29 alt1"><code class="undefined spaces">                    </code><code class="plain">}}></code></div><div class="line number31 index30 alt2"><code class="undefined spaces">                </code><code class="plain"></</code><code class="keyword">ApRange</code><code class="plain">></code></div><div class="line number32 index31 alt1"><code class="undefined spaces">                </code><code class="plain"><</code><code class="keyword">br</code><code class="plain">/></code></div><div class="line number33 index32 alt2"><code class="undefined spaces">                </code><code class="plain"><</code><code class="keyword">br</code><code class="plain">/></code></div><div class="line number34 index33 alt1"> </div><div class="line number35 index34 alt2"><code class="undefined spaces">                </code><code class="plain"><</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number36 index35 alt1"><code class="undefined spaces">                    </code><code class="plain"><</code><code class="keyword">span</code><code class="plain">>{state.debugText}</</code><code class="keyword">span</code><code class="plain">></code></div><div class="line number37 index36 alt2"><code class="undefined spaces">                </code><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number38 index37 alt1"><code class="undefined spaces">            </code><code class="plain"></</code><code class="keyword">div</code><code class="plain">></code></div><div class="line number39 index38 alt2"><code class="undefined spaces">        </code><code class="plain">);</code></div><div class="line number40 index39 alt1"><code class="undefined spaces">    </code><code class="plain">}</code></div><div class="line number41 index40 alt2"><code class="plain">});</code></div></div></td></tr></tbody></table></div></div></pre></div></div></main><footer><div class="react-demo-container"><ul class="ap-links"><li class="ap-links-item"><a href="https://github.com/apeman-labo/apeman">apeman</a></li><li class="ap-links-item"><a href="https://github.com/apeman-react-labo">apeman-react-labo</a></li><li class="ap-links-item"><a href="https://facebook.github.io/react/">React</a></li><li class="ap-links-item"><a href="http://apeman-react-labo.github.io/apeman-react-range/demo/demo.html">Demo of apeman-react-range</a></li></ul></div></footer><script src="./demo.js"></script></body></html>