Question

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

floor = -10，ceiling = 10
minRange = 1
起始值，minValue = -5; maxValue = 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;
        }
    }
};

Angular rzslider：min＆amp;的最大值min值为max;范围滑块

2 个答案: