ng-ytl-zorro-antd/src/showcase/nz-demo-slider/nz-demo-slider.html

An enterprise-class UI components based on Ant Design and Angular

<article>
  <section class="markdown"><h1>Slider滑动输入条</h1>
    <section class="markdown"><p>滑动型输入器，展示当前值和可选范围。</p>
      <h2 id="何时使用"><span>何时使用</span><a  class="anchor">#</a></h2>
      <p>当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。</p>
    </section>
    <h2>代码演示<i class="code-box-expand-trigger anticon anticon-appstore" title="展开全部代码"></i></h2>
  </section>
  <div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'基本'" id="components-slider-demo-basic" [nzCode]="NzDemoSliderBasicCode">
        <nz-demo-slider-basic demo></nz-demo-slider-basic>
        <div intro>
          <p>基本滑动条。当 <code>range</code> 为 <code>true</code> 时，渲染为双滑块。当 <code>disabled</code> 为 <code>true</code> 时，滑块处于不可用状态。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'带 icon 的滑块'" id="components-slider-demo-icon" [nzCode]="NzDemoSliderIconCode">
        <nz-demo-slider-icon demo></nz-demo-slider-icon>
        <div intro>
          <p>滑块左右可以设置图标来表达业务含义。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'事件'" id="components-slider-demo-event" [nzCode]="NzDemoSliderEventCode">
        <nz-demo-slider-event demo></nz-demo-slider-event>
        <div intro>
          <p>当 Slider 的值发生改变时，会更新 <code>ngModel</code> 所绑定的变量(可通过setter方式或绑定ngModelChange来监测此事件)。在 <code>onmouseup</code> 时，会触发 <code>onAfterChange</code> 事件，并把当前值作为参数传入。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'垂直'" id="components-slider-demo-vertical" [nzCode]="NzDemoSliderVerticalCode">
        <nz-demo-slider-vertical demo></nz-demo-slider-vertical>
        <div intro>
          <p>垂直方向的 Slider。</p>
        </div>
      </nz-code-box>
    </div>
    <div nz-col [nzSpan]="12">
      <nz-code-box [nzTitle]="'带输入框的滑块'" id="components-slider-demo-input-number" [nzCode]="NzDemoSliderInputNumberCode">
        <nz-demo-slider-input-number demo></nz-demo-slider-input-number>
        <div intro>
          <p>和 <a routerLink="/components/input-number">数字输入框</a> 组件保持同步。</p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'自定义提示'" id="components-slider-demo-tip-formatter" [nzCode]="NzDemoSliderTipFormatterCode">
        <nz-demo-slider-tip-formatter demo></nz-demo-slider-tip-formatter>
        <div intro>
          <p>使用 <code>nzTipFormatter</code> 可以格式化 <code>Tooltip</code> 的内容，设置 <code>[nzTipFormatter]="null"</code>，则隐藏 <code>Tooltip。</code></p>
        </div>
      </nz-code-box>
      <nz-code-box [nzTitle]="'带标签的滑块'" id="components-slider-demo-mark" [nzCode]="NzDemoSliderMarkCode">
        <nz-demo-slider-mark demo></nz-demo-slider-mark>
        <div intro>
          <p>使用 <code>marks</code> 属性标注分段式滑块，使用 <code>value</code> / <code>defaultValue</code> 指定滑块位置。当 <code>included=false</code> 时，表明不同标记间为并列关系。当 <code>step=null</code> 时，Slider 的可选值仅有 <code>marks</code> 标出来的部分。</p>
        </div>
      </nz-code-box>
    </div>
  </div>
  <section class="markdown api-container"><h2 id="API"><span>API</span><!-- <a class="anchor">#</a> --></h2>
    <h3 id="slider"><span>nz-slider</span><!-- <a class="anchor">#</a> --></h3>
    <table>
      <thead>
      <tr>
        <th>参数</th>
        <th>说明</th>
        <th>类型</th>
        <th>默认值</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>nzRange</td>
        <td>当添加该属性时，启动双滑块模式</td>
        <td>attribute</td>
        <td>-</td>
      </tr>
      <tr>
        <td>nzMin</td>
        <td>最小值</td>
        <td>Number</td>
        <td>0</td>
      </tr>
      <tr>
        <td>nzMax</td>
        <td>最大值</td>
        <td>Number</td>
        <td>100</td>
      </tr>
      <tr>
        <td>nzStep</td>
        <td>步长。取值必须大于 0，并且可被 (max - min) 整除。当 <code>marks</code> 不为空对象时，可以设置 <code>step</code> 为 <code>null</code>，此时 Slider 的可选值仅有 marks 标出来的部分。</td>
        <td>Number</td>
        <td>1</td>
      </tr>
      <tr>
        <td>nzMarks</td>
        <td>刻度标记。key 的类型必须为 <code>number</code> 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式。</td>
        <td>object</td>
        <td>{{ '{ number: string|HTML } or { number: { style: object, label: string|HTML } }' }}</td>
      </tr>
      <tr>
        <td>nzDots</td>
        <td>是否只能拖拽到刻度上</td>
        <td>Boolean</td>
        <td>false</td>
      </tr>
      <tr>
        <td>ngModel</td>
        <td>设置/获取当前取值。当 <code>range</code> 为 <code>false</code> 时，使用 <code>number</code>，否则用 <code>[number, number]</code></td>
        <td>number|number[]</td>
        <td></td>
      </tr>
      <tr>
        <td>nzDefaultValue</td>
        <td>设置初始取值。当 <code>range</code> 为 <code>false</code> 时，使用 <code>number</code>，否则用 <code>[number, number]</code></td>
        <td>number|number[]</td>
        <td>0 or [0, 0]</td>
      </tr>
      <tr>
        <td>nzIncluded</td>
        <td>是否包含。<code>marks</code> 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列</td>
        <td>Boolean</td>
        <td>true</td>
      </tr>
      <tr>
        <td>nzDisabled</td>
        <td>是否禁用。值为 <code>true</code> 时，滑块为禁用状态</td>
        <td>Boolean</td>
        <td>false</td>
      </tr>
      <tr>
        <td>nzVertical</td>
        <td>竖直显示。添加该属性时，Slider 为垂直方向。</td>
        <td>attribute</td>
        <td>-</td>
      </tr>
      <tr>
        <td>nzOnAfterChange</td>
        <td>与 <code>onmouseup</code> 触发时机一致，把当前值作为参数传入。</td>
        <td>Function(value)</td>
        <td>无</td>
      </tr>
      <tr>
        <td>nzTipFormatter</td>
        <td>Slider 会把当前值传给 <code>nzTipFormatter</code>，并在 <code>Tooltip</code> 中显示 <code>nzTipFormatter</code> 的返回值，若为 <code>null</code>，则隐藏 <code>Tooltip</code>。</td>
        <td>Function(value) | null</td>
        <td>(value) => value</td>
      </tr>
      </tbody>
    </table>
  </section>
</article>