Slider
Default
<e-slider></e-slider><e-slider></e-slider>JavaScript
Variations
Range
<e-slider value="20,40" range></e-slider><e-slider value="20,40" range></e-slider>JavaScript
Range with steps
<e-slider value="-50,50" min="-200" max="200" range step="50" show-steps></e-slider><e-slider value="-50,50" min="-200" max="200" range step="50" show-steps></e-slider>JavaScript
With value
<e-slider value="20"></e-slider><e-slider value="20"></e-slider>JavaScript
With min and max
<e-slider value="-40" min="-80" max="40"></e-slider><e-slider value="-40" min="-80" max="40"></e-slider>JavaScript
With min and max
<e-slider value="250" min="200" max="300"></e-slider><e-slider value="250" min="200" max="300"></e-slider>JavaScript
With step
<e-slider min="200" max="300" step="10"></e-slider><e-slider min="200" max="300" step="10"></e-slider>JavaScript
With show-steps
<e-slider min="0" max="200" step="10" show-steps></e-slider><e-slider min="0" max="200" step="10" show-steps></e-slider>JavaScript
With labels
<e-slider min-label="Minimum" max-label="Maximum"></e-slider><e-slider min-label="Minimum" max-label="Maximum"></e-slider>JavaScript
Without bubble
<e-slider no-bubble></e-slider><e-slider no-bubble></e-slider>JavaScript
Disabled
<e-slider disabled="true"></e-slider><e-slider disabled="true"></e-slider>JavaScript
Values
<e-slider step="1" max="3" value="0" show-steps no-bubble></e-slider>
<div class="e-slider e-slider-values">
<div class="e-slider__value e-slider__value-min">
No Access
</div>
<div class="e-slider__value">
Basic Access
</div>
<div class="e-slider__value">
Editor Access
</div>
<div class="e-slider__value e-slider__value-max">
Manager Access
</div>
</div><e-slider step="1" max="3" value="0" show-steps no-bubble></e-slider>
<div class="e-slider e-slider-values">
<div class="e-slider__value e-slider__value-min">
No Access
</div>
<div class="e-slider__value">
Basic Access
</div>
<div class="e-slider__value">
Editor Access
</div>
<div class="e-slider__value e-slider__value-max">
Manager Access
</div>
</div>JavaScript
API Reference
Properties
| Name | Description | Type | Required | Default value |
|---|---|---|---|---|
| value | Initial value of the slider | string | 50 | |
| range | Range slider, values should be separated with comma, eg: '20,80' | boolean | false | |
| min | Minimum value for the slider, should be smaller than maximum. If maximum has not given, this should be smaller than 100 | int | 0 | |
| max | Maximum value for the slider, should be larger than minimum. If minimum has not given, this should be larger than 0 | int | 100 | |
| step | Number of intervals for the slider | int | 1 | |
| show-steps | Display legal numbers on the slider | int | false | |
| min-label | Text to display in the minimum position | string | ||
| max-label | Text to display in the maximum position | string | ||
| no-bubble | Disable value tooltip on the bubble | boolean | false | |
| disabled | Disabled state for the slider | boolean | false | |
| priority | The color of slider. Can be any value that has a corresponding text-color utility class. | string | secondary |
Events
| Event | Description | Returns |
|---|---|---|
update | Fires on value update | {
detail: {
value: [as string],
inprogress: true/false,
lowValue: [as int, only on range],
highValue: [as int, only on range]
}
} |