角度 rzslider:最小值为最大值，最大值为最小值;范围滑块

Angular rzslider: max value for min & min value for max; range slider

本文关键字：最小值 最大值 范围 rzslider 角度      更新时间：2023-09-26

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

    楼层 = -10
  • ，天花板 = 10
  • 最小范围 = 1
  • 起始值，最小值 = -5;最大值 = 5
  • 无切换 = 真

以及我遇到的问题：

  • 最小值需要上限为 0，最大值需要 0 的下限，因此范围永远不能是 1-5。

编辑：

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

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

请查看 [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);
        }
    }
};

这样的事情应该可以做到（见 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;
        }
    }
};
相关文章：