1# slider
2
3>  **NOTE**
4>
5> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version.
6
7The **\<slider>** component is used to quickly adjust settings, such as the volume and brightness.
8
9
10## Child Components
11
12Not supported
13
14
15## Attributes
16
17In addition to the [universal attributes](js-components-common-attributes.md), the following attributes are supported.
18
19| Name| Type| Default Value| Mandatory| Description|
20| -------- | -------- | -------- | -------- | -------- |
21| min | number | 0 | No| Minimum value of the slider.|
22| max | number | 100 | No| Maximum value of the slider.|
23| step | number | 1 | No| Step of each slide.|
24| value | number | 0 | No| Initial value of the slider.|
25| mode<sup>5+</sup> | string | outset | No| Slider style. Available values are as follows:<br>- **outset**: The slider is on the slider track.<br>- **inset**: The slider is in the slider track.|
26| showsteps<sup>5+</sup> | boolean | false | No| Whether to display slider scales.|
27| showtips<sup>5+</sup> | boolean | false | No| Whether a tooltip is displayed to show the percentage value on the slider.|
28
29
30## Styles
31
32In addition to the [universal styles](js-components-common-styles.md), the following styles are supported.
33
34| Name| Type| Default Value| Mandatory| Description|
35| -------- | -------- | -------- | -------- | -------- |
36| color | &lt;color&gt; | #19000000 | No| Background color of the slider.|
37| selected-color | &lt;color&gt; | #ff007dff | No| Selected color of the slider.|
38| block-color | &lt;color&gt; | \#ffffff | No| Slider color.|
39
40
41## Events
42
43In addition to the [universal events](js-components-common-events.md), the following events are supported.
44
45| Name| Parameter| Description|
46| -------- | -------- | -------- |
47| change | ChangeEvent | Triggered when the value changes.|
48
49**Table 1** ChangeEvent
50
51| Attribute| Type| Description|
52| -------- | -------- | -------- |
53| value<sup>5+</sup> | number | Current value of the slider.|
54| mode<sup>5+</sup> | string | Type of the change event. Available values are as follows:<br>- **start**: The **value** starts to change.<br>- **move**: The **value** is changing with users' dragging.<br>- **end**: The **value** stops changing.<br>- **click**: The **value** changes upon a touch on the slider.|
55
56
57## Example
58
59```html
60<!-- xxx.hml -->
61<div class="container">
62    <slider min="0" max="100" value="{{ value }}" mode="outset" showtips="true"></slider>
63    <slider class="" min="0" max="100" value="{{ value }}" step="20" mode="inset"  showtips="true"></slider>
64    <slider class="" min="0" max="100" value="{{ value }}" showsteps="true" step="20" mode="inset"  showtips="false"></slider>
65</div>
66```
67
68```css
69/* xxx.css */
70.container {
71    flex-direction: column;
72    justify-content: center;
73    align-items: center;
74}
75slider{
76    margin-top: 100px;
77}
78```
79
80
81![slider](figures/slider.png)
82