• Slider 滑动输入条
    • 何时使用
    • 代码演示
      • 基本
      • 带输入框的滑块
      • 带 icon 的滑块
      • 自定义提示
      • 事件
      • 带标签的滑块
      • 垂直
      • 控制 ToolTip 的显示
  • API
    • 事件
  • 方法

    Slider 滑动输入条

    滑动型输入器，展示当前值和可选范围。

    何时使用

    当用户需要在数值区间/自定义区间内进行选择时，可为连续或离散值。

    代码演示

    Slider 滑动输入条 - 图1

    基本

    基本滑动条。当 range 为 true 时，渲染为双滑块。当 disabled 为 true 时，滑块处于不可用状态。

    1. <template>
    2.   <div>
    3.     <a-slider id="test" :defaultValue="30" :disabled="disabled" />
    4.     <a-slider range :defaultValue="[20, 50]" :disabled="disabled" />
    5.     Disabled: <a-switch size="small" :checked="disabled" @change="handleDisabledChange" />
    6.   </div>
    7. </template>
    8. <script>
    9.   export default {
    10.     data() {
    11.       return {
    12.         disabled: false,
    13.       };
    14.     },
    15.     methods: {
    16.       handleDisabledChange(disabled) {
    17.         this.disabled = disabled;
    18.       },
    19.     },
    20.   };
    21. </script>
    22. <style scoped>
    23.   .code-box-demo .ant-slider {
    24.     margin-bottom: 16px;
    25.   }
    26. </style>

    Slider 滑动输入条 - 图2

    带输入框的滑块

    和 数字输入框 组件保持同步。

    1. <template>
    2.   <div>
    3.     <a-row>
    4.       <a-col :span="12">
    5.         <a-slider :min="1" :max="20" v-model="inputValue1" />
    6.       </a-col>
    7.       <a-col :span="4">
    8.         <a-input-number :min="1" :max="20" style="marginLeft: 16px" v-model="inputValue1" />
    9.       </a-col>
    10.     </a-row>
    11.     <a-row>
    12.       <a-col :span="12">
    13.         <a-slider :min="0" :max="1" v-model="inputValue" :step="0.01" />
    14.       </a-col>
    15.       <a-col :span="4">
    16.         <a-input-number
    17.           :min="0"
    18.           :max="1"
    19.           :step="0.01"
    20.           style="marginLeft: 16px"
    21.           v-model="inputValue"
    22.         />
    23.       </a-col>
    24.     </a-row>
    25.   </div>
    26. </template>
    27. <script>
    28.   export default {
    29.     data() {
    30.       return {
    31.         inputValue: 0,
    32.         inputValue1: 1,
    33.       };
    34.     },
    35.   };
    36. </script>
    37. <style scoped>
    38.   .code-box-demo .ant-slider {
    39.     margin-bottom: 16px;
    40.   }
    41. </style>

    Slider 滑动输入条 - 图3

    带 icon 的滑块

    滑块左右可以设置图标来表达业务含义。

    1. <template>
    2.   <div class="icon-wrapper">
    3.     <a-icon :style="{color: preColor}" type="frown-o" />
    4.     <a-slider :min="0" :max="20" @change="handleChange" :value="value" />
    5.     <a-slider :min="0" :max="20" v-model="value" />
    6.     <a-icon :style="{color: nextColor}" type="smile-o" />
    7.   </div>
    8. </template>
    9. <script>
    10.   export default {
    11.     data() {
    12.       return {
    13.         value: 0,
    14.         min: 0,
    15.         max: 20,
    16.       };
    17.     },
    18.     methods: {
    19.       handleChange(value) {
    20.         this.value = value;
    21.       },
    22.     },
    23.     computed: {
    24.       preColor() {
    25.         const { max, min, value } = this;
    26.         const mid = ((max - min) / 2).toFixed(5);
    27.         return value >= mid ? '' : 'rgba(0, 0, 0, .45)';
    28.         const nextColor = value >= mid ? 'rgba(0, 0, 0, .45)' : '';
    29.       },
    30.       nextColor() {
    31.         const { max, min, value } = this;
    32.         const mid = ((max - min) / 2).toFixed(5);
    33.         return value >= mid ? 'rgba(0, 0, 0, .45)' : '';
    34.       },
    35.     },
    36.   };
    37. </script>
    38. <style scoped>
    39.   .icon-wrapper {
    40.     position: relative;
    41.     padding: 0px 30px;
    42.   }
    44.   .icon-wrapper .anticon {
    45.     position: absolute;
    46.     top: -2px;
    47.     width: 16px;
    48.     height: 16px;
    49.     line-height: 1;
    50.     font-size: 16px;
    51.     color: rgba(0, 0, 0, 0.25);
    52.   }
    54.   .icon-wrapper .anticon:first-child {
    55.     left: 0;
    56.   }
    58.   .icon-wrapper .anticon:last-child {
    59.     right: 0;
    60.   }
    61. </style>

    Slider 滑动输入条 - 图4

    自定义提示

    使用 tipFormatter 可以格式化 Tooltip 的内容，设置 tipFormatter={null}，则隐藏 Tooltip。

    <template>
  <div>
    <a-slider :tipFormatter="formatter" />
    <a-slider :tipFormatter="null" />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        disabled: false,
      };
    },
    methods: {
      formatter(value) {
        return `${value}%`;
      },
    },
  };
</script>

    Slider 滑动输入条 - 图5

    事件

    当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。在 onmouseup 时，会触发 onAfterChange 事件，并把当前值作为参数传入。

    <template>
  <div class="code-box-demo">
    <a-slider :defaultValue="30" @change="onChange" @afterChange="onAfterChange" />
    <a-slider
      range
      :step="10"
      :defaultValue="[20, 50]"
      @change="onChange"
      @afterChange="onAfterChange"
    />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        disabled: false,
      };
    },
    methods: {
      onChange(value) {
        console.log('change: ', value);
      },
      onAfterChange(value) {
        console.log('afterChange: ', value);
      },
    },
  };
</script>
<style scoped>
  .code-box-demo .ant-slider {
    margin-bottom: 16px;
  }
</style>

    Slider 滑动输入条 - 图6

    带标签的滑块

    使用 marks 属性标注分段式滑块，使用 value / defaultValue 指定滑块位置。当 included=false 时，表明不同标记间为并列关系。当 step=null 时，Slider 的可选值仅有 marks 标出来的部分。

    <template>
  <div id="components-slider-demo-mark">
    <h4>included=true</h4>
    <a-slider :marks="marks" :defaultValue="37" />
    <a-slider range :marks="marks" :defaultValue="[26, 37]" />

    <h4>included=false</h4>
    <a-slider :marks="marks" :included="false" :defaultValue="37" />

    <h4>marks & step</h4>
    <a-slider :marks="marks" :step="10" :defaultValue="37" />

    <h4>step=null</h4>
    <a-slider :marks="marks" :step="null" :defaultValue="37" />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        marks: {
          0: '0°C',
          26: '26°C',
          37: '37°C',
          100: {
            style: {
              color: '#f50',
            },
            label: <strong>100°C</strong>,
          },
        },
      };
    },
    methods: {
      onChange(value) {
        console.log('change: ', value);
      },
      onAfterChange(value) {
        console.log('afterChange: ', value);
      },
    },
  };
</script>
<style scoped>
  #components-slider-demo-mark h4 {
    margin: 0 0 16px;
  }
  #components-slider-demo-mark .ant-slider-with-marks {
    margin-bottom: 44px;
  }
</style>

    Slider 滑动输入条 - 图7

    垂直

    垂直方向的 Slider。

    <template>
  <div style="height: 300px">
    <div style="float:left;height: 300px;marginLeft: 70px">
      <a-slider vertical :defaultValue="30" />
    </div>
    <div style="float:left;height: 300px;marginLeft: 70px">
      <a-slider vertical range :step="10" :defaultValue="[20, 50]" />
    </div>
    <div style="float:left;height: 300px;marginLeft: 70px">
      <a-slider vertical range :marks="marks" :defaultValue="[26, 37]" />
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        marks: {
          0: '0°C',
          26: '26°C',
          37: '37°C',
          100: {
            style: {
              color: '#f50',
            },
            label: <strong>100°C</strong>,
          },
        },
      };
    },
    methods: {
      handleDisabledChange(disabled) {
        this.disabled = disabled;
      },
    },
  };
</script>
<style scoped>
  .code-box-demo .ant-slider {
    margin-bottom: 16px;
  }
</style>

    Slider 滑动输入条 - 图8

    控制 ToolTip 的显示

    当 tooltipVisible 为 true 时，将始终显示ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。

    <template>
  <a-slider :defaultValue="30" :tooltipVisible="true" />
</template>

    API

    参数说明类型默认值
    autoFocus自动获取焦点booleanfalse
    defaultValue设置初始取值。当 range 为 false 时，使用 number，否则用 [number, number]number|number[]0 or [0, 0]
    disabled值为 true 时，滑块为禁用状态booleanfalse
    dots是否只能拖拽到刻度上booleanfalse
    includedmarks 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列booleantrue
    marks刻度标记，key 的类型必须为 number 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式object{ number: string|VNode } or { number: { style: object, label: string|VNode } } or { number: () => VNode }
    max最大值number100
    min最小值number0
    range双滑块模式booleanfalse
    step步长，取值必须大于 0，并且可被 (max - min) 整除。当 marks 不为空对象时，可以设置 step 为 null，此时 Slider 的可选值仅有 marks 标出来的部分。number|null1
    tipFormatterSlider 会把当前值传给 tipFormatter，并在 Tooltip 中显示 tipFormatter 的返回值，若为 null，则隐藏 Tooltip。Function|nullIDENTITY
    value(v-model)设置当前取值。当 range 为 false 时，使用 number，否则用 [number, number]number|number[]
    vertical值为 true 时，Slider 为垂直方向Booleanfalse
    tooltipVisible值为true时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。Boolean

    事件

    事件名称说明回调参数
    afterChange与 mouseup 触发时机一致，把当前值作为参数传入。Function(value)
    change当 Slider 的值发生改变时，会触发 change 事件，并把改变后的值作为参数传入。Function(value)

    方法

    名称描述
    blur()移除焦点
    focus()获取焦点