Slider #
The slider component is a visualization for the number input. A user can drag a slider within a fixed range to get the required value.
Examples #
Default #
This is basic usage of the slider component.
Color #
You can customize the color of the slider.
Minimum and maximum values #
You can set a range between min and max values.
State #
Slider can be in disabled or readonly state.
Range slider #
You can set a range of values.
Step #
Step can be changed.
Pins #
Display markers on slider track.
Label #
Switch label can have an inverted position or a custom color.
Slots #
You can add inputs before and after the slider using 'append' or 'prepend' slot name. Also default label can be replaced using 'label' slot.
Icon #
You can insert icon at the start or end of slider.
Track #
Track can be hidden or have custom color.
Track label #
You can show track label and overwrite it's view.
Vertical #
Vertical state of slider.
Accessibility #
The component covers all the requirements of w3 slider template. It has role="slider" and the following attributes: aria-valuemin, aria-valuemax, aria-valuenow, aria-label, aria-orientation, aria-disabled, aria-readonly.
API #
Props #
| Name | Description | Types | Default |
|---|---|---|---|
| aria-label | The aria-label of the component |
|
|
| color | Color of slider. |
|
|
| disabled | Disables slider. |
|
|
| icon-append | Icon at the end of slider. |
|
|
| icon-prepend | Icon at the start of slider. |
|
|
| invert-label | Moves label to opposite side. |
|
|
| label | Slider label |
|
|
| label-color | Color of slider label. |
|
|
| max | Maximum value. |
|
|
| min | Minimum value. |
|
|
| model-value | The value of the |
|
|
| pins | Adds step marks to a slider track. |
|
|
| preset | Named preset combination of component props. |
| - |
| range | Transforms single value slider into range slider. |
|
|
| readonly | Makes slider read only. |
|
|
| show-track | Toggles track display. |
|
|
| stateful | Add possibility to work with component without setting |
|
|
| step | Slider value step. |
|
|
| track-color | Color of slider base track. |
|
|
| track-label | Label of slider track. |
| - |
| track-label-visible | Toggles track label visibility. |
|
|
| vertical | Makes slider vertical. |
|
|
Events #
| Name | Description |
|---|---|
change | Emitted on value input.. The event argument is: |
drag-end | Emitted on drag end. |
drag-start | Emitted on drag start. |
dragEnd | Emitted on drag end. |
dragStart | Emitted on drag start. |
update-model-value | The event is triggered when the component needs to change the model. Is also used by |
Slots #
| Name | Description |
|---|---|
append | Slot for input after slider. |
label | Replaces the default label. |
prepend | Slot for input before slider. |
trackLabel | The content of the |
Css Variables #
| Name | Default Value |
|---|---|
| --va-slider-track-border-radius | 0.25rem |
| --va-slider-track-transition | 0.5s ease-out |
| --va-slider-track-opacity | 1 |
| --va-slider-pin-transition | background-color 0.3s ease-out 0.1s |
| --va-slider-handler-width | 1.25rem |
| --va-slider-handler-height | 1.25rem |
| --va-slider-handler-background | var(--va-background-primary) |
| --va-slider-handler-border | 0.375rem solid |
| --va-slider-handler-border-radius | 50% |
| --va-slider-handler-outline | none !important |
| --va-slider-handler-left | -0.375rem |
| --va-slider-handler-transition | 0s |
| --va-slider-dot-transform | translate(-0.625rem, -0.625rem) |
| --va-slider-dot-display | block |
| --va-slider-dot-width | 1.75rem |
| --va-slider-dot-height | 1.75rem |
| --va-slider-dot-border-radius | 50% |
| --va-slider-dot-opacity | 0.2 |
| --va-slider-dot-pointer-events | none |
| --va-slider-dot-value-transform | translate(-50%, -100%) |
| --va-slider-dot-value-user-select | none |
| --va-slider-dot-value-font-size | 0.625rem |
| --va-slider-dot-value-letter-spacing | 0.6px |
| --va-slider-dot-value-line-height | 1.2 |
| --va-slider-dot-value-font-weight | 700 |
| --va-slider-dot-value-text-transform | none |
| --va-slider-dot-value-white-space | nowrap |
| --va-slider-input-label-user-select | none |
| --va-slider-input-label-font-size | 0.625rem |
| --va-slider-input-label-letter-spacing | 0.6px |
| --va-slider-input-label-line-height | 1.2 |
| --va-slider-input-label-font-weight | 700 |
| --va-slider-input-label-text-transform | uppercase |
| --va-slider-input-label-inverse-user-select | none |
| --va-slider-input-label-inverse-font-size | 0.625rem |
| --va-slider-input-label-inverse-letter-spacing | 0.6px |
| --va-slider-input-label-inverse-line-height | 1.2 |
| --va-slider-input-label-inverse-font-weight | 700 |
| --va-slider-input-label-inverse-text-transform | uppercase |
| --va-slider-horizontal-input-wrapper-margin-right | 1rem |
| --va-slider-horizontal-track-height | 0.5rem |
| --va-slider-horizontal-track-width | 100% |
| --va-slider-horizontal-handler-transform | translateX(-50%) |
| --va-slider-horizontal-dot-value-top | -8px |
| --va-slider-horizontal-dot-value-left | 50% |
| --va-slider-vertical-height | 100% |
| --va-slider-vertical-padding | 12px 0 12px 0 |
| --va-slider-vertical-flex-direction | column |
| --va-slider-vertical-align-items | center |
| --va-slider-vertical-label-margin-bottom | 0.625rem |
| --va-slider-vertical-label-inverse-left | -0.375rem |
| --va-slider-vertical-label-inverse-margin-top | 0.625rem |
| --va-slider-vertical-input-wrapper-max-width | 1rem |
| --va-slider-vertical-input-wrapper-min-width | 2.5rem |
| --va-slider-vertical-track-height | 100% |
| --va-slider-vertical-track-width | 0.5rem |
| --va-slider-vertical-track-bottom | 0 |
| --va-slider-vertical-handler-transform | translateY(50%) |
| --va-slider-vertical-dot-value-top | 0.625rem |
| --va-slider-vertical-dot-value-left | 1.25rem |