slider 滑动选择器

解释：滑动选择器

属性说明

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例1 - 默认样式

在开发者工具中预览效果

  1. <view class="card-area">    <view class="top-description border-bottom">默认样式</view>    <slider class="slider" min="0" max="1500" value="200" step="30" bind:change="sliderChange" disabled="false"></slider></view>

代码示例2 - 显示当前取值

  1. <view class="card-area">    <view class="top-description border-bottom">        <view>显示当前取值</view>        <view>show-value</view>    </view>    <slider class="slider" min="0" max="200" value="30" show-value step="30" bind:change="sliderChange" disabled="false"></slider></view>

代码示例3 - 自定义最大/最小值

  1. <view class="card-area">    <view class="top-description border-bottom">        <view>自定义最大/最小值</view>        <view>min="200" max="1500"</view>    </view>    <slider class="slider" min="200" max="1500" value="400"  show-value step="30" bind:change="sliderChange" disabled="false"></slider></view>

代码示例4 - 自定义步长

  1. <view class="card-area">    <view class="top-description border-bottom">        <view>自定义步长</view>        <view>step="30"</view>    </view>    <slider class="slider" min="0" max="1500" value="200" step="30" bind:change="sliderChange" disabled="false"></slider></view>

代码示例5 - 自定义滑块样式

在开发者工具中预览效果

  1. <view class="wrap">    <view class="card-area">        <view class="top-description border-bottom">            <view>自定义样式</view>            <view>block-size="16"  block-color="#3388FF"</view>        </view>        <slider class="slider"  min="0" max="1500" value="200" step="30" block-size="16"  block-color="#3388FF" bind:change="sliderChange" disabled="false"></slider>    </view></view>

代码示例6 - 自定义进度条样式

在开发者工具中预览效果

  1. <view class="wrap">    <view class="card-area">        <view class="top-description border-bottom">            <view>自定义样式</view>            <view>backgroundColor="#DB7093"  activeColor="#000"</view>        </view>        <slider class="slider"  min="0" max="1500" value="200" step="30" block-size="16"  backgroundColor="#DB7093"  activeColor="#000" bind:change="sliderChange" disabled="false"></slider>    </view></view>