{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<p>Range</p>\n<h3 id=\"When To Use\">When To Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>Range Component is used to select a value in a range by dragging slider. Normally, the minimal value of the range is placed on the leftmost, and the maximal is on the rightmost. Sometimes, icons can be placed at the ends to reflect the strength. Range Component is the best choice when setting volume, brightness or saturation that related to strength.</p>\n<h3 id=\"Note\">Note <a class=\"header-anchor scroll-count-item\" href=\"#Note\" data-scroll-id=\"Note\">#</a></h3>\n<ul>\n<li>onChange is often used combined with value for controlling, and it can only be triggered after sliding.</li>\n<li>On the other hand, onProcess is the wrong place to do the control, for it&apos;s triggered through the sliding process.</li>\n</ul>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Range\">Range <a class=\"header-anchor scroll-count-item\" href=\"#Range\" data-scroll-id=\"Range\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>slider</td>\n<td>Number of sliders<br><br><strong>option</strong>:<br>&apos;single&apos;<br>&apos;double&apos;</td>\n<td>&apos;single&apos; | &apos;double&apos;</td>\n<td>&apos;single&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>min</td>\n<td>Minimal value</td>\n<td>number</td>\n<td>0</td>\n<td></td>\n</tr>\n<tr>\n<td>max</td>\n<td>Maximal value</td>\n<td>number</td>\n<td>100</td>\n<td></td>\n</tr>\n<tr>\n<td>step</td>\n<td>Step of the range, which is positive integer and (max - min) can be divided by it</td>\n<td>number</td>\n<td>1</td>\n<td></td>\n</tr>\n<tr>\n<td>value</td>\n<td>Current value. It&apos;s in the form of <code>Number</code> when <code>slider</code> is <code>single</code> otherwise <code>[Number, Number]</code></td>\n<td>RangeValueType</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>defaultValue</td>\n<td>Default value. It&apos;s in the form of <code>Number</code> when <code>slider</code> is <code>single</code> otherwise <code>[Number, Number]</code></td>\n<td>RangeValueType</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>marks</td>\n<td>Way to show the scale. (<code>false</code> means nothing, <code>array</code> means enum, <code>number</code> means equal division, and <code>object</code> means <code>key</code> as the mark with <code>value</code> as the value)</td>\n<td>false | number | Array&lt;number&gt; | Record&lt;number, string&gt;</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>marksPosition</td>\n<td>Position for the scale<br><br><strong>option</strong>:<br>&apos;above&apos;, &apos;below&apos;</td>\n<td>&apos;above&apos; | &apos;below&apos;</td>\n<td>&apos;above&apos;</td>\n<td></td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Disabled</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Callback triggered when value changes<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>value</em>: The changed value</td>\n<td>(value: RangeValueType) =&gt; void</td>\n<td>() =&gt; void</td>\n<td></td>\n</tr>\n<tr>\n<td>onProcess</td>\n<td>Callback triggered when slider being dragged, and used only for special need<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>value</em>: The changed value</td>\n<td>(value: RangeValueType) =&gt; void</td>\n<td>() =&gt; void</td>\n<td></td>\n</tr>\n<tr>\n<td>hasTip</td>\n<td>Whether to show tip</td>\n<td>boolean</td>\n<td>true</td>\n<td></td>\n</tr>\n<tr>\n<td>tipRender</td>\n<td>Custom tip content<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>value</em>: The changed value<br><strong>return</strong>:<br>React.ReactNode</td>\n<td>(value: number | string) =&gt; React.ReactNode</td>\n<td>(value) =&gt; value</td>\n<td></td>\n</tr>\n<tr>\n<td>reverse</td>\n<td>Reverse the selected part</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>pure</td>\n<td>Pure render or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>fixedWidth</td>\n<td>Drag a line with fixed width. It considers <code>slider</code> as <code>double</code>, and <code>defaultValue</code> must be a interval.</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>tooltipVisible</td>\n<td>Tooltip always be visible or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Is preview or not</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Custom preview content<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>value</em>: The changed value<br><em>props</em>: RangeProps<br><strong>return</strong>:<br>React.ReactNode</td>\n<td>(value: RangeValueType | undefined, props: RangeProps) =&gt; React.ReactNode</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Range Value Type\">RangeValueType <a class=\"header-anchor scroll-count-item\" href=\"#Range Value Type\" data-scroll-id=\"Range Value Type\">#</a></h3>\n<pre class=\"language-typescript\"><code class=\"language-typescript\"><span class=\"token keyword\">export</span> <span class=\"token keyword\">type</span> <span class=\"token class-name\">RangeValueType</span> <span class=\"token operator\">=</span> <span class=\"token builtin\">number</span> <span class=\"token operator\">|</span> <span class=\"token punctuation\">[</span><span class=\"token builtin\">number</span><span class=\"token punctuation\">,</span> <span class=\"token builtin\">number</span><span class=\"token punctuation\">]</span><span class=\"token punctuation\">;</span>\n</code></pre>\n<h2 id=\"ARIA And Key Board\">ARIA and KeyBoard <a class=\"header-anchor scroll-count-item\" href=\"#ARIA And Key Board\" data-scroll-id=\"ARIA And Key Board\">#</a></h2>\n<table>\n<thead>\n<tr>\n<th style=\"text-align:left\">KeyBoard</th>\n<th style=\"text-align:left\">Descripiton</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td style=\"text-align:left\">Right Arrow</td>\n<td style=\"text-align:left\">control the slider to move to the right</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Left Arrow</td>\n<td style=\"text-align:left\">control the slider to move to the left</td>\n</tr>\n<tr>\n<td style=\"text-align:left\">Tab</td>\n<td style=\"text-align:left\">switch to other slider</td>\n</tr>\n</tbody>\n</table>\n"}