Skip to content

Slider 滑块

基础用法

ts
{
  id: '',
  componentName: 'Slider',
  componentType: 'form',
  formItemAttrs: {
    field: '',
    label: '滑块',
  },
  attrs: {},
  defaultValue: 0
}

离散值

ts
{
  id: '',
  componentName: 'Slider',
  componentType: 'form',
  formItemAttrs: {
    field: '',
    label: '滑块',
  },
  attrs: {
    step: 10, 
    'show-stops': true, 
  },
  defaultValue: 0
}

带有输入框的滑块

ts
{
  id: '',
  componentName: 'Slider',
  componentType: 'form',
  formItemAttrs: {
    field: '',
    label: '滑块',
  },
  attrs: {
    'show-input': true, 
  },
  defaultValue: 0
}

位置

ts
{
  id: '',
  componentName: 'Slider',
  componentType: 'form',
  formItemAttrs: {
    field: '',
    label: '滑块',
  },
  attrs: {
    placement: 'bottom',// 'bottom'|'right'|'left'
  },
  defaultValue: 0
}

范围选择

ts
{
  id: '',
  componentName: 'Slider',
  componentType: 'form',
  formItemAttrs: {
    field: '',
    label: '滑块',
  },
  attrs: {
    range: true, 
    max: 10, 
    'show-stops': true,   
  },
  defaultValue: 0
}

垂直模式

ts
{
  id: '',
  componentName: 'Slider',
  componentType: 'form',
  formItemAttrs: {
    field: '',
    label: '滑块',
  },
  attrs: {
    vertical: true, 
    height: '200px',//启用垂直模式,必须设置 height 属性
  },
  defaultValue: 0
}

其他

ts
{
  id: '',
  componentName: 'Slider',
  componentType: 'form',
  formItemAttrs: {
    field: '',
    label: '滑块',
  },
  attrs: {
    'show-tooltip': false, //关闭提示
    disabled: true, //禁用
    size:"large",//尺寸
    debounce: 1000,//输入时的去抖延迟
  },
  defaultValue: 0
}

Released under the MIT License.