.. _slider:

:wx_comp:`slider`
===========================

.. versionadded:: 1.0.0 低版本需做 :ref:`compatibility` 。

滑动选择器。

+-----------------+-------------+---------+------+--------------------------------------------------+----------+
|      属性       |    类型     | 默认值  | 必填 |                       说明                       | 最低版本 |
+=================+=============+=========+======+==================================================+==========+
| min             | number      | 0       | 否   | 最小值                                           | 1.0.0    |
+-----------------+-------------+---------+------+--------------------------------------------------+----------+
| max             | number      | 100     | 否   | 最大值                                           | 1.0.0    |
+-----------------+-------------+---------+------+--------------------------------------------------+----------+
| step            | number      | 1       | 否   | 步长，取值必须大于 0，并且可被(max - min)整除    | 1.0.0    |
+-----------------+-------------+---------+------+--------------------------------------------------+----------+
| disabled        | boolean     | false   | 否   | 是否禁用                                         | 1.0.0    |
+-----------------+-------------+---------+------+--------------------------------------------------+----------+
| value           | number      | 0       | 否   | 当前取值                                         | 1.0.0    |
+-----------------+-------------+---------+------+--------------------------------------------------+----------+
| color           | color       | #e9e9e9 | 否   | 背景条的颜色（请使用 backgroundColor）           | 1.0.0    |
+-----------------+-------------+---------+------+--------------------------------------------------+----------+
| selected-color  | color       | #1aad19 | 否   | 已选择的颜色（请使用 activeColor）               | 1.0.0    |
+-----------------+-------------+---------+------+--------------------------------------------------+----------+
| activeColor     | color       | #1aad19 | 否   | 已选择的颜色                                     | 1.0.0    |
+-----------------+-------------+---------+------+--------------------------------------------------+----------+
| backgroundColor | color       | #e9e9e9 | 否   | 背景条的颜色                                     | 1.0.0    |
+-----------------+-------------+---------+------+--------------------------------------------------+----------+
| block-size      | number      | 28      | 否   | 滑块的大小，取值范围为 12 - 28                   | 1.9.0    |
+-----------------+-------------+---------+------+--------------------------------------------------+----------+
| block-color     | color       | #ffffff | 否   | 滑块的颜色                                       | 1.9.0    |
+-----------------+-------------+---------+------+--------------------------------------------------+----------+
| show-value      | boolean     | false   | 否   | 是否显示当前 value                               | 1.0.0    |
+-----------------+-------------+---------+------+--------------------------------------------------+----------+
| bindchange      | eventhandle |         | 否   | 完成一次拖动后触发的事件，event.detail = {value} | 1.0.0    |
+-----------------+-------------+---------+------+--------------------------------------------------+----------+
| bindchanging    | eventhandle |         | 否   | 拖动过程中触发的事件，event.detail = {value}     | 1.7.0    |
+-----------------+-------------+---------+------+--------------------------------------------------+----------+

示例代码

在开发者工具中预览效果

.. code:: html

  <view class="section section_gap">
    <text class="section__title">设置step</text>
    <view class="body-view">
      <slider bindchange="slider2change" step="5" />
    </view>
  </view>

  <view class="section section_gap">
    <text class="section__title">显示当前value</text>
    <view class="body-view">
      <slider bindchange="slider3change" show-value />
    </view>
  </view>

  <view class="section section_gap">
    <text class="section__title">设置最小/最大值</text>
    <view class="body-view">
      <slider bindchange="slider4change" min="50" max="200" show-value />
    </view>
  </view>

.. code::

  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)