Slider 滑动输入条

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

何时使用

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

代码演示

Slider滑动输入条 - 图1

基本

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

  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
  9. :min="1"
  10. :max="20"
  11. style="marginLeft: 16px"
  12. v-model="inputValue1"
  13. />
  14. </a-col>
  15. </a-row>
  16. <a-row>
  17. <a-col :span="12">
  18. <a-slider :min="0" :max="1" v-model="inputValue" :step="0.01" />
  19. </a-col>
  20. <a-col :span="4">
  21. <a-input-number
  22. :min="0"
  23. :max="1"
  24. :step="0.01"
  25. style="marginLeft: 16px"
  26. v-model="inputValue"
  27. />
  28. </a-col>
  29. </a-row>
  30. </div>
  31. </template>
  32. <script>
  33. export default {
  34. data() {
  35. return {
  36. inputValue: 0,
  37. inputValue1: 1,
  38. }
  39. },
  40. }
  41. </script>
  42. <style scoped>
  43. .code-box-demo .ant-slider {
  44. margin-bottom: 16px;
  45. }
  46. </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. }
  43. .icon-wrapper .anticon {
  44. position: absolute;
  45. top: -2px;
  46. width: 16px;
  47. height: 16px;
  48. line-height: 1;
  49. font-size: 16px;
  50. color: rgba(0, 0, 0, .25);
  51. }
  52. .icon-wrapper .anticon:first-child {
  53. left: 0;
  54. }
  55. .icon-wrapper .anticon:last-child {
  56. right: 0;
  57. }
  58. </style>

Slider滑动输入条 - 图4

自定义提示

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

  1. <template>
  2. <div>
  3. <a-slider :tipFormatter="formatter" />
  4. <a-slider :tipFormatter="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滑动输入条 - 图5

事件

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

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

Slider滑动输入条 - 图6

带标签的滑块

使用 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" :defaultValue="37" />
  5. <a-slider range :marks="marks" :defaultValue="[26, 37]" />
  6. <h4>included=false</h4>
  7. <a-slider :marks="marks" :included="false" :defaultValue="37" />
  8. <h4>marks & step</h4>
  9. <a-slider :marks="marks" :step="10" :defaultValue="37" />
  10. <h4>step=null</h4>
  11. <a-slider :marks="marks" :step="null" :defaultValue="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滑动输入条 - 图7

垂直

垂直方向的 Slider。

  1. <template>
  2. <div style="height: 300px">
  3. <div style="float:left;height: 300px;marginLeft: 70px">
  4. <a-slider vertical :defaultValue="30" />
  5. </div>
  6. <div style="float:left;height: 300px;marginLeft: 70px">
  7. <a-slider vertical range :step="10" :defaultValue="[20, 50]" />
  8. </div>
  9. <div style="float:left;height: 300px;marginLeft: 70px">
  10. <a-slider vertical range :marks="marks" :defaultValue="[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滑动输入条 - 图8

控制 ToolTip 的显示

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

  1. <template>
  2. <a-slider :defaultValue="30" :tooltipVisible="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
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
tooltipVisible值为true时,Tooltip 将会始终显示;否则始终不显示,哪怕在拖拽及移入时。Boolean

事件

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

方法

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