<dy-slider>
A slider component that allows users to select a value from a range by dragging a handle along a track. It supports both horizontal and vertical orientations, keyboard navigation, and optional editable input field.
Example
Loading...
<dy-slider
.value=${20}
.step=${2}
.editable=${true}
@change=${(evt) => evt.target.value = evt.detail}></dy-slider> <dy-slider
.value=${20}
.max=${50}
.step=${5}
.editable=${true}
.orientation=${"vertical"}
@change=${(evt) => evt.target.value = evt.detail}></dy-slider>
API
DuoyunSliderElement
Extends TapSliderElement
TapSliderElement
Shadow DOM; Extends GemElement
TapSliderElement Instance Properties
| Property(Attribute) | Reactive | Type | Description |
|---|---|---|---|
label(label) |
Yes | string |
|
orientation(orientation) |
Yes | 'horizontal' | 'vertical' |
|
editable(editable) |
Yes | boolean |
|
disabled(disabled) |
Yes | boolean |
|
value(value) |
Yes | number |
|
min(min) |
Yes | number |
|
max(max) |
Yes | number |
|
step(step) |
Yes | number |
|
change |
Emitter<number> |
||
end |
Emitter<number> |
Slider drop |
TapSliderElement Other
| Type | Value |
|---|---|
| Event | change, end |