element-plus/docs/en-US/component/slider.md
云游君 4560adfdf8
refactor(style): adjust component size to large/default/small (#4491)
* refactor(style): adjust component size to large/default/small

* refactor(components): avatar size & use flex instead of block

* refactor(components): adjust check button size

* refactor(components): adjust tag size

* refactor(components): adjust size doc

* fix(components): datetime-picker demo style width

* refactor(components): color-picker size & block to flex

* refactor(components): adjust slider input size

* refactor(components): adjust radio input size for demo

* refactor(components): adjust select size & docs

* refactor(components): adjust form radio size & docs

* refactor(components): add windicss for docs

* refactor(components): adjust skeleton avatar size to css var

* refactor(components): simplify typography size demo

* refactor(components): adjust dropdown size & demo

* refactor(components): adjust descriptions size

* fix(components): datetime-picker showcase class pollute global button

* chore(ci): upgrade docs dependencies to fix ci

* fix(ci): add highlight because vitepress not export it

* fix(ci): disable line for no-console

* fix(ci): remove mini to fix test

* fix(style): code font size

* fix(style): button span flex style

* fix(style): button padding horizontal default 15px

* refactor(components): adjust tag padding size & demo

* refactor(components): adjust form line-height for input

* refactor(components): adjust dropdown menu size & button padding

* fix(style): picker separator block to flex center

* fix: dropdown button span items-center

* style: adjust input-with-icon & size demo & fix input vitepress load

* chore: upgrade dependencies

* chore: upgrade dependencies

* ci: fix website build

* ci: regenerate pnpm-lock.yaml

* ci: use dev pnpm-lock

* ci: update pnpm-lock.yaml
2021-12-12 17:54:21 +08:00

118 lines
5.8 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
title: Slider
lang: en-US
---
# Slider
Drag the slider within a fixed range.
<style lang="scss">
.slider-demo-block {
display: flex;
align-items: center;
.el-slider {
flex: 1;
margin-left: 12px;
}
.demonstration {
font-size: 14px;
color: var(--el-text-color-secondary);
line-height: 44px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
& + .el-slider {
flex: 0 0 70%;
}
}
}
</style>
## Basic usage
The current value is displayed when the slider is being dragged.
:::demo Customize the initial value of the slider by setting the binding value.
slider/basic-usage
:::
## Discrete values
The options can be discrete.
:::demo Set step size with the `step` attribute. You can display breakpoints by setting the `show-stops` attribute.
slider/discrete-values
:::
## Slider with input box
Set value via a input box.
:::demo Set the `show-input` attribute to display an input box on the right.
slider/slider-with-input-box
:::
## Range selection
Selecting a range of values is supported.
:::demo Setting the `range` attribute activates range mode, where the binding value is an array made up of two boundary values.
slider/range-selection
:::
## Vertical mode
:::demo Setting the `vertical` attribute to `true` enables vertical mode. In vertical mode, the `height` attribute is required.
slider/vertical-mode
:::
## Show marks
:::demo Setting this `marks` attribute can show mark on slider.
slider/show-marks
:::
## Attributes
| Attribute | Description | Type | Accepted Values | Default |
| --------------------- | --------------------------------------------------------------------------------------------------------- | --------------- | ---------------------- | ------- |
| model-value / v-model | binding value | number | — | 0 |
| min | minimum value | number | — | 0 |
| max | maximum value | number | — | 100 |
| disabled | whether Slider is disabled | boolean | — | false |
| step | step size | number | — | 1 |
| show-input | whether to display an input box, works when `range` is false | boolean | — | false |
| show-input-controls | whether to display control buttons when `show-input` is true | boolean | — | true |
| input-size | size of the input box | string | large / default /small | default |
| show-stops | whether to display breakpoints | boolean | — | false |
| show-tooltip | whether to display tooltip value | boolean | — | true |
| format-tooltip | format to display tooltip value | function(value) | — | — |
| range | whether to select a range | boolean | — | false |
| vertical | vertical mode | boolean | — | false |
| height | Slider height, required in vertical mode | string | — | — |
| label | label for screen reader | string | — | — |
| debounce | debounce delay when typing, in milliseconds, works when `show-input` is true | number | — | 300 |
| tooltip-class | custom class name for the tooltip | string | — | — |
| marks | marks type of key must be `number` and must in closed interval `[min, max]`, each mark can custom style | object | — | — |
## Events
| Event Name | Description | Parameters |
| ---------- | ----------------------------------------------------------------------------------------------------------------- | -------------------- |
| change | triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released) | value after changing |
| input | triggers when the data changes (It'll be emitted in real time during sliding) | value after changing |