Slider - Web Component
Browser support
Parameters
The Web component uses the <z-slider> tag:
The parametrization of the component can be done with the following custom HTML params:
| Name | Type | Description |
|---|---|---|
label(optional) | string | The label of the slider |
disabled(optional) | boolean | Blocks the interaction with the input component. |
required(optional) | boolean | Marks the input component as required. |
name(optional) | string | Identification for the field inside the form |
invalid(optional) | boolean | The forced state for set the input as invalid |
range(optional) | number[] | The range of the slider |
icon-right(optional) | string | The icon to show on the right side of the slider |
icon-left(optional) | string | The icon to show on the left side of the slider |
show-max(optional) | boolean | Whether to show the maximum value of the slider |
show-min(optional) | boolean | Whether to show the minimum value of the slider |
The events emitted from the component are:
| Name | Payload | Description |
|---|---|---|
onchange | number | Returns the new value of the "value" attribute |
label
The label parameter is used to set the label of the slider.
value
The value parameter is used to set the value of the slider. Make sure the value is within the range.
disabled
The disabled parameter is used to block the interaction with the slider, and it will not be possible to change the value.
required
The required parameter is used to make the slider required.
name
The name parameter is used to set the name of the slider. This name will be used when submitting the form.
range
The range parameter is used to set the range of the slider. The range must be an array with two values, the first value is the minimum value, and the second value is the maximum value.
icon-right
The icon-right parameter is used to set an icon on the right side of the slider. Use the icon name from the Icon component.
icon-left
Same as icon-right, but the icon will be on the left side of the slider.
show-max
The show-max parameter is used to show the maximum value of the slider.
show-min
The show-min parameter is used to show the minimum value of the slider.
Playground
Customization
HTML Examples
Imports
html
<link rel="stylesheet" href="/0.4.3/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.3/@zurich/web-components/slider.js"></script>Code
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ZDS | Link Web Component example</title>
<!-- #region imports -->
<link rel="stylesheet" href="/0.4.3/@zurich/web-components/styles.css" />
<script type="module" src="/0.4.3/@zurich/web-components/slider.js"></script>
<!-- #endregion imports -->
<link rel="stylesheet" href="/0.4.3/examples/styles.css" />
<script type="module" src="/0.4.3/examples/params-script.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<th>-</th>
<td>
<div>
<z-slider label="Slider input" range='[0, 100]'>
</z-slider>
</div>
</td>
</tr>
<tr>
<th>with min and max</th>
<td>
<div>
<z-slider label="Slider input" range='[0, 100]' show-min="0" show-max="100">
</z-slider>
</div>
</td>
</tr>
<tr>
<th>with icons</th>
<td>
<div>
<z-slider label="Slider input" range='[0, 100]' icon-left="sound-off" icon-right="sound-on">
</z-slider>
</div>
</td>
</tr>
<tr>
<th>disabled</th>
<td>
<div>
<z-slider label="Slider input" range='[0, 100]' disabled>
</z-slider>
</div>
</td>
</tr>
<tr>
<th>invalid</th>
<td>
<div>
<z-slider label="Slider input" range='[0, 100]' invalid>
</z-slider>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>