1# slider<a name="ZH-CN_TOPIC_0000001164290718"></a> 2 3滑动条组件，用来快速调节设置值，如音量、亮度等。 4 5## 子组件<a name="zh-cn_topic_0000001127125056_section9288143101012"></a> 6 7不支持。 8 9## 属性<a name="zh-cn_topic_0000001127125056_section2907183951110"></a> 10 11除支持[通用属性](js-components-common-attributes.md)外，还支持如下属性： 12 13<a name="zh-cn_topic_0000001127125056_table20633101642315"></a> 14<table><thead align="left"><tr id="zh-cn_topic_0000001127125056_row663331618238"><th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127125056_aa872998ac2d84843a3c5161889afffef"><a name="zh-cn_topic_0000001127125056_aa872998ac2d84843a3c5161889afffef"></a><a name="zh-cn_topic_0000001127125056_aa872998ac2d84843a3c5161889afffef"></a>名称</p> 15</th> 16<th class="cellrowborder" valign="top" width="23.119999999999997%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001127125056_ab2111648ee0e4f6d881be8954e7acaab"><a name="zh-cn_topic_0000001127125056_ab2111648ee0e4f6d881be8954e7acaab"></a><a name="zh-cn_topic_0000001127125056_ab2111648ee0e4f6d881be8954e7acaab"></a>类型</p> 17</th> 18<th class="cellrowborder" valign="top" width="10.48%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001127125056_ab377d1c90900478ea4ecab51e9a058af"><a name="zh-cn_topic_0000001127125056_ab377d1c90900478ea4ecab51e9a058af"></a><a name="zh-cn_topic_0000001127125056_ab377d1c90900478ea4ecab51e9a058af"></a>默认值</p> 19</th> 20<th class="cellrowborder" valign="top" width="7.5200000000000005%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001127125056_p824610360217"><a name="zh-cn_topic_0000001127125056_p824610360217"></a><a name="zh-cn_topic_0000001127125056_p824610360217"></a>必填</p> 21</th> 22<th class="cellrowborder" valign="top" width="35.76%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001127125056_a1d574a0044ed42ec8a2603bc82734232"><a name="zh-cn_topic_0000001127125056_a1d574a0044ed42ec8a2603bc82734232"></a><a name="zh-cn_topic_0000001127125056_a1d574a0044ed42ec8a2603bc82734232"></a>描述</p> 23</th> 24</tr> 25</thead> 26<tbody><tr id="zh-cn_topic_0000001127125056_row16974649114813"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125056_p742485124819"><a name="zh-cn_topic_0000001127125056_p742485124819"></a><a name="zh-cn_topic_0000001127125056_p742485124819"></a>min</p> 27</td> 28<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125056_p742465115481"><a name="zh-cn_topic_0000001127125056_p742465115481"></a><a name="zh-cn_topic_0000001127125056_p742465115481"></a>number</p> 29</td> 30<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125056_p144241151104815"><a name="zh-cn_topic_0000001127125056_p144241151104815"></a><a name="zh-cn_topic_0000001127125056_p144241151104815"></a>0</p> 31</td> 32<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125056_p15424751104814"><a name="zh-cn_topic_0000001127125056_p15424751104814"></a><a name="zh-cn_topic_0000001127125056_p15424751104814"></a>否</p> 33</td> 34<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125056_p14241451144812"><a name="zh-cn_topic_0000001127125056_p14241451144812"></a><a name="zh-cn_topic_0000001127125056_p14241451144812"></a>滑动选择器的最小值。</p> 35</td> 36</tr> 37<tr id="zh-cn_topic_0000001127125056_row497424913485"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125056_p0424205134814"><a name="zh-cn_topic_0000001127125056_p0424205134814"></a><a name="zh-cn_topic_0000001127125056_p0424205134814"></a>max</p> 38</td> 39<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125056_p10424155114487"><a name="zh-cn_topic_0000001127125056_p10424155114487"></a><a name="zh-cn_topic_0000001127125056_p10424155114487"></a>number</p> 40</td> 41<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125056_p942412519487"><a name="zh-cn_topic_0000001127125056_p942412519487"></a><a name="zh-cn_topic_0000001127125056_p942412519487"></a>100</p> 42</td> 43<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125056_p12424115118483"><a name="zh-cn_topic_0000001127125056_p12424115118483"></a><a name="zh-cn_topic_0000001127125056_p12424115118483"></a>否</p> 44</td> 45<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125056_p1842435134811"><a name="zh-cn_topic_0000001127125056_p1842435134811"></a><a name="zh-cn_topic_0000001127125056_p1842435134811"></a>滑动选择器的最大值。</p> 46</td> 47</tr> 48<tr id="zh-cn_topic_0000001127125056_row297464984810"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125056_p1042425184815"><a name="zh-cn_topic_0000001127125056_p1042425184815"></a><a name="zh-cn_topic_0000001127125056_p1042425184815"></a>step</p> 49</td> 50<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125056_p1342410513489"><a name="zh-cn_topic_0000001127125056_p1342410513489"></a><a name="zh-cn_topic_0000001127125056_p1342410513489"></a>number</p> 51</td> 52<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125056_p154248512485"><a name="zh-cn_topic_0000001127125056_p154248512485"></a><a name="zh-cn_topic_0000001127125056_p154248512485"></a>1</p> 53</td> 54<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125056_p94251151174812"><a name="zh-cn_topic_0000001127125056_p94251151174812"></a><a name="zh-cn_topic_0000001127125056_p94251151174812"></a>否</p> 55</td> 56<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125056_p134251351194814"><a name="zh-cn_topic_0000001127125056_p134251351194814"></a><a name="zh-cn_topic_0000001127125056_p134251351194814"></a>每次滑动的步长。</p> 57</td> 58</tr> 59<tr id="zh-cn_topic_0000001127125056_row736464410486"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125056_p144258513482"><a name="zh-cn_topic_0000001127125056_p144258513482"></a><a name="zh-cn_topic_0000001127125056_p144258513482"></a>value</p> 60</td> 61<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125056_p134259510484"><a name="zh-cn_topic_0000001127125056_p134259510484"></a><a name="zh-cn_topic_0000001127125056_p134259510484"></a>number</p> 62</td> 63<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125056_p114257517483"><a name="zh-cn_topic_0000001127125056_p114257517483"></a><a name="zh-cn_topic_0000001127125056_p114257517483"></a>0</p> 64</td> 65<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125056_p64251851154813"><a name="zh-cn_topic_0000001127125056_p64251851154813"></a><a name="zh-cn_topic_0000001127125056_p64251851154813"></a>否</p> 66</td> 67<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125056_p442565119483"><a name="zh-cn_topic_0000001127125056_p442565119483"></a><a name="zh-cn_topic_0000001127125056_p442565119483"></a>滑动选择器的初始值。</p> 68</td> 69</tr> 70<tr id="zh-cn_topic_0000001127125056_row465682516521"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125056_p123951732185210"><a name="zh-cn_topic_0000001127125056_p123951732185210"></a><a name="zh-cn_topic_0000001127125056_p123951732185210"></a>mode<sup id="zh-cn_topic_0000001127125056_sup59311418187"><a name="zh-cn_topic_0000001127125056_sup59311418187"></a><a name="zh-cn_topic_0000001127125056_sup59311418187"></a>5+</sup></p> 71</td> 72<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125056_p0395183220521"><a name="zh-cn_topic_0000001127125056_p0395183220521"></a><a name="zh-cn_topic_0000001127125056_p0395183220521"></a>string</p> 73</td> 74<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125056_p1639518325526"><a name="zh-cn_topic_0000001127125056_p1639518325526"></a><a name="zh-cn_topic_0000001127125056_p1639518325526"></a>outset</p> 75</td> 76<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125056_p23951632105213"><a name="zh-cn_topic_0000001127125056_p23951632105213"></a><a name="zh-cn_topic_0000001127125056_p23951632105213"></a>否</p> 77</td> 78<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125056_p83958323527"><a name="zh-cn_topic_0000001127125056_p83958323527"></a><a name="zh-cn_topic_0000001127125056_p83958323527"></a>滑动条样式：</p> 79<a name="zh-cn_topic_0000001127125056_ul742810911538"></a><a name="zh-cn_topic_0000001127125056_ul742810911538"></a><ul id="zh-cn_topic_0000001127125056_ul742810911538"><li>outset：滑块在滑杆上；</li><li>inset：滑块在滑杆内。<div class="note" id="zh-cn_topic_0000001127125056_note10509152215419"><a name="zh-cn_topic_0000001127125056_note10509152215419"></a><a name="zh-cn_topic_0000001127125056_note10509152215419"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001127125056_p14509172218549"><a name="zh-cn_topic_0000001127125056_p14509172218549"></a><a name="zh-cn_topic_0000001127125056_p14509172218549"></a>仅手机和平板设备支持。</p> 80</div></div> 81</li></ul> 82</td> 83</tr> 84<tr id="zh-cn_topic_0000001127125056_row355472075219"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125056_p339523215218"><a name="zh-cn_topic_0000001127125056_p339523215218"></a><a name="zh-cn_topic_0000001127125056_p339523215218"></a>showsteps<sup id="zh-cn_topic_0000001127125056_sup11798124781817"><a name="zh-cn_topic_0000001127125056_sup11798124781817"></a><a name="zh-cn_topic_0000001127125056_sup11798124781817"></a>5+</sup></p> 85</td> 86<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125056_p193951032185216"><a name="zh-cn_topic_0000001127125056_p193951032185216"></a><a name="zh-cn_topic_0000001127125056_p193951032185216"></a>boolean</p> 87</td> 88<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125056_p12395153214526"><a name="zh-cn_topic_0000001127125056_p12395153214526"></a><a name="zh-cn_topic_0000001127125056_p12395153214526"></a>false</p> 89</td> 90<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125056_p1139593235218"><a name="zh-cn_topic_0000001127125056_p1139593235218"></a><a name="zh-cn_topic_0000001127125056_p1139593235218"></a>否</p> 91</td> 92<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125056_p639683265217"><a name="zh-cn_topic_0000001127125056_p639683265217"></a><a name="zh-cn_topic_0000001127125056_p639683265217"></a>是否显示步长标识；</p> 93<div class="note" id="zh-cn_topic_0000001127125056_note8765635135413"><a name="zh-cn_topic_0000001127125056_note8765635135413"></a><a name="zh-cn_topic_0000001127125056_note8765635135413"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001127125056_p576523535418"><a name="zh-cn_topic_0000001127125056_p576523535418"></a><a name="zh-cn_topic_0000001127125056_p576523535418"></a>仅手机和平板设备支持。</p> 94</div></div> 95</td> 96</tr> 97<tr id="zh-cn_topic_0000001127125056_row1711814164526"><td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125056_p10396232195214"><a name="zh-cn_topic_0000001127125056_p10396232195214"></a><a name="zh-cn_topic_0000001127125056_p10396232195214"></a>showtips<sup id="zh-cn_topic_0000001127125056_sup14957135010188"><a name="zh-cn_topic_0000001127125056_sup14957135010188"></a><a name="zh-cn_topic_0000001127125056_sup14957135010188"></a>5+</sup></p> 98</td> 99<td class="cellrowborder" valign="top" width="23.119999999999997%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125056_p6396832185213"><a name="zh-cn_topic_0000001127125056_p6396832185213"></a><a name="zh-cn_topic_0000001127125056_p6396832185213"></a>boolean</p> 100</td> 101<td class="cellrowborder" valign="top" width="10.48%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125056_p8396132205215"><a name="zh-cn_topic_0000001127125056_p8396132205215"></a><a name="zh-cn_topic_0000001127125056_p8396132205215"></a>false</p> 102</td> 103<td class="cellrowborder" valign="top" width="7.5200000000000005%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125056_p123962032185210"><a name="zh-cn_topic_0000001127125056_p123962032185210"></a><a name="zh-cn_topic_0000001127125056_p123962032185210"></a>否</p> 104</td> 105<td class="cellrowborder" valign="top" width="35.76%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125056_p16396133212520"><a name="zh-cn_topic_0000001127125056_p16396133212520"></a><a name="zh-cn_topic_0000001127125056_p16396133212520"></a>滑动时是否有气泡提示百分比；</p> 106<div class="note" id="zh-cn_topic_0000001127125056_note0708645135419"><a name="zh-cn_topic_0000001127125056_note0708645135419"></a><a name="zh-cn_topic_0000001127125056_note0708645135419"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001127125056_p4708154510548"><a name="zh-cn_topic_0000001127125056_p4708154510548"></a><a name="zh-cn_topic_0000001127125056_p4708154510548"></a>仅手机和平板设备支持。</p> 107</div></div> 108</td> 109</tr> 110</tbody> 111</table> 112 113## 样式<a name="zh-cn_topic_0000001127125056_section5775351116"></a> 114 115除支持[通用样式](js-components-common-styles.md)外，还支持如下样式： 116 117<a name="zh-cn_topic_0000001127125056_table1196916173572"></a> 118<table><thead align="left"><tr id="zh-cn_topic_0000001127125056_row15969161714572"><th class="cellrowborder" valign="top" width="17.688231176882315%" id="mcps1.1.6.1.1"><p id="zh-cn_topic_0000001127125056_p99691317115713"><a name="zh-cn_topic_0000001127125056_p99691317115713"></a><a name="zh-cn_topic_0000001127125056_p99691317115713"></a>名称</p> 119</th> 120<th class="cellrowborder" valign="top" width="10.588941105889413%" id="mcps1.1.6.1.2"><p id="zh-cn_topic_0000001127125056_p1969141715570"><a name="zh-cn_topic_0000001127125056_p1969141715570"></a><a name="zh-cn_topic_0000001127125056_p1969141715570"></a>类型</p> 121</th> 122<th class="cellrowborder" valign="top" width="24.18758124187582%" id="mcps1.1.6.1.3"><p id="zh-cn_topic_0000001127125056_p9969317105718"><a name="zh-cn_topic_0000001127125056_p9969317105718"></a><a name="zh-cn_topic_0000001127125056_p9969317105718"></a>默认值</p> 123</th> 124<th class="cellrowborder" valign="top" width="15.578442155784424%" id="mcps1.1.6.1.4"><p id="zh-cn_topic_0000001127125056_p12969517115717"><a name="zh-cn_topic_0000001127125056_p12969517115717"></a><a name="zh-cn_topic_0000001127125056_p12969517115717"></a>必填</p> 125</th> 126<th class="cellrowborder" valign="top" width="31.95680431956805%" id="mcps1.1.6.1.5"><p id="zh-cn_topic_0000001127125056_p2969717175713"><a name="zh-cn_topic_0000001127125056_p2969717175713"></a><a name="zh-cn_topic_0000001127125056_p2969717175713"></a>描述</p> 127</th> 128</tr> 129</thead> 130<tbody><tr id="zh-cn_topic_0000001127125056_row179691817175713"><td class="cellrowborder" valign="top" width="17.688231176882315%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125056_p796919179575"><a name="zh-cn_topic_0000001127125056_p796919179575"></a><a name="zh-cn_topic_0000001127125056_p796919179575"></a>color</p> 131</td> 132<td class="cellrowborder" valign="top" width="10.588941105889413%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125056_p119699173572"><a name="zh-cn_topic_0000001127125056_p119699173572"></a><a name="zh-cn_topic_0000001127125056_p119699173572"></a><color></p> 133</td> 134<td class="cellrowborder" valign="top" width="24.18758124187582%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125056_p796911714579"><a name="zh-cn_topic_0000001127125056_p796911714579"></a><a name="zh-cn_topic_0000001127125056_p796911714579"></a>#19000000</p> 135</td> 136<td class="cellrowborder" valign="top" width="15.578442155784424%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125056_p169699176574"><a name="zh-cn_topic_0000001127125056_p169699176574"></a><a name="zh-cn_topic_0000001127125056_p169699176574"></a>否</p> 137</td> 138<td class="cellrowborder" valign="top" width="31.95680431956805%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125056_p696910177571"><a name="zh-cn_topic_0000001127125056_p696910177571"></a><a name="zh-cn_topic_0000001127125056_p696910177571"></a>滑动条的背景颜色。</p> 139</td> 140</tr> 141<tr id="zh-cn_topic_0000001127125056_row179698172574"><td class="cellrowborder" valign="top" width="17.688231176882315%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125056_p12969717115711"><a name="zh-cn_topic_0000001127125056_p12969717115711"></a><a name="zh-cn_topic_0000001127125056_p12969717115711"></a>selected-color</p> 142</td> 143<td class="cellrowborder" valign="top" width="10.588941105889413%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125056_p13970121719579"><a name="zh-cn_topic_0000001127125056_p13970121719579"></a><a name="zh-cn_topic_0000001127125056_p13970121719579"></a><color></p> 144</td> 145<td class="cellrowborder" valign="top" width="24.18758124187582%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125056_p89701917165714"><a name="zh-cn_topic_0000001127125056_p89701917165714"></a><a name="zh-cn_topic_0000001127125056_p89701917165714"></a>#ff007dff</p> 146</td> 147<td class="cellrowborder" valign="top" width="15.578442155784424%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125056_p8970161713572"><a name="zh-cn_topic_0000001127125056_p8970161713572"></a><a name="zh-cn_topic_0000001127125056_p8970161713572"></a>否</p> 148</td> 149<td class="cellrowborder" valign="top" width="31.95680431956805%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125056_p1097011173571"><a name="zh-cn_topic_0000001127125056_p1097011173571"></a><a name="zh-cn_topic_0000001127125056_p1097011173571"></a>滑动条的已选择颜色。</p> 150</td> 151</tr> 152<tr id="zh-cn_topic_0000001127125056_row6970181735714"><td class="cellrowborder" valign="top" width="17.688231176882315%" headers="mcps1.1.6.1.1 "><p id="zh-cn_topic_0000001127125056_p1970141717579"><a name="zh-cn_topic_0000001127125056_p1970141717579"></a><a name="zh-cn_topic_0000001127125056_p1970141717579"></a>block-color</p> 153</td> 154<td class="cellrowborder" valign="top" width="10.588941105889413%" headers="mcps1.1.6.1.2 "><p id="zh-cn_topic_0000001127125056_p4970617165718"><a name="zh-cn_topic_0000001127125056_p4970617165718"></a><a name="zh-cn_topic_0000001127125056_p4970617165718"></a><color></p> 155</td> 156<td class="cellrowborder" valign="top" width="24.18758124187582%" headers="mcps1.1.6.1.3 "><p id="zh-cn_topic_0000001127125056_p297091755720"><a name="zh-cn_topic_0000001127125056_p297091755720"></a><a name="zh-cn_topic_0000001127125056_p297091755720"></a>#ffffff</p> 157</td> 158<td class="cellrowborder" valign="top" width="15.578442155784424%" headers="mcps1.1.6.1.4 "><p id="zh-cn_topic_0000001127125056_p3970121745715"><a name="zh-cn_topic_0000001127125056_p3970121745715"></a><a name="zh-cn_topic_0000001127125056_p3970121745715"></a>否</p> 159</td> 160<td class="cellrowborder" valign="top" width="31.95680431956805%" headers="mcps1.1.6.1.5 "><p id="zh-cn_topic_0000001127125056_p12970817175710"><a name="zh-cn_topic_0000001127125056_p12970817175710"></a><a name="zh-cn_topic_0000001127125056_p12970817175710"></a>滑动条的滑块颜色。</p> 161<div class="note" id="zh-cn_topic_0000001127125056_note29562075516"><a name="zh-cn_topic_0000001127125056_note29562075516"></a><a name="zh-cn_topic_0000001127125056_note29562075516"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001127125056_p7956203555"><a name="zh-cn_topic_0000001127125056_p7956203555"></a><a name="zh-cn_topic_0000001127125056_p7956203555"></a>仅手机、平板和智慧屏设备支持。</p> 162</div></div> 163</td> 164</tr> 165</tbody> 166</table> 167 168## 事件<a name="zh-cn_topic_0000001127125056_section412849105010"></a> 169 170除支持[通用事件](js-components-common-events.md)外，还支持如下事件： 171 172<a name="zh-cn_topic_0000001127125056_table836435619510"></a> 173<table><thead align="left"><tr id="zh-cn_topic_0000001127125056_row153658563517"><th class="cellrowborder" valign="top" width="24.852485248524854%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001127125056_a426b8903842d48fa8012a24ff3c997eb"><a name="zh-cn_topic_0000001127125056_a426b8903842d48fa8012a24ff3c997eb"></a><a name="zh-cn_topic_0000001127125056_a426b8903842d48fa8012a24ff3c997eb"></a>名称</p> 174</th> 175<th class="cellrowborder" valign="top" width="29.452945294529453%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001127125056_a53448ba47e5e4ae9bf7774c90820e970"><a name="zh-cn_topic_0000001127125056_a53448ba47e5e4ae9bf7774c90820e970"></a><a name="zh-cn_topic_0000001127125056_a53448ba47e5e4ae9bf7774c90820e970"></a>参数</p> 176</th> 177<th class="cellrowborder" valign="top" width="45.69456945694569%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001127125056_add489ff50c444f24b759162c7f4bad9a"><a name="zh-cn_topic_0000001127125056_add489ff50c444f24b759162c7f4bad9a"></a><a name="zh-cn_topic_0000001127125056_add489ff50c444f24b759162c7f4bad9a"></a>描述</p> 178</th> 179</tr> 180</thead> 181<tbody><tr id="zh-cn_topic_0000001127125056_row4467111418517"><td class="cellrowborder" valign="top" width="24.852485248524854%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001127125056_p5786131515111"><a name="zh-cn_topic_0000001127125056_p5786131515111"></a><a name="zh-cn_topic_0000001127125056_p5786131515111"></a>change</p> 182</td> 183<td class="cellrowborder" valign="top" width="29.452945294529453%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001127125056_p145081649105418"><a name="zh-cn_topic_0000001127125056_p145081649105418"></a><a name="zh-cn_topic_0000001127125056_p145081649105418"></a><a href="#zh-cn_topic_0000001127125056_table12318174214516">ChangeEvent</a></p> 184</td> 185<td class="cellrowborder" valign="top" width="45.69456945694569%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001127125056_p078614157518"><a name="zh-cn_topic_0000001127125056_p078614157518"></a><a name="zh-cn_topic_0000001127125056_p078614157518"></a>选择值发生变化时触发该事件。</p> 186</td> 187</tr> 188</tbody> 189</table> 190 191**表 1** ChangeEvent 192 193<a name="zh-cn_topic_0000001127125056_table12318174214516"></a> 194<table><thead align="left"><tr id="zh-cn_topic_0000001127125056_row631810427458"><th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.1"><p id="zh-cn_topic_0000001127125056_a82b31036c9c94b3d8a7702523f9b40ec"><a name="zh-cn_topic_0000001127125056_a82b31036c9c94b3d8a7702523f9b40ec"></a><a name="zh-cn_topic_0000001127125056_a82b31036c9c94b3d8a7702523f9b40ec"></a>属性</p> 195</th> 196<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.2"><p id="zh-cn_topic_0000001127125056_a916c9aa3c32e4903953063bb7424027c"><a name="zh-cn_topic_0000001127125056_a916c9aa3c32e4903953063bb7424027c"></a><a name="zh-cn_topic_0000001127125056_a916c9aa3c32e4903953063bb7424027c"></a>类型</p> 197</th> 198<th class="cellrowborder" valign="top" width="33.33333333333333%" id="mcps1.2.4.1.3"><p id="zh-cn_topic_0000001127125056_af9aad173dc2f44f5be69c86fe5537af7"><a name="zh-cn_topic_0000001127125056_af9aad173dc2f44f5be69c86fe5537af7"></a><a name="zh-cn_topic_0000001127125056_af9aad173dc2f44f5be69c86fe5537af7"></a>说明</p> 199</th> 200</tr> 201</thead> 202<tbody><tr id="zh-cn_topic_0000001127125056_row1731934264512"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127125056_a660dbbfaf8d349b7921fbe9a0b96574a"><a name="zh-cn_topic_0000001127125056_a660dbbfaf8d349b7921fbe9a0b96574a"></a><a name="zh-cn_topic_0000001127125056_a660dbbfaf8d349b7921fbe9a0b96574a"></a>progress(deprecated<sup id="zh-cn_topic_0000001127125056_sup119388266511"><a name="zh-cn_topic_0000001127125056_sup119388266511"></a><a name="zh-cn_topic_0000001127125056_sup119388266511"></a><span>5+</span></sup>)</p> 203</td> 204<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127125056_aab0506a4edc147beb25866891e5fddcd"><a name="zh-cn_topic_0000001127125056_aab0506a4edc147beb25866891e5fddcd"></a><a name="zh-cn_topic_0000001127125056_aab0506a4edc147beb25866891e5fddcd"></a>string</p> 205</td> 206<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127125056_aa3d09d0a55704a6097fb39739436c5db"><a name="zh-cn_topic_0000001127125056_aa3d09d0a55704a6097fb39739436c5db"></a><a name="zh-cn_topic_0000001127125056_aa3d09d0a55704a6097fb39739436c5db"></a>当前slider的进度值。</p> 207</td> 208</tr> 209<tr id="zh-cn_topic_0000001127125056_row1595014195562"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127125056_p1951151935610"><a name="zh-cn_topic_0000001127125056_p1951151935610"></a><a name="zh-cn_topic_0000001127125056_p1951151935610"></a>isEnd(deprecated<sup id="zh-cn_topic_0000001127125056_sup99714213583"><a name="zh-cn_topic_0000001127125056_sup99714213583"></a><a name="zh-cn_topic_0000001127125056_sup99714213583"></a><span>5+</span></sup>)</p> 210</td> 211<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127125056_p89511819125613"><a name="zh-cn_topic_0000001127125056_p89511819125613"></a><a name="zh-cn_topic_0000001127125056_p89511819125613"></a>string</p> 212</td> 213<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127125056_p129511219115620"><a name="zh-cn_topic_0000001127125056_p129511219115620"></a><a name="zh-cn_topic_0000001127125056_p129511219115620"></a>当前slider是否拖拽结束，可选值为：</p> 214<a name="zh-cn_topic_0000001127125056_ul1332217234581"></a><a name="zh-cn_topic_0000001127125056_ul1332217234581"></a><ul id="zh-cn_topic_0000001127125056_ul1332217234581"><li>true：slider拖拽结束。</li><li>false：slider拖拽中。</li></ul> 215</td> 216</tr> 217<tr id="zh-cn_topic_0000001127125056_row68961248174517"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127125056_a7e263f0434c94a16a584943ddde92012"><a name="zh-cn_topic_0000001127125056_a7e263f0434c94a16a584943ddde92012"></a><a name="zh-cn_topic_0000001127125056_a7e263f0434c94a16a584943ddde92012"></a>value<sup id="zh-cn_topic_0000001127125056_sup11254165405316"><a name="zh-cn_topic_0000001127125056_sup11254165405316"></a><a name="zh-cn_topic_0000001127125056_sup11254165405316"></a><span>5+</span></sup></p> 218</td> 219<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127125056_a76ffd0f779234ab6a77e808500fca675"><a name="zh-cn_topic_0000001127125056_a76ffd0f779234ab6a77e808500fca675"></a><a name="zh-cn_topic_0000001127125056_a76ffd0f779234ab6a77e808500fca675"></a>number</p> 220</td> 221<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127125056_a85eddf1d320641a8b344aaadffe6d49e"><a name="zh-cn_topic_0000001127125056_a85eddf1d320641a8b344aaadffe6d49e"></a><a name="zh-cn_topic_0000001127125056_a85eddf1d320641a8b344aaadffe6d49e"></a>当前slider的进度值。</p> 222</td> 223</tr> 224<tr id="zh-cn_topic_0000001127125056_row1333335416456"><td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.1 "><p id="zh-cn_topic_0000001127125056_p733395494510"><a name="zh-cn_topic_0000001127125056_p733395494510"></a><a name="zh-cn_topic_0000001127125056_p733395494510"></a>mode<sup id="zh-cn_topic_0000001127125056_sup15843190155419"><a name="zh-cn_topic_0000001127125056_sup15843190155419"></a><a name="zh-cn_topic_0000001127125056_sup15843190155419"></a><span>5+</span></sup></p> 225</td> 226<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.2 "><p id="zh-cn_topic_0000001127125056_p113333549459"><a name="zh-cn_topic_0000001127125056_p113333549459"></a><a name="zh-cn_topic_0000001127125056_p113333549459"></a>string</p> 227</td> 228<td class="cellrowborder" valign="top" width="33.33333333333333%" headers="mcps1.2.4.1.3 "><p id="zh-cn_topic_0000001127125056_p933335415453"><a name="zh-cn_topic_0000001127125056_p933335415453"></a><a name="zh-cn_topic_0000001127125056_p933335415453"></a>当前change事件的类型，可选值为：</p> 229<a name="zh-cn_topic_0000001127125056_ul1998831814525"></a><a name="zh-cn_topic_0000001127125056_ul1998831814525"></a><ul id="zh-cn_topic_0000001127125056_ul1998831814525"><li>start：slider的值开始改变。</li><li>move：slider的值跟随手指拖动中。</li><li>end：slider的值结束改变。</li></ul> 230</td> 231</tr> 232</tbody> 233</table> 234 235## 示例<a name="zh-cn_topic_0000001127125056_section166243517816"></a> 236 237``` 238<!-- xxx.hml --> 239<div class="container"> 240 <text>slider start value is {{startValue}}</text> 241 <text>slider current value is {{currentValue}}</text> 242 <text>slider end value is {{endValue}}</text> 243 <slider min="0" max="100" value="{{value}}" onchange="setvalue"></slider> 244</div> 245``` 246 247``` 248/* xxx.css */ 249.container { 250 flex-direction: column; 251 justify-content: center; 252 align-items: center; 253} 254``` 255 256``` 257// xxx.js 258export default { 259 data: { 260 value: 0, 261 startValue: 0, 262 currentValue: 0, 263 endValue: 0, 264 }, 265 setvalue(e) { 266 if (e.mode == "start") { 267 this.value = e.value; 268 this.startValue = e.value; 269 } else if (e.mode == "move") { 270 this.value = e.value; 271 this.currentValue = e.value; 272 } else if (e.mode == "end") { 273 this.value = e.value; 274 this.endValue = e.value; 275 } 276 } 277} 278``` 279 280 281 282
