• 下载
  • 社区

slider 滑动选择器

滑动选择器。

扫码体验

qrcode for slider

效果示例

The screenshot of slider

示例代码

<!-- API-DEMO page/component/slider/slider.axml -->
<view class="page">
  <view class="page-description">滑块</view>
  <view class="page-section">
    <view class="page-section-title">设置step</view>
    <view class="page-section-demo">
      <slider value="5" onChange="slider2change" step="5"/>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">设置最小/最大值范围</view>
    <view class="page-section-demo">
      <slider value="33" onChange="slider4change" min="25" max="50" show-value/>
    </view>
  </view>

  <view class="page-section">
    <view class="page-section-title">自定义样式</view>
    <view class="page-section-demo">
      <slider value="33" onChange="slider4change" min="25" max="50" show-value
      backgroundColor="#FFAA00" activeColor="#00aaee" trackSize="2" handleSize="6" handleColor="blue" />
    </view>
  </view>
</view>
// API-DEMO page/component/slider/slider.js
const pageData = {};

for (let i = 1; i < 5; ++i) {
  (function (index) {
    pageData['slider' + index + 'change'] = function (e) {
      console.log('slider' + index + '发生 change 事件,携带值为', e.detail.value);
    };
  })(i);
}
Page(pageData);

属性

属性 类型 默认值 描述 最低版本
name String - 组件名字,用于表单提交获取数据 -
min Number 0 最小值 -
max Number 100 最大值
step Number 1 步长,值必须大于 0,并可被(max - min)整除 -
disabled Boolean false 是否禁用 -
value Number 0 当前取值 -
show-value Boolean false 是否显示当前 value -
active-color String #108ee9 已选择的颜色,同 CSS 色值 -
background-color String #ddd 背景条颜色,同 CSS 色值 -
track-size Number 4 轨道线条高度 -
handle-size Number 22 滑块大小
handle-color String #fff 滑块填充色,同 CSS 色值 -
onChange EventHandle - 完成一次拖动后触发,event.detail = {value: value} -
onChanging EventHandle - 拖动过程中触发的事件,event.detail = {value: value} 1.5.0