Angular rzslider：最小值的最大值和最大值的最小值；范围滑块

Question

我正在使用rzslider 制作一个范围滑块，其行为如下：

• 地板 = -10，天花板 = 10
• minRange = 1
• 起始值，minValue = -5；最大值 = 5
• noSwitching = true

以及我遇到的问题：

• minValue 需要一个 0 的上限，而 maxValue 需要一个 0 的下限，因此范围永远不能是例如1-5。

---

编辑：

可能的值可能是：-2,5 或 -4,1

不允许的值包括：2,4 或 -9,-2

Answer 1

查看 [https://jsfiddle.net/dyf8maqb/8 中的范围滑块示例。

$scope.minRangeSlider = {
    minValue: -5,
    maxValue: 5,  
    options: {
        floor: -10,
        ceil: 10,
        step: 1,
        noSwitching: true,
        minRange: 1,
        onEnd: function () {
            $scope.minRangeSlider.minValue = Math.min($scope.minRangeSlider.minValue,0);
            $scope.minRangeSlider.maxValue = Math.max($scope.minRangeSlider.maxValue,0);
        }
    }
};

Answer 2

应该这样做（见https://jsfiddle.net/dyf8maqb/11/）

<div style="width:50%;float:left">
    <rzslider rz-slider-model="minRangeSlider.value" rz-slider-options="minRangeSlider.options"></rzslider>
</div>
<div style="width:50%;float:left">
    <rzslider rz-slider-model="maxRangeSlider.value" rz-slider-options="maxRangeSlider.options"></rzslider>
</div>

$scope.minRangeSlider = {
    value: -5,
    options: {
        floor: -10,
        ceil: 0,
        step: 1,
        translate: function(value, id, label) {
          return (label === 'ceil') ? '' : value;
        }
    }
};

$scope.maxRangeSlider = {
    value: 5,
    options: {
        floor: 0,
        ceil: 10,
        step: 1,
        translate: function(value, id, label) {
          return (label === 'floor') ? '' : value;
        }
    }
};