简版区间选择

hml

<!DOCTYPE html>
<!-- saved from url=(0047)https://www.jq22.com/demo/jQuerySx201711022347/ -->
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>价格滑动效果</title>
    <link rel="stylesheet" href="./价格滑动效果_files/style.css">
</head>

<body style="padding-left: 100px;">
    <!--价格筛选条开始-->
    <div class="price-dd-choose">
        <div id="price-range" class="price-range">
            <div class="price-range-slider">
                <div class="bg-darkgrey" style="left: 0px;  570px;"></div>
                <div class="bg-darkgrey-hand" style="left: 0px;  570px;"></div>
                <ul class="slider-ul">
                    <li class="slider-ul-first"><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                    <li><i class="icon-dian"></i></li>
                </ul>
            </div>
            <div class="slide-selected" style="left: 10px;  570px;"></div>
            <i class="btn-price btn-left" style="left: 3px;"></i>
            <i class="btn-price btn-right" style="left: 573px;"></i>
            <div class="tip" style="left: 243px;">
                <div class="tip-content">不限</div>
                <span class="tip-top tip-arrow"></span>
            </div>
            <div class="price-range-text">
                <span class="number number-first">0万</span><span class="number">5万</span><span
                    class="number">10万</span><span class="number">15万</span><span class="number">20万</span><span
                    class="number">25万</span><span class="number">30万</span><span class="number">35万</span><span
                    class="number">50万</span><span class="number">70万</span><span class="number">100万</span>
            </div>
        </div>
    </div>
    <!--价格筛选条结束-->


    <script src="./价格滑动效果_files/jquery-1.10.2.js.下载"></script>
    <script src="./价格滑动效果_files/jquery.min.js.下载"></script>
    <script src="./价格滑动效果_files/slider.js"></script>
    <script>
        var temp = 0;
        $(function () {
            $("#price-range").slider({
                    unit: "万",
                    beyondMax: true,
                    beyondMin: true,
                    firstWidth: 34,
                    lastWidth: 23,
                    scale: [{
                            key: 0,
                            value: [1]
                        },
                        {
                            key: 5,
                            value: [1]
                        },
                        {
                            key: 10,
                            value: [1]
                        },
                        {
                            key: 15,
                            value: [1]
                        },
                        {
                            key: 20,
                            value: [1]
                        },
                        {
                            key: 25,
                            value: [1]
                        },
                        {
                            key: 30,
                            value: [1]
                        },
                        {
                            key: 35,
                            value: [1]
                        },
                        {
                            key: 50,
                            value: [1]
                        },
                        {
                            key: 70,
                            value: [1]
                        },
                        {
                            key: 100,
                            value: [1]
                        },
                        {
                            key: 110,
                            value: [1]
                        }
                    ]
                })
                .on("changed", function (e, args) {
                    var min = args.value.leftValue,
                        max = args.value.rightValue;
                    console.log('eeeeeee', e)
                    console.log(min, max);
                });
            $("#price-range").data("slider").setRange({
                leftValue: 30,
                rightValue: 70
            });
        });
    </script>

</body>

</html>

View Code

css

.price-dd-choose {
    width: 610px;
    height: 80px;
    float: left;
}

.price-range {
    height: 40px;
    margin-top: 40px;
    position: relative;
}

.price-range .price-range-slider {
    width: 570px;
    height: 6px;
    overflow: hidden;
    position: absolute;
    top: 25px;
    left: 10px;
    background-color: #f8f8f8;
}

.price-range .bg-darkgrey,
.price-range .bg-darkgrey-hand {
    left: 0;
    width: 570px;
    position: absolute;
    top: 0;
    height: 5px;
    overflow: hidden;
}

.price-range .bg-darkgrey {
    background-color: #ccd3e4;
}

.price-range .bg-darkgrey-hand {
    cursor: pointer;
    z-index: 5;
}

.price-range .slider-ul {
    width: 570px;
    height: 5px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    top: 0;
    margin: 0;
}

.price-range .slider-ul li {
    width: 57px;
    height: 10px;
    float: left;
    position: relative;
}

.price-range .slider-ul li.slider-ul-first {
    width: 34px;
}

.price-range .slider-ul li .icon-dian {
    width: 3px;
    height: 5px;
    line-height: 0;
    overflow: hidden;
    position: absolute;
    right: -4px;
    _top: 1px;
    background: #fff;
}

.price-range .slide-selected {
    height: 5px;
    line-height: 0;
    overflow: hidden;
    background-color: #328cff;
    position: absolute;
    top: 25px;
    left: 10px;
    z-index: 6;
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    cursor: pointer;
}

.price-range .btn-price {
    display: inline-block;
    width: 14px;
    height: 14px;
    position: absolute;
    top: 21px;
    z-index: 10;
    cursor: pointer;
    background: #328cff;
    border-radius: 50%;
}

.price-range .tip {
    min-width: 100px;
    max-width: 100px;
    position: absolute;
    z-index: 100;
    padding: 2px;
    background: url(./shadow_bg.jpg) repeat;
    font-size: 12px;
    float: left;
    top: 40px;
}

.price-range .tip .tip-content {
    min-width: 30px;
    line-height: 22px;
    padding: 0 10px;
    color: #666;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

.price-range .tip .tip-arrow {
    display: inline-block;
    overflow: hidden;
    position: absolute;
    z-index: 2;
    background: url(./layer_arrow24.png) no-repeat;
}

.price-range .tip .tip-top {
    width: 15px;
    height: 11px;
    top: -8px;
    left: 38%;
    background-position: 0 -26px;
}

.price-range .price-range-text {
    height: 20px;
    color: #999;
}

.price-range .price-range-text .number {
    display: inline-block;
    width: 57px;
    height: 20px;
    line-height: 20px;
    float: left;
}

.price-range .price-range-text .number-first {
    width: 34px;
}

View Code

(function () {
    $.fn.slider = function (option) {
        return this.each(function () {
            var $this = $(this),
                data = $(this).data("slider");
            var options = $.extend({}, $.fn.slider.defaults, $this.data(), option);
            if (data == null) data = new Slider($this, options);
            $(this).data("slider", data);
            if (typeof option === "string") {
                data[option]()
            }
        })
    };

    function Slider($elem, option) {
        this.$elem = $elem;
        this.options = option;
        this.$leftButton = $(".btn-left", $elem);
        this.$rightButton = $(".btn-right", $elem);
        this.$selectedbar = $(".slide-selected", $elem);
        this.$tip = $(".tip", $elem);
        this.$tipContent = $(".tip-content", $elem);
        this.$fullbar = $(".price-range-slider", $elem);
        this.$validbar = $(".bg-darkgrey,.bg-darkgrey-hand", $elem);
        this.$lowTip = $(".low01", $elem);
        this.$highTip = $(".high01", $elem);
        this.noValidbar = false;
        if (this.$validbar.size() == 0) {
            this.$validbar = this.$fullbar;
            this.noValidbar = true
        }
        this._fullbarWidth = this.$fullbar.width();
        this._$activeButton = null;
        this._allowDrag = false;
        this._buttonWidth = this.$leftButton.width();
        this._unit = this.options.unit;
        this._beyondMax = this.options.beyondMax;
        this._beyondMin = this.options.beyondMin;
        this._minusLeft = null;
        this._scale = this.options.scale;
        this._max = this._scale == null ? this.options.max : this._scale[this._scale.length - 1].key;
        this._min = this._scale == null ? this.options.min : this._scale[0].key;
        this._lastValue = null;
        this._moveValue = null;
        this._mouseDownPageX = null;
        this._canTouch = function () {
            try {
                document.createEvent("TouchEvent");
                return true
            } catch (e) {
                return false
            }
        }();
        this._tempValue = [];
        this._rangeValue = null;
        this._init()
    }
    Slider.prototype = {
        _initShow: function () {
            this.$leftButton.show();
            this.$rightButton.show();
            this.$tip.show();
            this.$validbar.show();
            this.$selectedbar.show()
        },
        _init: function () {
            jQuery.browser = {};
            (function () {
                jQuery.browser.msie = false;
                jQuery.browser.version = 0;
                if (navigator.userAgent.match(/MSIE ([0-9]+)./)) {
                    jQuery.browser.msie = true;
                    jQuery.browser.version = RegExp.$1;
                }
            })();
            if ($.browser.msie == true && $.browser.version < 9) {
                $("*", this.$elem).prop("unselectable", true)
            }
            this.$leftButton.add(this.$rightButton).on("mousedown.slider", $.proxy(this._mousedownHandler, this));
            this.$fullbar.add(this.$selectedbar).on("click.slider", $.proxy(this._validbarClickHandler, this));
            $(document.body).on("mouseup.slider", $.proxy(this._mouseupHandler, this));
            $(document.body).on("mousemove.slider", $.proxy(this._mousemoveHandler, this));
            if (this._canTouch == true) {
                this.$leftButton.add(this.$rightButton).on("touchstart.slider", $.proxy(this._mousedownHandler, this));
                $(document.body).on("touchend.slider", $.proxy(this._mouseupHandler, this));
                $(document.body).on("touchmove.slider", $.proxy(this._mousemoveHandler, this))
            }
            $("a", this.$elem).click(function () {
                return false
            });
            this._initShow();
            this._initScale()
        },
        _initScale: function () {
            for (var i = 0; i < this._scale.length - 1; i++) {
                var scale = this._scale[i];
                var leftValueArray = [];
                leftValueArray.push(scale.key);
                for (var j = 0; j < scale.value.length - 1; j++) {
                    leftValueArray.push(leftValueArray[leftValueArray.length - 1] + scale.value[j])
                }
                scale.leftValue = leftValueArray
            }
        },
        _setLowHightTip: function () {
            var validBarLeft = this.$validbar.position().left + this.$fullbar.position().left;
            var validBarWidth = this.$validbar.width();
            var leftButtonLeft = this.$leftButton.position().left;
            var rightButtonLeft = this.$rightButton.position().left;
            if (leftButtonLeft < validBarLeft - this._buttonWidth / 2 - 1) {
                this.$lowTip.show()
            } else {
                this.$lowTip.hide()
            }
            if (rightButtonLeft > validBarLeft + validBarWidth - this._buttonWidth / 2 + 1) {
                this.$highTip.show()
            } else {
                this.$highTip.hide()
            }
            if (rightButtonLeft < validBarLeft - this._buttonWidth / 2 || leftButtonLeft > validBarLeft + validBarWidth - this._buttonWidth / 2) {
                this.$lowTip.show();
                this.$highTip.show();
                this.$lowTip.find("i").addClass("icon-dian-blue");
                this.$highTip.find("i").addClass("icon-dian-blue")
            } else {
                this.$lowTip.find("i").removeClass("icon-dian-blue");
                this.$highTip.find("i").removeClass("icon-dian-blue")
            }
        },
        setTipPrefix: function (prefix) {
            $(".bg-darkgrey-hand", this.$elem).prop("title", prefix + "可选区间" + this._rangeValue.leftValue + "-" + this._rangeValue.rightValue + this._unit)
        },
        _validbarClickHandler: function (e) {
            if ($(e.target).hasClass("low01") || $(e.target).hasClass("high01")) {
                return
            }
            var clickX = e.pageX - this.$fullbar.offset().left;
            var value = this.getValue();
            var leftX = value.leftX;
            var rightX = value.rightX;
            var newLeft = clickX;
            newLeft = this._getFixedPosition(newLeft).leftX;
            newLeft = newLeft - this._buttonWidth / 2;
            var newLeftButtonLeft = null;
            var newRightButtonLeft = null;
            var animateButton = null;
            if (clickX <= leftX + (rightX - leftX) / 2) {
                animateButton = this.$leftButton;
                newLeftButtonLeft = newLeft;
                newRightButtonLeft = this.$rightButton.position().left
            } else {
                animateButton = this.$rightButton;
                newRightButtonLeft = newLeft;
                newLeftButtonLeft = this.$leftButton.position().left
            }
            var newWidth = newRightButtonLeft - newLeftButtonLeft;
            if (animateButton == this.$leftButton && this.$rightButton.position().left > this._fullbarWidth - 15 && newLeft + this.$fullbar.position().left > this._fullbarWidth - 15) {
                return
            }
            animateButton.css({
                left: newLeft + this.$fullbar.position().left
            });
            this._setLowHightTip();
            this._setTipContent();
            this._setTipPosition();
            this._setSelectedbar();
            this._fireChangeEvent()
        },
        _mousedownHandler: function (e) {
            var pageX = null;
            if (e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0]) {
                pageX = e.originalEvent.touches[0].pageX
            } else {
                pageX = e.pageX
            }
            this._allowDrag = true;
            this._$activeButton = $(e.target);
            if (this._$activeButton[0] == this.$leftButton[0]) {
                this.$leftButton.css("zIndex", 20);
                this.$rightButton.css("zIndex", 10)
            } else {
                this.$leftButton.css("zIndex", 10);
                this.$rightButton.css("zIndex", 20)
            }
            this._minusLeft = pageX - this._$activeButton.position().left;
            if (this.$leftButton.position().left == this.$rightButton.position().left) {
                this._mouseDownPageX = pageX
            } else {
                this._mouseDownPageX == null
            }
            return false
        },
        _mousemoveHandler: function (e) {
            if (this._allowDrag) {
                // console.log('_mousemoveHandler e', e)
                var pageX = null;
                if (e.originalEvent && e.originalEvent.touches && e.originalEvent.touches[0]) {
                    pageX = e.originalEvent.touches[0].pageX
                } else {
                    pageX = e.pageX
                }
                if (this._mouseDownPageX != null) {
                    var moveRight = pageX > this._mouseDownPageX;
                    if (moveRight == true) {
                        this._$activeButton = this.$rightButton;
                        this.$leftButton.css("zIndex", 10);
                        this.$rightButton.css("zIndex", 20)
                    } else {
                        this._$activeButton = this.$leftButton;
                        this.$leftButton.css("zIndex", 20);
                        this.$rightButton.css("zIndex", 10)
                    }
                    this._mouseDownPageX = null
                }
                var newLeft = pageX - this._minusLeft;
                if (this._$activeButton[0] == this.$leftButton[0]) {
                    if (newLeft > this.$rightButton.position().left) {
                        newLeft = this.$rightButton.position().left
                    }
                } else {
                    if (newLeft < this.$leftButton.position().left) {
                        newLeft = this.$leftButton.position().left
                    }
                }
                var validBarLeft = this.$validbar.position().left + this.$fullbar.position().left;
                var validBarWidth = this.$validbar.width();
                newLeft = newLeft - this.$fullbar.position().left + this._buttonWidth / 2;
                newLeft = this._getFixedPosition(newLeft).leftX;
                newLeft = newLeft + this.$fullbar.position().left - this._buttonWidth / 2;
                if (this._$activeButton[0] == this.$leftButton[0] && this.$rightButton.position().left > this._fullbarWidth - 15 && newLeft > this._fullbarWidth - 15) {
                    return
                }
                // start - left < right    
                if (this._$activeButton[0] == this.$leftButton[0]) {
                    var tempLeft = this.$rightButton.position().left - 55
                    if (newLeft > tempLeft) {
                        return
                    }
                } else if (this._$activeButton[0] == this.$rightButton[0]) {
                    var tempLeft = this.$leftButton.position().left + 55
                    if (newLeft < tempLeft) {
                        return
                    }
                }
                // end
                this._$activeButton.css("left", newLeft);
                this._setLowHightTip();
                this._setSelectedbar();
                this._setTipContent();
                this._setTipPosition()
            }
        },
        _fireChangeEvent: function () {
            if (this._lastValue == null || this._lastValue.leftValue != this._moveValue.leftValue || this._lastValue.rightValue != this._moveValue.rightValue) {
                var args = {
                    "value": this._moveValue
                };
                this.$elem.trigger('changed', args)
            }
            this._lastValue = this._moveValue
        },
        _mouseupHandler: function () {
            if (this._allowDrag) {
                this._allowDrag = false;
                this._$activeButton = null;
                this._fireChangeEvent()
            }
        },
        setValue: function (option) {
            var pointX = this._getPointX(option);
            this.$leftButton.css("left", pointX.leftX + this.$fullbar.position().left - this._buttonWidth / 2);
            this.$rightButton.css("left", pointX.rightX + this.$fullbar.position().left - this._buttonWidth / 2);
            this._setSelectedbar();
            this._setTipContent();
            this._setTipPosition();
            if (!(option.triggerEvent === false)) this._fireChangeEvent();
            this._lastValue = this._moveValue;
            this._setLowHightTip()
        },
        setRange: function (option) {
            var pointX = this._getPointX(option);
            // this.$validbar.css({
            //     left: pointX.leftX,
            //      pointX.rightX - pointX.leftX
            // });
            this.$leftButton.css("left", pointX.leftX + this.$fullbar.position().left - this._buttonWidth / 2);
            this.$rightButton.css("left", pointX.rightX + this.$fullbar.position().left - this._buttonWidth / 2);
            this._setSelectedbar();
            this._setTipContent();
            this._setTipPosition();
            this._lastValue = this._moveValue;
            this._rangeValue = this._lastValue;
            this._setLowHightTip()
        },
        _getPointX: function (option) {
            var miniScale = this._getMiniScale();
            var leftX = null;
            var rightX = null;
            for (var i = miniScale.length - 1; i >= 0; i--) {
                if (option.leftValue >= miniScale[i].leftValue) {
                    leftX = miniScale[i].leftX;
                    this._tempValue.push([miniScale[i].leftValue, option.leftValue]);
                    break
                }
            }
            for (var i = miniScale.length - 1; i >= 0; i--) {
                var rawScaleLeftValue = miniScale[i].leftValue;
                var scaleLeftValue = this._getValueByTempValue(rawScaleLeftValue);
                if (option.rightValue >= scaleLeftValue) {
                    if (miniScale[i + 1] && option.rightValue > scaleLeftValue) {
                        rightX = miniScale[i + 1].leftX;
                        this._tempValue.push([miniScale[i + 1].leftValue, option.rightValue])
                    } else {
                        rightX = miniScale[i].leftX;
                        this._tempValue.push([rawScaleLeftValue, option.rightValue])
                    }
                    break
                }
            }
            if (option.rightValue == option.leftValue) {
                leftX = rightX
            }
            return {
                leftX: leftX,
                rightX: rightX
            }
        },
        _getFixedPosition: function (leftX) {
            if (leftX < 0) leftX = 0;
            var miniScale = this._getMiniScale();
            if (leftX >= miniScale[miniScale.length - 1].leftX2 - 1) {
                return {
                    leftX: this._fullbarWidth,
                    leftValue: miniScale[miniScale.length - 1].leftValue
                }
            } else if (leftX >= miniScale[miniScale.length - 2].leftX) {
                return {
                    leftX: miniScale[miniScale.length - 2].leftX,
                    leftValue: miniScale[miniScale.length - 2].leftValue
                }
            }
            for (var i = miniScale.length - 2; i >= 0; i--) {
                if (leftX >= miniScale[i].leftX2 - 1) {
                    return {
                        leftX: miniScale[i].leftX,
                        leftValue: miniScale[i].leftValue
                    }
                }
            }
        },
        _getMiniScale: function () {
            var miniScale = [];
            var commonSingleWidth = (this._fullbarWidth - this.options.firstWidth - this.options.lastWidth) / (this._scale.length - 3);
            for (var i = 0; i < this._scale.length - 1; i++) {
                var singleWidth = commonSingleWidth;
                var scale = this._scale[i];
                var leftX = null;
                if (i == 0) {
                    singleWidth = this.options.firstWidth
                } else if (i == this._scale.length - 2) {
                    singleWidth = this.options.lastWidth
                }
                if (i == 0) {
                    leftX = 0
                } else {
                    leftX = this.options.firstWidth + (i - 1) * commonSingleWidth
                }
                if (i < this._scale.length - 2) {
                    for (var j = 0; j < scale.value.length; j++) {
                        var s = {
                            leftX: leftX + j * singleWidth / scale.value.length,
                            leftValue: scale.leftValue[j]
                        };
                        if (j == 0) {
                            s.isBigPoint = true
                        }
                        miniScale.push(s)
                    }
                } else {
                    miniScale.push({
                        leftX: leftX,
                        leftValue: scale.key,
                        isBigPoint: true
                    });
                    miniScale.push({
                        leftX: this._fullbarWidth,
                        leftX2: leftX + singleWidth * scale.value,
                        leftValue: this._scale[i + 1].key,
                        isBigPoint: true
                    })
                }
            }
            for (var i = miniScale.length - 2; i >= 0; i--) {
                var mScale = miniScale[i];
                if (i == 0) {
                    mScale.leftX2 = 0;
                    break
                }
                if (mScale.isBigPoint) {
                    mScale.leftX2 = mScale.leftX - (mScale.leftX - miniScale[i - 1].leftX) * 0.6
                } else if (miniScale[i - 1].isBigPoint) {
                    mScale.leftX2 = mScale.leftX - (mScale.leftX - miniScale[i - 1].leftX) * 0.4
                } else {
                    mScale.leftX2 = mScale.leftX - (mScale.leftX - miniScale[i - 1].leftX) * 0.5
                }
            }
            return miniScale
        },
        _getValueByTempValue: function (value) {
            if (this._tempValue == null) return value;
            for (i = 0; i < this._tempValue.length; i++) {
                if (this._tempValue[i][0] == value) {
                    return this._tempValue[i][1]
                }
            }
            return value
        },
        _getPointLeft: function (buttonLeft) {
            return Math.abs(buttonLeft + this._buttonWidth / 2 - this.$fullbar.position().left)
        },
        getValue: function () {
            var leftX = this._getPointLeft(this.$leftButton.position().left);
            var leftPosition = this._getFixedPosition(leftX);
            var leftValue = this._getValueByTempValue(leftPosition.leftValue);
            var rightX = this._getPointLeft(this.$rightButton.position().left);
            var rightPosition = this._getFixedPosition(rightX);
            var rightValue = this._getValueByTempValue(rightPosition.leftValue);
            var leftValidX = this.$validbar.position().left;
            var rightValidX = leftValidX + this.$validbar.width();
            return {
                leftValue: leftValue,
                rightValue: rightValue,
                leftX: leftX,
                rightX: rightX,
                leftValidX: leftValidX,
                rightValidX: rightValidX
            }
        },
        _setSelectedbar: function () {
            this.$selectedbar.css({
                left: this.$leftButton.position().left + this.$leftButton.width() / 2,
                 this.$rightButton.position().left - this.$leftButton.position().left
            })
        },
        _setTipPosition: function () {
            var leftButtonLeft = this.$leftButton.position().left;
            var rightButtonLeft = this.$rightButton.position().left;
            var tipWidth = this.$tip.outerWidth();
            this.$tip.css("left", leftButtonLeft + (rightButtonLeft - leftButtonLeft) / 2 - tipWidth / 2 + this._buttonWidth / 2)
        },
        _setTipContent: function () {
            var value = this.getValue();
            var content = "";
            var min = null;
            var max = null;
            var leftValue = value.leftValue
            var rightValue = value.rightValue === 110 ? 10000 : value.rightValue
            if (leftValue === 0 && rightValue === 110) {
                content = "不限"
            } else {
                content = leftValue + '-' + rightValue + '万'
            }
            // if (this.noValidbar == false && Math.abs(value.rightX - value.rightValidX) <= 2 && Math.abs(value.leftX - value.leftValidX) <= 2) {
            //     content = "不限"
            // } else if (this._beyondMax == true && value.rightValue == this._getValueByTempValue(this._max) && this._beyondMin == true && value.leftValue == this._getValueByTempValue(this._min)) {
            //     content = "不限"
            // } else if (value.leftValue == this._getValueByTempValue(this._min) && value.rightValue == this._getValueByTempValue(this._max)) {
            //     content = value.leftValue + "-" + this._scale[this._scale.length - 2].key + this._unit + "以上"
            // } else if (this._beyondMax == true && value.rightValue == this._getValueByTempValue(this._max)) {
            //     if (value.leftValue == value.rightValue) {
            //         content = this._scale[this._scale.length - 2].key + this._unit + "以上"
            //     } else {
            //         content = value.leftValue + this._unit + "以上"
            //     }
            // } else if (this._beyondMin == true && value.leftValue == this._getValueByTempValue(this._min)) {
            //     content = value.rightValue + this._unit + "以下"
            // } else if (value.leftValue == value.rightValue) {
            //     content = value.leftValue + this._unit
            // } else {
            //     content = value.leftValue + "-" + value.rightValue + this._unit
            // }
            this.$tipContent.html(content);
            this._moveValue = value
        }
    }
})();

View Code

img

相关阅读:
GIS术语
 ArcGIS9.3 SDE安装
 Vue中videojs的配置
 vue项目打包部署后页面是空白的，以及部署之后页面能看到图片等资源找不到
 echarts属性的设置
 ASP.Net4中实现自定义的请求验证(转贴)
ASP.NET Session的七点认识(转贴)
JDK自带的keytool证书工具详解
 读取zip加密包里面文件的内容
 无题
原文地址：https://www.cnblogs.com/justSmile2/p/15836661.html

简版 区间选择

简版区间选择