slider 滑动选择器

解释:滑动选择器

# 属性说明

属性名 类型 默认值 必填 说明
min Number 0 最小值
max Number 100 最大值
step Number 1 步长,取值必须大于 0,并且可被 (max - min) 整除
disabled Boolean false 是否禁用
value Number 0 当前取值
backgroundColor Color #cccccc 背景条的颜色
block-size Number 24 滑块的大小,取值范围为 12 - 28
block-color Color #ffffff 滑块的颜色
activeColor Color #3c76ff 已选择的颜色
show-value Boolean false 是否显示当前 value
bindchange EventHandle 完成一次拖动后触发的事件,event.detail = {value: value}
bindchanging EventHandle 拖动过程中触发的事件,event.detail = {value: value}

# 示例

在开发者工具中预览效果

# 扫码体验

请使用百度APP扫码

# 代码示例1 - 默认样式

    <view class="wrap">
        <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"
                bind:changing="sliderChanging"
                disabled="false">
            </slider>
        </view>
    </view>
    
    Page({
        sliderChange(e) {
            console.log('sliderChange', e.detail);
        },
        sliderChanging(e) {
            console.log('sliderChanging', e.detail);
        }
    });
    

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

      <view class="wrap">
          <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>
      </view>
      

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

        <view class="wrap">
            <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>
        </view>
        

        # 代码示例4 - 自定义步长

          <view class="wrap">
              <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>
          </view>
          

          # 代码示例5 - 自定义样式

            <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"
                        activeColor="#3c76ff"
                        backgroundColor="#cccccc"
                        disabled="false">
                    </slider>
                </view>
            </view>