帮助用户以整体跨度作为参考基准，选择一个数值或区间。

适用：用户需要直观看到已选值与整体跨度关系的场景，比如图片缩放比例尺。
不适用：随意录入数字或选择指定选项，且整体跨度对用户而言不具备参考意义的场景，比如工时的录入

通用原则

• 数值或区间可为连续值或离散值，通常用于比例选择场景。
• 需要设计师根据实际需求来设定滑轨的：最小值、最大值、初始值、刻度
• 滑动过程中用户应得到即时的反馈，直观看到已选值与整体跨度的关系
• 对于带刻度的输入条，当容器宽度不足时，中间的刻度值消失，但两端的刻度值始终显示
• Hover 与 拖拽状态下，需 Tooltip 展示明确的结点数值

类型

连续值

用户自由拖拽滑块选择节点/区间

离散值

• 滑动区域设定特定节点作为可选刻度
• 滑动过程中滑块自动捕捉距离最近的节点

构成

1. 整体跨度+刻度
   1. 整体跨度的最小值/最大值（可选）
   2. 刻度（离散型必须有刻度）
2. 已选值
   1. 已选择允许根据业务需要，定制其状态颜色
3. 操作把手+结点值
   1. 操作把手既是用户操作的对象，也是当前选值
   2. 结点值：鼠标 hover 或拖拽时显示

行为

四大状态

选择数值/区间

• 方式1：拖动滑块来调整
  • 拖拽过程中随时显示准确数值。
    • 连续型：跟随用户鼠标
    • 离散型：非严格跟随用户鼠标，而是系统自动定位距离当前刻度最近的刻度。
  • 在选择区间的场景下，开始结点/结束结点是相对，而非绝对。因此允许用户拖拽开始结点到最右边变为结束结点，反之亦然。
• 方式2：点击滑块外轨道任意结点，自动定位到特定位置。
  • 特定位置算法：距离用户鼠标点击点最近的刻度
• 其他方式：配合其他组件完成，比如输入框等等，根据业务需要选择。

备注：以上调整方式可任意组合使用。

<rzslider rz-slider-model="size" rz-slider-options="options"></rzslider>

$scope.options = {
  value: 1,//默认值
  options: {
    floor: 1,//最小值
    ceil: 2000,//最大值
    showTicks: true,//是否显示刻度
    ticksArray: [1, 1000, 2000],//刻度数组
    showTicksValues: true,//是否显示刻度数值
    translate: function (value) {//回调函数
        return value + 'GB'
    }
  }
}