Avance

Drag the slider within a fixed range.

Basic usage

The current value is displayed when the slider is being dragged.

Customize the initial value of the slider by setting the binding value.

Default value

Hide Tooltip

Disabled

Viwer Source

Code

```vue
<template>
  <el-card class="box-card">
    <FieldSlider
      v-model="0"
    />
    <FieldSlider
      v-model="0"
      :show-tooltip="false"
    />
    <FieldSlider
      v-model="0"
      :disabled="true"
    />
  </el-card>
</template>
```

:::

Step

Set step size with the step attribute. You can display breakpoints by setting the show-stops attribute

Breakpoints not displayed

Breakpoints displayed

Viwer Source

Code

```vue
<template>
  <el-card class="box-card">
    <FieldSlider
      v-model="0"
      :step="10"
    />
    <FieldSlider
      v-model="0"
      :step="10"
      :show-stops="true"
    />
  </el-card>
</template>
```
:::

Range

Selecting a range of values is supported.

Setting the range attribute activates range mode, where the binding value is an array made up of two boundary values.

Viwer Source

Code

```vue
<template>
  <el-card class="box-card">
    <FieldSlider
      v-model="0"
      :show-stops="true"
      :range="true"
      :max="10"
    />
  </el-card>
</template>
```
:::

Vertical Mode

Setting the vertical attribute to true enables vertical mode. In vertical mode, the height attribute is required.

Viwer Source

Code

```vue
<template>
  <el-card class="box-card">
    <FieldSlider
      v-model="0"
      :vertical="true"
    />
  </el-card>
</template>
```
:::

Props

Name	Description	Type	Mandatory
percentage	percentage.	Number	True
textInside	whether to place the percentage inside progress bar, only works when type is 'line'.	Boolean	True

Attributes

Name	Description	Type	Default
type	the type of progress bar line/circle/dashboard	String	line
strokeWidth	the width of progress bar	Number	6
status	the current status of progress bar success/exception/warning	String	────
indeterminate	set indeterminate progress	Boolean	False
disabled	Disable the Button	Boolean	False

Example for Developer

Open in StackBlitz

Directory

  └─ src                                            # Main source code.
      └── Components                                # Global components
              └── Atoms                             # Atom components
                  └── FieldSilder                 # Field silder specific components.