如何在运行时设置最大值和最小值以范围滑块

Question

无法在运行时设置最大和最小值，在这里我使用的是使用html中的angularjs标签的离子范围滑块这是我的HTML代码，

 <div class="range-slider"> //range slider class
            <div >
                <input type="text" class="js-range-slider"  />
            </div>
        </div>
        <div class="extra-controls">
        <input type="text" maxlength="4" value="{{miniPriceforFilter}}" class="inp js-from" />
        <input type="text" maxlength="4" value="{{maxPriceforFilter}}" class="inp js-to" />
    </div>

在同一页面中使用此脚本，我可以将这些JavaScript变量设置为角变量，

    var $range = $(".js-range-slider"),
    $from = $(".js-from"),
    $to = $(".js-to"),   
    range,
    min = 0 ,
    max =1000 ,
    from,
    to;
    var updateValues = function () {
    $from.prop("value", from);
    $to.prop("value", to);
    };
    $range.ionRangeSlider({
    type: "double",
    min: min,
    max: max,
    prettify_enabled: false,
    grid: true,
    grid_num: 10,
    onChange: function (data) {
    from = data.from;
    to = data.to;        
    updateValues();
  }
  });
    range = $range.data("ionRangeSlider");
    var updateRange = function () {
    range.update({
    from: from,
    to: to
  });
};
    $from.on("change", function () {
    from = +$(this).prop("value");
    if (from < min) {
    from = min;
}
if (from > to) {
    from = to;
}
    updateValues();    
    updateRange();
    });
    $to.on("change", function () {
    to = +$(this).prop("value");
    if (to > max) {
    to = max;
    }
    if (to < from) {
    to = from;
    }
     updateValues();    
     updateRange();
    });
    </script>

需要帮助！

Answer 1

使用 Angular-Slider

<div>
    <rzslider
         rz-slider-model="slider.value"
         rz-slider-options="slider.options"></rzslider>
</div>

var app = angular.module("app", ['rzModule']);
app.controller("ctrl", function($scope) {
  $scope.min=10;
  $scope.max=150;
  $scope.visSlider = {
    options: {
      floor: 0,
      ceil: 200,
      step: 1
    }
  };
  
  //$scope.changeValues = functio
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.0.1/rzslider.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/angularjs-slider/6.0.1/rzslider.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
Slider:
  <rzslider rz-slider-model="min" rz-slider-high="max" rz-slider-options="visSlider.options"></rzslider>
  
  <input type="text" ng-model="min">
  <input type="text" ng-model="max">
</div>