<demo-block title="基础用法">
  <van-slider
    value="50"
    custom-class="slider"
    bind:change="onChange"
  />
</demo-block>

<demo-block title="指定选择范围">
  <van-slider
    custom-class="slider"
    min="-50"
    max="50"
    bind:change="onChange"
  />
</demo-block>

<demo-block title="禁用">
  <van-slider
    custom-class="slider"
    value="50"
    disabled
  />
</demo-block>

<demo-block title="指定步长">
  <van-slider
    custom-class="slider"
    value="50"
    step="10"
    bind:change="onChange"
  />
</demo-block>

<demo-block title="自定义样式">
  <van-slider
    value="50"
    custom-class="slider"
    bar-height="4px"
    active-color="#ee0a24"
  />
</demo-block>

<demo-block title="自定义按钮">
  <van-slider
    value="{{ currentValue }}"
    custom-class="slider"
    use-button-slot
    active-color="#ee0a24"
    bind:drag="onDrag"
  >
    <view class="custom-button" slot="button">
      {{ currentValue }}
    </view>
  </van-slider>
</demo-block>