Slider 滑动输入条

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

何时使用

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

代码演示

Slider滑动输入条 - 图1

基本

基本滑动条。当 rangetrue 时,渲染为双滑块。当 disabledtrue 时,滑块处于不可用状态。

  1. <template>
  2. <div>
  3. <a-slider id="test" :default-value="30" :disabled="disabled" />
  4. <a-slider range :default-value="[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

带 icon 的滑块

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

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

Slider滑动输入条 - 图3

事件

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

  1. <template>
  2. <div class="code-box-demo">
  3. <a-slider :default-value="30" @change="onChange" @afterChange="onAfterChange" />
  4. <a-slider
  5. range
  6. :step="10"
  7. :default-value="[20, 50]"
  8. @change="onChange"
  9. @afterChange="onAfterChange"
  10. />
  11. </div>
  12. </template>
  13. <script>
  14. export default {
  15. data() {
  16. return {
  17. disabled: false,
  18. };
  19. },
  20. methods: {
  21. onChange(value) {
  22. console.log('change: ', value);
  23. },
  24. onAfterChange(value) {
  25. console.log('afterChange: ', value);
  26. },
  27. },
  28. };
  29. </script>
  30. <style scoped>
  31. .code-box-demo .ant-slider {
  32. margin-bottom: 16px;
  33. }
  34. </style>

Slider滑动输入条 - 图4

垂直

垂直方向的 Slider。

  1. <template>
  2. <div style="height: 300px">
  3. <div style="display: inline-block;height: 300px;marginLeft: 70px">
  4. <a-slider vertical :default-value="30" />
  5. </div>
  6. <div style="display: inline-block;height: 300px;marginLeft: 70px">
  7. <a-slider vertical range :step="10" :default-value="[20, 50]" />
  8. </div>
  9. <div style="display: inline-block;height: 300px;marginLeft: 70px">
  10. <a-slider vertical range :marks="marks" :default-value="[26, 37]" />
  11. </div>
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. marks: {
  19. 0: '0°C',
  20. 26: '26°C',
  21. 37: '37°C',
  22. 100: {
  23. style: {
  24. color: '#f50',
  25. },
  26. label: <strong>100°C</strong>,
  27. },
  28. },
  29. };
  30. },
  31. methods: {
  32. handleDisabledChange(disabled) {
  33. this.disabled = disabled;
  34. },
  35. },
  36. };
  37. </script>
  38. <style scoped>
  39. .code-box-demo .ant-slider {
  40. margin-bottom: 16px;
  41. }
  42. </style>

Slider滑动输入条 - 图5

反向

设置 reverse 可以将滑动条置反。

  1. <template>
  2. <div>
  3. <a-slider :default-value="30" :reverse="reverse" />
  4. <a-slider range :default-value="[20, 50]" :reverse="reverse" />
  5. Reversed: <a-switch size="small" :checked="reverse" @change="handleReverseChange" />
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. data() {
  11. return {
  12. reverse: true,
  13. };
  14. },
  15. methods: {
  16. handleReverseChange(reverse) {
  17. this.reverse = reverse;
  18. },
  19. },
  20. };
  21. </script>

Slider滑动输入条 - 图6

带输入框的滑块

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

  1. <template>
  2. <div>
  3. <a-row>
  4. <a-col :span="12">
  5. <a-slider v-model="inputValue1" :min="1" :max="20" />
  6. </a-col>
  7. <a-col :span="4">
  8. <a-input-number v-model="inputValue1" :min="1" :max="20" style="marginLeft: 16px" />
  9. </a-col>
  10. </a-row>
  11. <a-row>
  12. <a-col :span="12">
  13. <a-slider v-model="inputValue" :min="0" :max="1" :step="0.01" />
  14. </a-col>
  15. <a-col :span="4">
  16. <a-input-number
  17. v-model="inputValue"
  18. :min="0"
  19. :max="1"
  20. :step="0.01"
  21. style="marginLeft: 16px"
  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滑动输入条 - 图7

自定义提示

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

  1. <template>
  2. <div>
  3. <a-slider :tip-formatter="formatter" />
  4. <a-slider :tip-formatter="null" />
  5. </div>
  6. </template>
  7. <script>
  8. export default {
  9. data() {
  10. return {
  11. disabled: false,
  12. };
  13. },
  14. methods: {
  15. formatter(value) {
  16. return `${value}%`;
  17. },
  18. },
  19. };
  20. </script>

Slider滑动输入条 - 图8

带标签的滑块

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

  1. <template>
  2. <div id="components-slider-demo-mark">
  3. <h4>included=true</h4>
  4. <a-slider :marks="marks" :default-value="37" />
  5. <a-slider range :marks="marks" :default-value="[26, 37]" />
  6. <h4>included=false</h4>
  7. <a-slider :marks="marks" :included="false" :default-value="37" />
  8. <h4>marks & step</h4>
  9. <a-slider :marks="marks" :step="10" :default-value="37" />
  10. <h4>step=null</h4>
  11. <a-slider :marks="marks" :step="null" :default-value="37" />
  12. </div>
  13. </template>
  14. <script>
  15. export default {
  16. data() {
  17. return {
  18. marks: {
  19. 0: '0°C',
  20. 26: '26°C',
  21. 37: '37°C',
  22. 100: {
  23. style: {
  24. color: '#f50',
  25. },
  26. label: <strong>100°C</strong>,
  27. },
  28. },
  29. };
  30. },
  31. methods: {
  32. onChange(value) {
  33. console.log('change: ', value);
  34. },
  35. onAfterChange(value) {
  36. console.log('afterChange: ', value);
  37. },
  38. },
  39. };
  40. </script>
  41. <style scoped>
  42. #components-slider-demo-mark h4 {
  43. margin: 0 0 16px;
  44. }
  45. #components-slider-demo-mark .ant-slider-with-marks {
  46. margin-bottom: 44px;
  47. }
  48. </style>

Slider滑动输入条 - 图9

控制 ToolTip 的显示

tooltipVisibletrue 时,将始终显示ToolTip;反之则始终不显示,即使在拖动、移入时也是如此。

  1. <template>
  2. <a-slider :default-value="30" :tooltip-visible="true" />
  3. </template>

API

参数说明类型默认值版本
autoFocus自动获取焦点booleanfalse
defaultValue设置初始取值。当 rangefalse 时,使用 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
reverse反向坐标轴booleanfalse1.5.0
step步长,取值必须大于 0,并且可被 (max - min) 整除。当 marks 不为空对象时,可以设置 stepnull,此时 Slider 的可选值仅有 marks 标出来的部分。number|null1
tipFormatterSlider 会把当前值传给 tipFormatter,并在 Tooltip 中显示 tipFormatter 的返回值,若为 null,则隐藏 Tooltip。Function|nullIDENTITY
value(v-model)设置当前取值。当 rangefalse 时,使用 number,否则用 [number, number]number|number[]
vertical值为 true 时,Slider 为垂直方向Booleanfalse
tooltipPlacement设置 Tooltip 展示位置。参考 Tooltipstring1.5.0
tooltipVisible值为true时,Tooltip 将会始终显示;否则始终不显示,哪怕在拖拽及移入时。Boolean
getTooltipPopupContainerTooltip 渲染父节点,默认渲染到 body 上。Function() => document.body1.5.0

事件

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

方法

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