Does anyone else have trouble with angular and range sliders?

Question

Seems to be an impossible task to find a range slider that works well with ng-repeat and can be displayed vertically. Anyone have ideas about what to try next?

I'm trying to make a took where you can manually control the brightness of a sign at each hour of the day. The current idea is to stack 24 vertical range sliders next to each other where each one controls the brightness for that hour and a 25th slider that is a master control that adjusts all 24 other sliders simultaneously.

The closest I came was with angular-rangeslider but it turned out to be incredibly buggy when used with ng-repeat. I suppose I could manually write out all 25 of them but I'd rather not.

The other idea is to use jqPlot because you can drag the datapoints. (It seems to be the only chart library where you can drag the datapoints too (please correct me if I'm wrong))

Answer 1

How about an HTML5 range input?

HTML:

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

CSS (necessary to make it vertical in some browsers):

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

Works fine with Angular bindings. Here's a Plunker.

Supported browsers look to be IE10+ and most others.

Answer 2

I made an exemple in plunker of how i would use this

I create an array of empty object.

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

I display it using a ng-repeat using HTML range inputs

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

Maybe not elegant but i just use the rotation from CSS to make it vertical. Note that you'll have to define a better css selector than "input"

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

Hope it helped