# slider The **** component is used to quickly adjust settings, such as volume and brightness. ## Child Component Not supported ## Attributes In addition to the attributes in [Universal Attributes](js-components-common-attributes.md), the following attributes are supported.

Name	Type	Default Value	Mandatory	Description
min	number	0	No	Minimum value of the slider.
max	number	100	No	Maximum value of the slider.
step	number	1	No	Step of each slide.
value	number	0	No	Initial value of the slider.
mode⁵⁺	string	outset	No	Slider style. Available values are as follows: outset: The slider is on the sliding bar. inset: The slider is inside the sliding bar. NOTE: This attribute is only supported on phones and tablets.
showsteps⁵⁺	boolean	false	No	Whether to display slider scales. NOTE: This attribute is only supported on phones and tablets.
showtips⁵⁺	boolean	false	No	Whether a pop-up is displayed to show the percentage value on the slider. NOTE: This attribute is only supported on phones and tablets.

## Styles In addition to the styles in [Universal Styles](js-components-common-styles.md), the following styles are supported.

Name	Type	Default Value	Mandatory	Description
color	<color>	#19000000	No	Background color of the slider.
selected-color	<color>	#ff007dff	No	Selected color of the slider.
block-color	<color>	#ffffff	No	Slider color. NOTE: This attribute is only supported on phones, tablets, and wearables.

## Events In addition to the events in [Universal Events](js-components-common-events.md), the following events are supported.

Name	Parameter	Description
change	ChangeEvent	Triggered when the value changes.

**Table 1** ChangeEvent

Attribute	Type	Description
progress(deprecated⁵⁺)	string	Current value of the slider.
isEnd(deprecated⁵⁺)	string	Whether the dragging operation ends. Available values are as follows: true: The dragging ends. false: The dragging is in progress.
value⁵⁺	number	Current value of the slider.
mode⁵⁺	string	Type of the change event. Available values are as follows: start: The value starts to change. move: The value is changing with users' dragging. end: The value stops changing.

## Example ```

slider start value is {{startValue}} slider current value is {{currentValue}} slider end value is {{endValue}}

``` ``` /* xxx.css */ .container { flex-direction: column; justify-content: center; align-items: center; } ``` ``` // xxx.js export default { data: { value: 0, startValue: 0, currentValue: 0, endValue: 0, }, setvalue(e) { if (e.mode == "start") { this.value = e.value; this.startValue = e.value; } else if (e.mode == "move") { this.value = e.value; this.currentValue = e.value; } else if (e.mode == "end") { this.value = e.value; this.endValue = e.value; } } } ``` ![](figures/slider.png)