角rzslider：最小值的最大值和最大值的最小值； 范围滑杆

Question

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

• 地板= -10，天花板= 10
• minRange = 1
• 起始值，minValue = -5; maxValue = 5
• noSwitching =真

我遇到的问题是：

• minValue的下限为0，maxValue的下限为0，因此范围永远不能为1-5。

---

编辑：

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

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

Answer 1

看一下[ https://jsfiddle.net/dyf8maqb/8中的Range滑块示例。

$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;
        }
    }
};