Slider
| Last update: | () |
| Message | feat(slider): boundary, use margin instead of border |
| Committer: | dkocsis |
| Version history | |
Variations
Range
<e-slider value="20,40" range></e-slider>
<e-slider value="20,40" range></e-slider>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>With value
<e-slider value="20"></e-slider>
<e-slider value="20"></e-slider>With min and max
<e-slider value="-40" min="-80" max="40"></e-slider>
<e-slider value="-40" min="-80" max="40"></e-slider>With min and max
<e-slider value="250" min="200" max="300"></e-slider>
<e-slider value="250" min="200" max="300"></e-slider>With step
<e-slider min="200" max="300" step="10"></e-slider>
<e-slider min="200" max="300" step="10"></e-slider>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>With labels
<e-slider min-label="Minimum" max-label="Maximum"></e-slider>
<e-slider min-label="Minimum" max-label="Maximum"></e-slider>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 |
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] } |