还有其他人在使用 angular 和范围滑块时遇到问题吗？

Question

找到一个与ng-repeat配合良好并且可以垂直显示的范围滑块似乎是一项不可能完成的任务。有人知道接下来要尝试什么吗？

我正在尝试制作一个可以在一天中的每个小时手动控制标志亮度的镜头。目前的想法是将 24 个垂直范围滑块彼此相邻堆叠，其中每个滑块控制该小时的亮度，第 25 个滑块是一个主控件，可同时调整所有其他 24 个滑块。

我最接近的是 angular-rangeslider，但当它与 ng-repeat 一起使用时，它出现了令人难以置信的错误。我想我可以手动写出所有 25 个，但我宁愿不写。

另一个想法是使用 jqPlot，因为您可以拖动数据点。（它似乎是唯一一个你也可以拖动数据点的图表库（如果我错了请纠正我））

Answer 1

HTML5 范围输入怎么样？

HTML:

<input type="range"
    orient="vertical"
    ng-repeat="slider in sliders"
    ng-model="slider.val" />

CSS（在某些浏览器中需要使其垂直）：

input[type=range][orient=vertical] {
    writing-mode: bt-lr; /* IE */
    -webkit-appearance: slider-vertical; /* Webkit */
    width: 20px;
    height: 200px;
}

适用于 Angular 绑定。 Here's a Plunker.

Supported browsers look to be IE10+ and most others.

Answer 2

我在 plunker 中举例说明了我将如何使用它

我创建了一个空对象数组。

$scope.sliders = [];
for(var i=0; i<5; i++){
  $scope.sliders.push({});
}

我使用 HTML 范围输入使用 ng-repeat 显示它

<span ng-repeat="slider in sliders track by $index">
    <input ng-init="slider.value = 0" type="range" ng-model="slider.value">
    {{slider.value}}
  </span>

可能不优雅，但我只是使用 CSS 的旋转使其垂直。请注意，您必须定义比 "input"

更好的 css 选择器

input {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    width:70px;
    height:100px;
}

希望对您有所帮助

还有其他人在使用 angular 和范围滑块时遇到问题吗？

Does anyone else have trouble with angular and range sliders?

angularjs

rangeslider