127 lines
3.8 KiB
Markdown
127 lines
3.8 KiB
Markdown
# Slider
|
|
|
|
## Demos
|
|
|
|
### Size variants
|
|
|
|
Available size variants for the [`ui`](#props-ui) prop: `s` / `m`.
|
|
|
|
[[ demo src="/demo/slider/size.vue" ]]
|
|
|
|
### Read-only/disabled
|
|
|
|
Use the [`readonly`](#props-readonly) prop to set a slider read-only. Use the [`disabled`](#props-disabled) prop to set a slider disabled.
|
|
|
|
[[ demo src="/demo/slider/editable.vue" ]]
|
|
|
|
### Steps
|
|
|
|
Use the `step` to make value change by specified step value when clicking spinner buttons, or pressing <kbd>▴</kbd> or <kbd>▾</kbd>.
|
|
|
|
[[ demo src="/demo/slider/steps.vue" ]]
|
|
|
|
### Range
|
|
|
|
Use the [`max`](#props-max) / [`min`](#props-min) props to specify the values at both ends of the slider.
|
|
|
|
[[ demo src="/demo/slider/range.vue" ]]
|
|
|
|
### Secondary bar
|
|
|
|
Use the [`secondary-progress`](#props-secondary-progress) prop to specify a secondary progress bar.
|
|
|
|
[[ demo src="/demo/slider/buffer.vue" ]]
|
|
|
|
### Customization
|
|
|
|
Use the [`thumb`](#slots-thumb) / [`tip`](#slots-tip) slots to customize the content of slider thumb and tooltip.
|
|
|
|
[[ demo src="/demo/slider/variant.vue" ]]
|
|
|
|
## API
|
|
|
|
### Props
|
|
|
|
| Name | Type | Default | Description |
|
|
| -- | -- | -- | -- |
|
|
| ``ui`` | `string=` | - | [^ui] |
|
|
| ``value`` | `*|Array<*>` | - | [^value] |
|
|
| ``secondary-progress`` | `number | Array<number>` | `0` | Secondary progress value. |
|
|
| ``min`` | `number` | `0` | The minimun value after `value` is processed by the `parse` function. |
|
|
| ``max`` | `number` | `1` | The maximum value after `value` is processed by the `parse` function. |
|
|
| ``step`` | `number` | `0` | The step value after `value` is processed by the `parse` function. |
|
|
| ``mark`` | `boolean` | `false` | Whether to display step marks. |
|
|
| ``parse`` | `function` | `val => val` | The parse function to transform input value. |
|
|
| ``format`` | `function` | `val => val` | The format function to transform output value. |
|
|
|
|
^^^ui
|
|
Style variants.
|
|
|
|
+++Enum values
|
|
| Value | Description |
|
|
| -- | -- |
|
|
| `s` | Small. |
|
|
| `m` | Medium. |
|
|
+++
|
|
^^^
|
|
|
|
^^^value
|
|
The value of the slider.
|
|
|
|
By default the type is `number` and the value should between `min` and `max` after parsed by the `parse` function.
|
|
|
|
When being the type of `Array<number>`, multiple thumbs will be rendered corresponding to each value.
|
|
|
|
:::tip
|
|
When `parse` and `format` are specified, values can be of any type, and `parse` should transform the value to `number` and `format` should transform the value to the same type as the [`value`](#props-value) prop. `parse` and `format` only need to take care of single values instead of arrays and the component itself will apply transformation on multiple values if necessary.
|
|
:::
|
|
^^^
|
|
|
|
### Slots
|
|
|
|
| Name | Description |
|
|
| -- | -- |
|
|
| ``track`` | The track of the slider. Displays a bar by default. |
|
|
| ``tip-label`` | The tooltip content. Displays the current `value` or its item by default. |
|
|
| ``thumb`` | [^slot-thumb] |
|
|
| ``tip`` | [^slot-tip] |
|
|
|
|
^^^slot-thumb
|
|
The thumb(s) of the slider. Displays a round button by default.
|
|
|
|
+++Slot props
|
|
| Name | Type | Description |
|
|
| -- | -- | -- |
|
|
| `index` | `number` | The index of current thumb. |
|
|
| `focus` | `boolean` | Whether current thumb is focused. |
|
|
| `hover` | `boolean` | Whether user is pointing current thumb. |
|
|
| `dragging` | `boolean` | Whether the current thumb is being dragged. |
|
|
+++
|
|
^^^
|
|
|
|
^^^slot-tip
|
|
The entire tooltip for each thumb. Displays a `Tooltip` component with `value` as its content by default.
|
|
|
|
+++Slot props
|
|
| Name | Type | Description |
|
|
| -- | -- | -- |
|
|
| `target` | `HTMLElement` | The rendered `Element` for current thumb. |
|
|
| `open` | `boolean` | Whether there is any active thumb. |
|
|
| `active-index` | `boolean` | The index of the current active thumb. |
|
|
+++
|
|
^^^
|
|
|
|
### Events
|
|
|
|
| Name | Description |
|
|
| -- | -- |
|
|
| ``input`` | [^event-input] |
|
|
|
|
^^^event-input
|
|
:::badges
|
|
`v-model`
|
|
:::
|
|
|
|
Triggered after the value changed. The callback parameter type is `(value: *)`, where `value` is the new value (transformed by the `format` function).
|
|
^^^
|