Slider
Supports single-direction slider and dual-direction slider, can be used to select a value or a range within a range.
Component Types
Basic Usage
v-model is the binding value. When the value is number, one slider is displayed.
html
<wd-slider v-model="value" />ts
const value = ref<number>(30)Dual Slider
After setting range, the binding value becomes an array type.
html
<wd-slider v-model="value" range />ts
const value = ref<number[]>([20, 60])Component States
Disabled State
Set disabled to disable the slider.
html
<wd-slider v-model="value" disabled />Component Styles
Show Extreme Values
Set show-extreme-value to display the minimum and maximum values.
html
<wd-slider v-model="value" show-extreme-value />Capsule Style
Set theme="capsule" to use the capsule style.
html
<wd-slider v-model="value" theme="capsule" />Specify Step Size
Set the step size through step.
html
<wd-slider v-model="value" :step="10" />Specify Selection Range
Set the value range through min and max.
html
<wd-slider v-model="value" :min="-10" :max="10" show-extreme-value />Scale Marks
Configure scale marks through marks.
html
<wd-slider v-model="value" :marks="[0, 25, 50, 75, 100]" :step="25" />Scale Marks (Capsule)
Scale marks can also be combined with the capsule style.
html
<wd-slider v-model="value" :marks="[0, 25, 50, 75, 100]" :step="25" theme="capsule" />Layout Capabilities
Vertical Direction
Set vertical to display in vertical direction.
html
<wd-slider v-model="value" vertical />
<wd-slider v-model="rangeValue" vertical range />Vertical + Capsule
Vertical direction supports combination with theme="capsule".
html
<wd-slider v-model="value" vertical theme="capsule" />
<wd-slider v-model="rangeValue" vertical theme="capsule" range show-extreme-value />Attributes
| Parameter | Description | Type | Default Value |
|---|---|---|---|
| model-value / v-model | Current slider value, single slider is number, dual slider is number[] | SliderValue | 0 |
| min | Minimum value | number | 0 |
| max | Maximum value | number | 100 |
| step | Step size | number | 1 |
| range | Whether it is dual slider mode | boolean | false |
| vertical | Whether to display vertically | boolean | false |
| theme | Slider style, optional values are default, capsule | SliderTheme | 'default' |
| disabled | Whether disabled | boolean | false |
| show-extreme-value | Whether to display minimum and maximum value text | boolean | false |
| popover-visible | Bubble display mode, optional values are always, normal, never | SliderPopoverVisible | 'normal' |
| marks | Scale marks, supports array or object form | SliderMarks | - |
| active-color | Progress bar active state color | string | '' |
| inactive-color | Progress bar inactive state color | string | '' |
| custom-class | Root node style class | string | '' |
| custom-style | Root node style | string | '' |
Events
| Event Name | Description | Parameters |
|---|---|---|
| dragstart | Triggered when starting to drag | { value } |
| dragmove | Triggered during dragging | { value } |
| dragend | Triggered when dragging ends | { value } |
| change | Triggered when value changes | value |
Methods
| Method Name | Description | Parameters |
|---|---|---|
| initSlider | Initialize slider size data | - |
主题定制
CSS 变量
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。
| 名称 | 默认值 | 描述 |
|---|---|---|
| --wot-slider-bar-height | $n-2 | - |
| --wot-slider-bar-height-capsule | $n-24 | - |
| --wot-slider-bar-bg | $filled-strong | - |
| --wot-slider-bar-radius | $radius-radius-full | - |
| --wot-slider-bar-height-vertical | $n-248 | - |
| --wot-slider-line-bg | $primary-6 | - |
| --wot-slider-line-height | $n-2 | - |
| --wot-slider-line-height-capsule | $n-18 | - |
| --wot-slider-dot-size | $n-24 | - |
| --wot-slider-dot-bg | $filled-oppo | - |
| --wot-slider-dot-shadow | 0 2px 8px 0 rgba(0, 0, 0, 0.1) | - |
| --wot-slider-dot-popover-bg | $opacfilled-tooltip-toast-cover | - |
| --wot-slider-dot-popover-color | $text-white | - |
| --wot-slider-dot-popover-radius | $radius-main | - |
| --wot-slider-dot-popover-padding | $padding-extra-tight $padding-loose | - |
| --wot-slider-dot-popover-font-size | $typography-body-size-main | - |
| --wot-slider-dot-popover-line-height | $typography-body-line--height-size-main | - |
| --wot-slider-dot-popover-gap | $n-3 | - |
| --wot-slider-dot-popover-arrow-width | $n-12 | - |
| --wot-slider-dot-popover-arrow-height | $n-6 | - |
| --wot-slider-dot-popover-duration-exit | 100ms | - |
| --wot-slider-dot-popover-easing-exit | cubic-bezier(0.4, 0, 1, 1) | - |
| --wot-slider-dot-popover-duration-enter | 200ms | - |
| --wot-slider-dot-popover-easing-enter | cubic-bezier(0.34, 1.56, 0.64, 1) | - |
| --wot-slider-scale-size | $n-6 | - |
| --wot-slider-scale-border-radius | $radius-radius-full | - |
| --wot-slider-scale-bg | $filled-strong | - |
| --wot-slider-scale-bg-active | $primary-6 | - |
| --wot-slider-scale-capsule-bg | $filled-strong | - |
| --wot-slider-scale-capsule-width | $n-2 | - |
| --wot-slider-scale-capsule-border-radius | $radius-zero | - |
| --wot-slider-scale-desc-font-size | $typography-body-size-main | - |
| --wot-slider-scale-desc-line-height | $typography-body-line--height-size-main | - |
| --wot-slider-scale-desc-color | $text-main | - |
| --wot-slider-scale-desc-spacing | $spacing-tight | - |
| --wot-slider-marks-desc-spacing | calc($slider-dot-size / 2 + $spacing-tight) | - |
| --wot-slider-marks-desc-capsule-spacing | calc($slider-dot-size + $spacing-super-tight) | - |
| --wot-slider-marks-extra-padding | $padding-super-loose | - |
| --wot-slider-marks-extra-capsule-padding | $padding-ultra-loose | - |
| --wot-slider-capsule-track-inset | $n-3 | - |
| --wot-slider-extreme-spacing | $spacing-loose | - |
| --wot-slider-value-font-size | $typography-body-size-main | - |
| --wot-slider-value-color | $text-secondary | - |
| --wot-slider-opacity-disabled | $opacity-disabled | - |