更新记录

1.0.0（2021-11-29）

初次发布，有问题后续修复，持续更新

平台兼容性

double-slider 双向滑动器

在微信小程序试用过，其他端有待验证

因为公司业务所以开发了一个分享出来

可自定义滑块样式，可将指示条颜色设置为渐变色。可给滑块添加background-image，可禁用滑动，可设置步长

有问题留言后续修复

导入插件

import DoubleSlider from '@/components/double-slider/DoubleSlider.vue'

export default {
    components: {
        DoubleSlider
    }
}

组件使用

<view style="padding: 20rpx 0;">
    自定义滑块样式
    <DoubleSlider @change="handlerDoubleSlider" 
    sliderWidth="100%"
    sliderHeight="15rpx"
    indicatorColor="#EFEFEF"
    activeColor="linear-gradient(270deg, #41BEFF 0%, #3489F8 100%);"
    radius="20rpx"
    blockSize="36rpx"
    blockColor="#3489F8"
    :currentValue="[0,100]"
    :minValue="0"
    :maxValue="100"
    :step="0"
    :disabled="false"
    :leftBlockDisabled="false"
    :rightBlockDisabled="false"
    disabledIndicatorColor="#bababa"
    disabledBlockColor="#8b8b8b"
    :blockStyle="{
        width: '50rpx',
        height: '50rpx',
        borderRadius: '20rpx',
        backgroundImage: 'url(../../../static/小花.png)',
        backgroundSize: 'cover',
        backgroundPosition: '100% 100%',
    }"></DoubleSlider>
    常用
    <DoubleSlider sliderHeight="15rpx" 
                  blockSize="36rpx" 
                  :minValue="0" :maxValue="100" 
                  :currentValue="[0,100]"
                  @change="handlerDoubleSlider">
    </DoubleSlider>
</view>

属性列表

组件使用图