更新记录

1.8（2021-11-09）

优化UI展示

1.7（2021-10-19）

添加fillMinValue用来设置最小区间值

1.6（2021-09-10）

两个球球可以折叠覆盖.

平台兼容性

简介

有些项目涉及到价格选择,需要用到区间滑动,s-region-slider是基于uni-app开发的slider, 脱离了原生的slider,使用纯view+css+js开发的插件;

在uni-app中使用 兼容性说明

s-region-slider 在pc、H5-mobile、微信小程序、支付宝小程序、字节跳动小程序均已测试通过，其他平台没做过测试,如使用的时候碰到问题,可提出反馈,作者会及时调整。

源碼

s-region-slider

导入

import sRegionSlider from '@/components/s-region-slider/s-region-slider.vue'

方法说明

使用案例

<view style="margin-top:200rpx;padding:100rpx;">
    <s-region-slider :minValue="minValue" :maxValue="maxValue" :step="40" @up="up"  @down="down"  @move="move" />
    <button @click="setValue">点击按钮修改数值</button>
</view>

    export default {
        components: {sRegionSlider},
        data(){
            return {
                minValue:300,
                maxValue:700
            }
        },
        methods: {
            setValue(){
                this.minValue = 100;
                this.maxValue= 800;
            },
            down(e){
                // e中包含了原有的e信息, 并添加了custom对象
                const type = e.custom.type;
                const minValue = e.custom.minValue;
                const maxValue = e.custom.maxValue ;            
            },
            up(e){
                // e中包含了原有的e信息, 并添加了custom对象
                const type = e.custom.type;
                const minValue = e.custom.minValue;
                const maxValue = e.custom.maxValue ;        
                const curValue  = e.custom.curValue  ;  
            },
            move(e){
                // e中包含了原有的e信息, 并添加了custom对象
                const type = e.custom.type;
                const minValue = e.custom.minValue;
                const maxValue = e.custom.maxValue ;        
            },
        }
    }

运行到各端的效果图

以下是各端的动态图,微信小程序,支付宝小程序,浏览器,apk

酒店选择价格区间: