Slider 滑动选择器

该组件一般用于表单中，手动选择一个区间范围的场景。

平台差异说明

App	H5	微信小程序	支付宝小程序	百度小程序	头条小程序	QQ小程序
√	√	√	兼容中	兼容中	兼容中	兼容中

基本使用

需要通过v-model绑定一个值，来初始化滑块的选择值(min到max之间)，这个值是双向绑定的，您可以通过这个值，实时地得知内部的滑动结果。

<template>
  <tn-slider v-model="value"></tn-slider>
</template>

<script>
  export default {
    data() {
      return {
        value: 30
      }
    }
  }
</script>

设置最大最小值

设置min和max可以设置滑动条的最小最大值。

<tn-slider v-model="value" :min="20" :max="60"></tn-slider>

设置步进值

设置step参数可以设置步进值，就是每一次滑动时跳变的值。

提示

需要注意的是，这个step必须要被max值整除，否则会出现无法无法滑动到最大值的情况。

<tn-slider v-model="value" :min="20" :max="60" :step="5"></tn-slider>

自定义滑动选择器的样式

• 通过inactiveColor配置底部滑动条背景颜色
• 通过activeColor配置底部选择部分的背景颜色
• 通过blockWidth配置滑块宽度(高等于宽)
• 通过blockColor配置滑动按钮按钮的颜色
• 通过height配置滑块条高度，单位rpx

<tn-slider v-model="value" activeColor="red" blockColor="green"></tn-slider>

自定义滑块的内容和样式

如果需要使用自定义的滑块只需要在tn-slider组件中包裹自定义的滑块即可。

<template>
  <tn-slider v-model="value">
    <view class="tn-slider__custom-block">
      {{ value }}
    </view>
  </tn-slider>
</template>

<script>
  export default {
    data() {
      return {
        value: 30
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tn-slider__custom-block {
    background-color: $tn-color-orange;
    width: auto;
    height: 40rpx;
    line-height: 40rpx;
    padding: 0 5rpx;
    border-radius: 50%;
    text-align: center;
    color: #FFFFFF;
  }
</style>

API

Props

属性名	说明	类型	默认值	可选值
v-model	用于双向绑定当前选中的值	Number|String	0	-
min	允许选择的最小值	Number	0	-
max	允许选择的最大值	Number	100	-
step	每一次滑动的步进值	Number	1	-
disabled	禁止滑动滑块	Boolean	false	true
blockWidth	滑块的宽度，单位rpx	Number	30	-
lineHeight	滑动条的高度，单位rpx	Number	8	-
activeColor	滑动条激活时的颜色	String	#01BEFF	-
inactiveColor	滑动条未激活时的颜色	String	#E6E6E6	-
blockColor	滑块的颜色	String	#FFFFFF	-
blockStyle	滑块自定义样式	Object	-	-

Slots

名称	说明
default	存放自定义滑块的内容

Event

事件名称	说明	回调参数
start	滑块开始滑动	-
moving	滑块正在滑动	-
end	滑块结束滑动	-