1# slider 2 3The **\<Slider>** component is used to quickly adjust settings, such as the volume and brightness. 4 5> **NOTE** 6> 7> This component is supported since API version 4. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## Attributes 16 17| Name | Type | Default Value | Mandatory | Description | 18| ----- | ------ | ---- | ---- | ---------------------------------------- | 19| min | number | 0 | No | Minimum value of the slider. | 20| max | number | 100 | No | Maximum value of the slider. | 21| value | number | 0 | No | Initial value of the slider. | 22| id | string | - | No | Unique ID of the component. | 23| style | string | - | No | Style declaration of the component. | 24| class | string | - | No | Style class of the component, which is used to refer to a style table. | 25| ref | string | - | No | Reference information of child elements, which is registered with the parent component on **$refs**.| 26 27 28## Events 29 30| Name | Parameter | Description | 31| ------------------ | --------------------------------- | -------------- | 32| change | ChangeEvent | Triggered when the value changes.| 33| click | - | Triggered when the component is clicked. | 34| longpress | - | Triggered when the component is long pressed. | 35| swipe<sup>5+</sup> | [SwipeEvent](js-lite-common-events.md) | Triggered when a user quickly swipes on the component. | 36 37 **Table 1** ChangeEvent 38 39| Attribute | Type | Description | 40| ---------------------------------------- | ------ | ------------- | 41| progress<sup>(deprecated<sup>5+</sup>)</sup> | string | Current value of the slider.| 42| value<sup>5+</sup> | number | Current value of the slider.| 43 44 45## Styles 46 47| Name | Type | Default Value | Mandatory | Description | 48| ---------------------------------- | ---------------------------------------- | -------- | ---- | ---------------------------------------- | 49| color | <color> | \#000000 | No | Background color of the slider. | 50| selected-color | <color> | \#ffffff | No | Selected color of the slider. | 51| width | <length> \| <percentage><sup>5+</sup> | - | No | Component width.<br>If this attribute is not set, the default value **0** is used. | 52| height | <length> \| <percentage><sup>5+</sup> | - | No | Component height.<br>If this attribute is not set, the default value **0** is used. | 53| padding | <length> | 0 | No | Shorthand attribute to set the padding for all sides.<br>The attribute can have one to four values:<br>- If you set only one value, it specifies the padding for all the four sides.<br>- If you set two values, the first value specifies the top and bottom padding, and the second value specifies the left and right padding.<br>- If you set three values, the first value specifies the top padding, the second value specifies the left and right padding, and the third value specifies the bottom padding.<br>- If you set four values, they respectively specify the padding for top, right, bottom, and left sides (in clockwise order).| 54| padding-[left\|top\|right\|bottom] | <length> | 0 | No | Left, top, right, and bottom padding. | 55| margin | <length> \| <percentage><sup>5+</sup> | 0 | No | Shorthand attribute to set the margin for all sides. The attribute can have one to four values:<br>- If you set only one value, it specifies the margin for all the four sides.<br>- If you set two values, the first value specifies the top and bottom margins, and the second value specifies the left and right margins.<br>- If you set three values, the first value specifies the top margin, the second value specifies the left and right margins, and the third value specifies the bottom margin.<br>- If you set four values, they respectively specify the margin for top, right, bottom, and left sides (in clockwise order).| 56| margin-[left\|top\|right\|bottom] | <length> \| <percentage><sup>5+</sup> | 0 | No | Left, top, right, and bottom margins. | 57| border-width | <length> | 0 | No | Shorthand attribute to set the margin for all sides. | 58| border-color | <color> | black | No | Shorthand attribute to set the color for all borders. | 59| border-radius | <length> | - | No | Radius of round-corner borders. | 60| background-color | <color> | - | No | Background color. | 61| display | string | flex | No | How and whether to display the box containing an element. Available values are as follows:<br>- **flex**: flexible layout<br>- **none**: not rendered| 62| [left\|top] | <length> \| <percentage><sup>6+</sup> | - | No | Edge of the element.<br>- **left**: left edge position of the element. This attribute defines the offset between the left edge of the margin area of a positioned element and left edge of its containing block.<br>- **top**: top edge position of the element. This attribute defines the offset between the top edge of a positioned element and that of a block included in the element.| 63 64## Example 65 66```html 67<!-- xxx.hml --> 68<div class="container"> 69 <text>slider start value is {{startValue}}</text> 70 <text>slider current value is {{currentValue}}</text> 71 <text>slider end value is {{endValue}}</text> 72 <slider min="0" max="100" value="{{value}}" onchange="setValue" style="margin-top: 10%; width: 80%;height: 1%"></slider> 73</div> 74``` 75 76```css 77/* xxx.css */ 78.container { 79 flex-direction: column; 80 justify-content: center; 81 align-items: center; 82 width: 100%; 83 height: 100%; 84} 85``` 86 87```javascript 88// xxx.js 89export default { 90 data: { 91 value: 34, 92 startValue: 0, 93 currentValue: 0, 94 endValue: 100, 95 }, 96 setValue(e) { 97 this.currentValue = e.value; 98 } 99} 100``` 101 102 103
