Constructor
# new Slider(config)
Its a Custom Web Component. Do not use the constructor directly with the new keyword. Instead, use one of the 3 following methods:
Create the Web Component and call its init method:
const mySlider = document.createElement("a-slider").init(config)
Or use the shorthand for it:
const mySlider = createSlider({
label: "%complete",
min: 0,
max: 200
})
mySlider.render()
Or directly declare the config inside a container component:
const myPanel = createPanel({
title: "My panel",
items: [
{
type: "slider",
label: "% complete",
colorOn: "#00aaee",
colorOff: "#dddddd"
}
]
})
myPanel.render()
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
config |
object
|
||
label |
string
|
||
value |
number
|
<optional> |
Default value |
min |
number
|
<optional> |
Default 0 |
max |
number
|
<optional> |
Default 100 |
step |
number
|
<optional> |
Slider step - Default 5 |
labelWidth |
string
|
<optional> |
|
labelPosition |
string
|
<optional> |
left | right | top | bottom |
labelAlign |
string
|
<optional> |
left | right |
fontSize |
string
|
<optional> |
|
formula |
string
|
<optional> |
|
width |
string
|
number
|
<optional> |
|
height |
string
|
number
|
<optional> |
|
margin |
string
|
<optional> |
|
padding |
string
|
<optional> |
|
readOnly |
boolean
|
<optional> |
|
disabled |
boolean
|
<optional> |
this
Generated markup
<a-slider class="a-slider">
<label class="field-label"></label>
<span class="field-slider-container">
<span class="field-slider" type="range">
<span class="field-slider-value">
</span>
</a-slider>
Methods
# setLabelPosition(position)
Set label position
Parameters:
| Name | Type | Description |
|---|---|---|
position |
string
|
"left" (default) | "right" | "top" | "bottom" |
this
# setValue(newValue, rawUpdateopt)
Set the field value
Parameters:
| Name | Type | Attributes | Description |
|---|---|---|---|
newValue |
boolean
|
The new field value |
|
rawUpdate |
boolean
|
<optional> |
If true, it doesn't update the associated record and doesn't trigger "change" event |
this