更新记录

v1.1.0（2019-10-14） 下载此版本

增加顶部padding

v1.0.1（2019-08-20） 下载此版本

v1.0.1 (2019.08.20)

• 增加了滑块区间无效时的判断
• 更新使用示例及注意事项

v1.0.0（2019-07-15） 下载此版本

v1.0.0提交

平台兼容性

slider-range

uni-app 滑块区间选择组件

参考自 Slider - Mand Mobile

在其基础上，添加了左右滑块不能重合的限制和其他自定义项。

可根据具体需求，修改、自定义其他内容。

扫码预览

属性说明

使用示例

<slider-range
  :value="rangeValue"
  :min="rangeMin"
  :max="rangMax"
  :step="5"
  :bar-height="3"
  :block-size="26"
  background-color="#EEEEF6"
  active-color="#FF6B00"
  :format="format"
  :decorationVisible="true"
  @change="handleRangeChange"
></slider-range>

import SliderRange from '../components/slider-range/index.vue'
export default {
  components: {
    SliderRange
  },
  data() {
    return {
      rangeMin: 5,
      rangMax: 200,
      rangeValue: [10, 50]
    }
  },
  methods: {
    format(val) {
      return val + '%'
    },
    handleRangeChange(e) {
      this.rangeValue = e
    }
  }
}

效果图

更新记录

v1.0.1 (2019.08.20)

• 增加了滑块区间无效时的判断
• 更新使用示例及注意事项

v1.0.0 (2019.07.15)

• 初始版本