还有其他人对角度和范围滑块有问题吗？答案

【问题标题】：Does anyone else have trouble with angular and range sliders?还有其他人对角度和范围滑块有问题吗？
【发布时间】：2015-06-19 15:04:05
【问题描述】：

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

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

我最接近的是 angular-rangeslider，但当与 ng-repeat 一起使用时，结果却是令人难以置信的错误。我想我可以手动写出所有 25 个，但我不想这样做。

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

【问题讨论】：

如果它们都不能正常工作，你认为问题可能是它们的共同点吗？（换句话说，可能是实现问题？）

标签： angularjs rangeslider

【解决方案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.

【讨论】：

【解决方案2】：

我在plunker 中做了一个示例，说明我将如何使用它

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

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

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

<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 的旋转使其垂直。请注意，您必须定义比“输入”更好的 CSS 选择器

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

希望对你有帮助

【讨论】：