StackGenVis: Alignment of Data, Algorithms, and Models for Stacking Ensemble Learning Using Performance Metrics https://doi.org/10.1109/TVCG.2020.3030352

10 KiB

Raw Blame History

Props

value

Type: Value | Array<Value>
```
type Value = number | string
```
Default: 0
Usage:
```
<vue-slider v-model="value" />
```
The value of the slider, by default only the number type can be used.

::: tip The string type is only supported when data is set. :::

dotSize

Type: number | Array<number, number>
Default: 14
Usage:

The slider size, when the value is an array, represents [width, height].

width

Type: number | string
Default: undefined
Usage:

The width of the component (unit px) defaults to auto in the horizontal direction and 4 in the vertical direction.

height

Type: number | string
Default: undefined
Usage:

The height of the component (unit px), which defaults to 4 in the horizontal direction.

silent

Type: boolean
Default: false
Usage:

Set to true to turn off console errors.

contained

Type: boolean
Default: false
Usage:

Whether or not the slider should be fully contained within its containing element.
See also: Common usage > Contained

direction

Type: 'ltr' | 'rtl' | 'ttb' | 'btt'
Default: ltr
Usage:

The direction of the component

ltr means Left to Right, Other similarity.

When the value is ltr or rtl, it is horizontal, and when it is ttb or btt, it is vertical.

::: warning In the vertical direction, you need to set the component height, otherwise it will not render properly. :::

data

Type: Array<number> | Array<string>
Default: undefined

Usage:

Custom data.

<vue-slider :data="['A', 'B', 'C', 'D']" v-model="value" />

See also: Data

min

Type: number
Default: 0
Usage:

Minimum value.

max

Type: number
Default: 100
Usage:

Maximum value

interval

Type: number
Default: 1
Usage:

The interval between two values.

::: tip The value must be greater than 0 and can be divisible by (max - min). :::

disabled

Type: boolean
Default: false
Usage:

Whether to disable the component.

clickable

Type: boolean
Default: true
Usage:

Whether to allow changes to values by clicking.

dragOnClick

::: version New in 3.0.41+ :::

Type: boolean
Default: false
Usage:

Whether to allow dragging the slider when pressing the process.
See also: Common usage > DragOnClick

duration

Type: number
Default: 0.5
Usage:

The transition time of the slide, in units of s.

adsorb

Type：boolean
Default：false
Usage：

Whether the slider automatically adsorb to the nearest value.
See also: Common usage > Adsorb

lazy

Type: boolean
Default: false
Usage:

Is it lazy to update the value.

Useful whenever you need to consume a high-loss operation (e.g. Ajax).

If you set lazy and still need to listen for changes in the value, you can listen to the event dragging.
```
<vue-slider
  v-model="value"
  :lazy="true"
  @dragging="val => // do something"
/>
```
See also: Common usage > Lazy

Type: 'none' | 'always' | 'hover' | 'focus' | 'active'
Default: 'active'
Usage:

Control Tooltip display.

When the value is none, the Tooltip is never displayed;

When the value is always, the Tooltip is always displayed;

When the value is hover, the Tooltip will be displayed when the slider get hover;

When the value is focus, the Tooltip will only be displayed when the slider has focus. And when useKeyboard is true, the end of the drag will still get the focus.

When the value is active, the Tooltip have both hover and focus;
See also: Tooltip > tooltip

tooltipPlacement

Type: Position | Array<Position>

type Position = 'top' | 'right' | 'bottom' | 'left'

Default: 'top' (on horizontal) or 'left' (on vertical)
Usage:

The placement of the Tooltip.
See also: Tooltip > tooltipPlacement

tooltipFormatter

type：TooltipFormatter | Array<TooltipFormatter>

type TooltipFormatter = string | (val: Value) => string

Default: undefined

Usage:

Format the value of the Tooltip. When the type is string, {value} will be replaced with the value of Tooltip.

  <!-- 0% -->
  <vue-slider v-model="value" :tooltip-formatter="'{value}%'"/>

  <!-- A/B/C/D -->
  <vue-slider
    v-model="value"
    :data="['a', 'b', 'c', 'd']"
    :tooltip-formatter="val => val.toUpperCase()"
  />

See also: Tooltip > tooltipFormatter

useKeyboard

Type: boolean
Default: false
Usage:

Keyboard control, when the value is true, the drag end slider still gets the focus.

keydownHook

::: version New in 3.0.33+ :::

Type: (e: KeyboardEvent) => HandleFunction | boolean

// @Param {index} Index of the active slider
// @Return New index
type HandleFunction = (index: number) => number

Default: undefined
Usage:

Keyboard controlled hook function.

When the function returns false, the value does not change.

If true is returned, the default action is used.

enableCross

Type: boolean
Default: true
Usage:

Whether to allow sliders to cross, only valid for multiple sliders.
See also: Range mode

fixed

Type: boolean
Default: false
Usage:

Whether to fix the slider spacing, only valid for multiple sliders.
See also: Range mode

minRange

Type: number
Default: undefined
Usage:

Minimum distance between sliders, only valid for multiple sliders.
See also: Range mode

maxRange

Type: number
Default: undefined
Usage:

Maximum distance between sliders, only valid for multiple sliders.
See also: Range mode

order

Type: boolean
Default: true
Usage:

Whether to sort values, only valid for multiple sliders.

For example, when the value is false, [50, 30] will not be automatically sorted to [30, 50].

This is effective when distinguishing multiple sliders.

::: warning When the value is false, the parameters minRange, maxRange, fixed, enableCross are invalid. :::
See also: Disorderly slider

marks

Type: boolean | Marks | Array<number | string> | MarksFunction

interface Mark {
  key: string]: string | MarkOption
}
interface MarkOption {
  label: Value
  style?: Styles
  activeStyle?: Styles
  labelStyle?: Styles
  labelActiveStyle?: Styles
}
type MarksFunction = (value: Value) => boolean | MarkOption

Default: undefined
Usage:

Used to control the Mark of the display.

included

Type: boolean
Default: false
Usage:

Only valid if marks is not empty.

If the value is true, value will automatically set to the nearest mark.
See also: Mark > Use with included

dotOptions

Type: DotOption | DotOption[]

interface DotOption {
  disabled: boolean
  tooltip: 'none' | 'always' | 'hover' | 'focus' | 'active'
  min: Value
  max: Value
  style: Object
  focusStyle: Object
  disabledStyle: Object
  tooltipStyle: Object
  tooltipFocusStyle: Object
  tooltipDisabledStyle: Object
}

Default: undefined
Usage:

Slider settings, multiple sliders can be distinguished by array type.

process

Type: boolean | ProcessFunc

type ProcessFunc = (dotsPos: Array<number>) => Array<Array<number, number, Styles?>>

Default: true
Usage:

Control the display of the process and support multiple processs.

::: tip When multiple sliders, the default is from the first to the last. :::
See also: Process

dotStyle

Type: Object
Default: null
Usage:

Slider style.

::: tip If you need to set the active or disabled style. Please use the dotOptions parameter.

And dotOptions can set multiple sliders separately. :::

railStyle

Type: Object
Default: null
Usage:

Background style.

processStyle

Type: Object
Default: null
Usage:

The style of the progress bar.

::: tip If multiple process bar styles need to distinguish settings, use the process parameter. :::

tooltipStyle

Type: Object
Default: null
Usage:

The style of the tooltip.

stepStyle

Type: Object
Default: null
Usage:

The style of the step.

stepActiveStyle

Type: Object
Default: null
Usage:

The style of the step activation state.

labelStyle

Type: Object
Default: null
Usage:

The style of the label.

labelActiveStyle

Type: Object
Default: null
Usage:

The style of the label activation state.

10 KiB Raw Blame History