Adding json array response in range slider angular

Question

I got a json response like this. It is dynamic and I want to add the details in range slider. The slider max value must dynamically increases when there will be new element in array.

"time": [
        "2018-05-24T06:30:00",
        "2018-05-24T07:00:00",
        "2018-05-24T07:30:00"
]

I have never worked on slider before . Any suggestion how to achieve this ?

Answer 1

You can use angularjs-slider library (which has ui-bootstrap as dependency). It offers lot customization in sliders & very handy with angularjs. For your case after every new value added to array you can reload the slider by 1st deleting it & then loading it again. Or you can use their rzSliderForceRender custom event for that. Using this

Your HTML will look like:

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

And in controller slider config code as:

$scope.dates = ["2018-05-24T06:30:00",
  "2018-05-24T07:00:00"];
var datesObjests = [];
for (var i = 0; i < $scope.dates.length; i++) {
  datesObjests.push(new Date($scope.dates[i]));
}
$scope.slider_dates = {
  value: datesObjests[0],
  options: {
    stepsArray: datesObjests,
    translate: function(date) {
      if (date !== null) return date.toLocaleString();
      return '';
    },
  },
};

Working Plunker Example for your requirement.