Slider

Slider 是对 Vant 滑块组件的 Formily 适配，保留原生滑动交互，同时补上 readPretty 阅读态和 readOnly 命名兼容。

使用建议

单值场景适合表示进度、音量、亮度等连续数值；区间场景建议开启 range，直接绑定 [min, max] 结构。

基础使用

通过 modelValue 绑定当前滑块值。

vue

<script setup lang="ts">
import { createForm } from '@formily/core'
import { Form, FormButtonGroup, FormItem, Slider, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    progress: 50,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="progress"
      title="基础滑块"
      :decorator="[FormItem]"
      :component="[Slider]"
    />

    <FormButtonGroup>
      <Submit :on-submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

双滑块

设置 range 后，字段值会切换为 [number, number]。

vue

<script setup lang="ts">
import { createForm } from '@formily/core'
import { Form, FormButtonGroup, FormItem, Slider, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    progressRange: [20, 60],
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="progressRange"
      title="双滑块"
      :decorator="[FormItem]"
      :component="[Slider, { range: true }]"
    />

    <FormButtonGroup>
      <Submit :on-submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

指定选择范围

通过 min 和 max 可以约束滑块的可选区间。

vue

<script setup lang="ts">
import { createForm } from '@formily/core'
import { Form, FormButtonGroup, FormItem, Slider, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    temperature: 0,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="temperature"
      title="指定选择范围"
      :decorator="[FormItem]"
      :component="[Slider, { min: -50, max: 50 }]"
    />

    <FormButtonGroup>
      <Submit :on-submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

禁用

通过 disabled 禁用滑块交互。

vue

<script setup lang="ts">
import { createForm } from '@formily/core'
import { Form, FormButtonGroup, FormItem, Slider, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    progress: 50,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="progress"
      title="禁用滑块"
      :decorator="[FormItem]"
      :component="[Slider, { disabled: true }]"
    />

    <FormButtonGroup>
      <Submit :on-submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

指定步长

通过 step 控制每次变动的粒度。

vue

<script setup lang="ts">
import { createForm } from '@formily/core'
import { Form, FormButtonGroup, FormItem, Slider, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    progress: 50,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="progress"
      title="指定步长"
      :decorator="[FormItem]"
      :component="[Slider, { step: 10 }]"
    />

    <FormButtonGroup>
      <Submit :on-submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

自定义样式

通过 barHeight、activeColor 等属性调整滑块外观。

vue

<script setup lang="ts">
import { createForm } from '@formily/core'
import { Form, FormButtonGroup, FormItem, Slider, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    progress: 50,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="progress"
      title="自定义样式"
      :decorator="[FormItem]"
      :component="[Slider, { barHeight: '4px', activeColor: '#ee0a24' }]"
    />

    <FormButtonGroup>
      <Submit :on-submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

自定义按钮

通过 button 插槽自定义滑块按钮内容。

vue

<script setup lang="ts">
import { createForm } from '@formily/core'
import { Form, FormButtonGroup, FormItem, Slider, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    progress: 50,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="progress"
      title="自定义按钮"
      :decorator="[FormItem]"
      :component="[Slider]"
    >
      <template #button="{ value }">
        <div class="custom-button">
          {{ value }}
        </div>
      </template>
    </Field>

    <FormButtonGroup>
      <Submit :on-submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

<style scoped>
.custom-button {
  width: 26px;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  text-align: center;
  background-color: var(--van-primary-color);
  border-radius: 999px;
}
</style>

垂直方向

设置 vertical 属性后，滑块会按父元素高度垂直展示。

vue

<script setup lang="ts">
import { createForm } from '@formily/core'
import { Form, FormButtonGroup, Slider, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    progress: 50,
    progressRange: [20, 60],
  },
})
</script>

<template>
  <Form :form="form">
    <div class="slider-vertical-panel">
      <div class="slider-vertical-item">
        <div class="slider-vertical-label">
          单滑块
        </div>
        <div class="slider-vertical-field">
          <Field
            name="progress"
            :component="[Slider, { vertical: true }]"
          />
        </div>
      </div>

      <div class="slider-vertical-item">
        <div class="slider-vertical-label">
          双滑块
        </div>
        <div class="slider-vertical-field">
          <Field
            name="progressRange"
            :component="[Slider, { range: true, vertical: true }]"
          />
        </div>
      </div>
    </div>

    <FormButtonGroup>
      <Submit :on-submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

<style scoped>
.slider-vertical-panel {
  display: flex;
  gap: 40px;
  align-items: flex-end;
  justify-content: center;
  min-height: 180px;
  padding: 16px 0 8px;
}

.slider-vertical-item {
  display: grid;
  gap: 12px;
  justify-items: center;
}

.slider-vertical-label {
  font-size: 12px;
  color: var(--van-text-color-2);
}

.slider-vertical-field {
  height: 150px;
}

.slider-vertical-field :deep(.van-slider) {
  height: 100%;
}
</style>

只读状态

这是 Formily 封装额外补充的示例，支持 readonly 和 readOnly 两种命名。

vue

<script setup lang="ts">
import { createForm } from '@formily/core'
import { Form, FormButtonGroup, FormItem, Slider, Submit } from '@silver-formily/vant'
import { Field } from '@silver-formily/vue'
import { showDemoResult } from '../shared'

const form = createForm({
  values: {
    volume: 45,
  },
})
</script>

<template>
  <Form :form="form">
    <Field
      name="volume"
      title="只读音量"
      :read-only="true"
      :decorator="[FormItem]"
      :component="[Slider, { step: 5 }]"
    />

    <FormButtonGroup>
      <Submit :on-submit="showDemoResult">
        查看结果
      </Submit>
    </FormButtonGroup>
  </Form>
</template>

API

使用约定

Formily 场景统一使用 modelValue 作为字段值，类型为 number | [number, number]
readPretty 模式下会自动切换到 PreviewText.Slider，空值显示占位符，非空值显示只读滑块
readOnly 会自动映射到 Vant 原生 readonly，便于和仓库内其他组件保持同一套命名习惯
disabled、readonly、readOnly 都会阻止继续调整滑块
未单独列出的 Vant Slider 官方属性和事件会继续透传

扩展属性

属性名	类型	描述	默认值
`modelValue`	`number \| [number, number]`	Formily 字段值	`-`
`readOnly`	`boolean`	兼容命名，会自动映射到 `readonly`	`-`

官方透传属性

以下属性会直接透传给 Vant Slider：

属性名	类型	描述	默认值
`min`	`number \| string`	最小值	`0`
`max`	`number \| string`	最大值	`100`
`step`	`number \| string`	步长	`1`
`range`	`boolean`	是否为范围选择	官方默认值
`reverse`	`boolean`	是否反向选择	官方默认值
`readonly`	`boolean`	是否只读	官方默认值
`disabled`	`boolean`	是否禁用	官方默认值
`vertical`	`boolean`	是否垂直展示	官方默认值
`barHeight`	`number \| string`	轨道粗细	官方默认值
`buttonSize`	`number \| string`	按钮尺寸	官方默认值
`activeColor`	`string`	已选轨道颜色	官方默认值
`inactiveColor`	`string`	未选轨道颜色	官方默认值

Events

事件名	描述	回调参数
`update:modelValue`	滑块值变化时触发	`Function`
`change`	松手后的变更事件	`Function`
`dragStart`	开始拖动时触发	`Function`
`dragEnd`	结束拖动时触发	`Function`

Slots

插槽名	描述	插槽参数
`button`	自定义滑块按钮	`Object`
`left-button`	双滑块模式下自定义左侧滑块按钮	`Object`
`right-button`	双滑块模式下自定义右侧滑块按钮	`Object`

参考

属性命名和交互能力主要参考 Vant Slider 官方文档（正式站）。

Slider ​

基础使用 ​

双滑块 ​

指定选择范围 ​

禁用 ​

指定步长 ​

自定义样式 ​

自定义按钮 ​

垂直方向 ​

只读状态 ​

API ​

使用约定 ​

扩展属性 ​

官方透传属性 ​

Events ​

Slots ​

参考 ​