Slider โ
...
Browser support โ
...
Parameters โ
HelloThe parametrization of the component can be done with the following custom HTML params:
Name | Type | Description |
---|---|---|
disabled | boolean? | Blocks the interaction with the input component. |
required | boolean? | Marks the input component as required. |
name | string? | Identification for the field inside the form |
The events emitted from the component are:
Name | Payload | Description |
---|---|---|
onchange | number | Returns the new value of the "value" attribute |
Playground โ
Customization โ
HTML Examples โ
Imports
html
<link rel="stylesheet" href="/0.3.6/@zurich/design-tokens/Icons.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/javascript.js" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/base.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Slider.css" />
<link rel="stylesheet" href="/0.3.6/@zurich/css-components/Icon.css" />
Code
html
<!-- Default -->
<label z-slider>
<span>Slider input</span>
<input type="range" min="0" max="100" />
<output>050</output>
</label>
<!-- With min and max -->
<label z-slider z-slider-min="0" z-slider-max="100">
<span>Slider input</span>
<input type="range" min="0" max="100" />
<output>050</output>
</label>
<!-- With icons -->
<label z-slider>
<span>Slider input</span>
<input type="range" min="0" max="100" />
<output>050</output>
<i z-icon="sound-off"></i>
<i z-icon="sound-on"></i>
</label>
<!-- Disabled -->
<label z-slider>
<span>Slider input</span>
<input type="range" min="0" max="100" disabled />
<output>050</output>
</label>
<!-- Invalid -->
<label z-slider>
<span>Slider input</span>
<input type="range" min="0" max="100" data-invalid />
<output>050</output>
</label>