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

<demo-block title="双滑块">
  <van-slider
    range
    value="{{ [20, 60 ] }}"
    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>

<demo-block title="垂直方向">
  <view style="height: 150px; padding-left: 30px;">
    <van-slider
      value="{{ 50 }}"
      vertical
      custom-class="slider"
      bind:change="onChange"
    />
    <van-slider
      value="{{ [20, 60 ] }}"
      vertical
      range
      custom-class="slider"
      bind:change="onChange"
    />
  </view>
</demo-block>
