Ant Design Vue Slider 滑动输入条

Ant Design Vue Slider 滑动输入条,使用场景通常用在一定值范围为内类型，比如加载进度条，该组件不算是一个高频使用的组件。

基础用法

<a-slider id="itxst" :default-value="10" :min="1" :max="20"  :disabled="disabled" />

属性名称	说明
v-model	当前的滑动值
min	滑块最小值
max	滑块最大值
step	步长，每滑动累计的数量
vertical	是否垂直显示，默认false

<template>
  <div>
    <a-slider id="itxst"  
    v-model="inputVal"  
    :default-value="10" 
    :min="0" 
    :max="20" 
    :step="2"  
    :disabled="disabled"
     />
    <a-slider range :default-value="[3, 10]" :min="1" :max="20"  :disabled="disabled" />
    启用{{inputVal}}: <a-switch size="small" :checked="disabled" @change="disabledChange" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      disabled: false,
      inputVal:15
    };
  },
  methods: {
    disabledChange(disabled) {
      this.disabled = disabled;
    },
  },
};
</script>
<style scoped>
 .ant-slider {
  margin-bottom: 20px;
}
</style>

例子

垂直方向

<template>
  <div style="height: 300px">
    <div style="display: inline-block;height: 300px;marginLeft: 70px">
      <a-slider vertical :default-value="20" />
    </div>
    <div style="display: inline-block;height: 300px;marginLeft: 70px">
      <a-slider vertical range :step="10" :default-value="[25, 60]" />
    </div>
    <div style="display: inline-block;height: 300px;marginLeft: 70px">
      <a-slider vertical range :marks="marks" :default-value="[16, 30]" />
    </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>

例子

自定义提示

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

例子