如何在角度js中设置rang滑块中的时间?

我在角度js中使用Slider with draggable range( https://jsfiddle.net/ValentinH/954eve2L/ )进行时间选择。 我想在这个滑块中设置时间。 所以我的时钟是从00.00到24.00。 但我希望以10分钟的间隔设定时间,如00.10, 00.20, 00.30, 00.40, 00.50, 01.00, 01.10,01.10

 

Slider with draggable range


 // Slider with draggable range $scope.slider_draggable_range = { minValue: 1, maxValue: 8, options: { ceil: 10, floor: 0, draggableRange: true } }; 

 $scope.slider_draggable_range = { minValue: $scope.fromTime, maxValue: $scope.toTime, options: { ceil: 24, floor: 0, draggableRange: true, showTicks: true, hideLimitLabels: true, hourBase: function(value) { return (((value > 1 && value  25) ? '0' : '') + (value + 22) % 24 + '00 hrs' }, steps: pules() } }; 

我无法发布我的完整代码。 因为这是不可能的。 我一点一点地选择时间,如10.00,11.00,12.00 ……但是现在我想从1.10,1.20,1.30开始计时。 在此处输入图像描述

当我使用静态minValue: 4.40然后它将指向4并且当我设置4.60然后它将指向5 ,因此它转换为圆形图值。 不在积分中。

 $scope.slider_draggable_range = { minValue: 4.40, maxValue: 7, options: { ceil: 24, floor: 0, draggableRange: true } }; 

ceil:24限制,
floor:起点,minvalue:plote的起点
rang,maxvalue:用于响铃的结束点

请分享你的想法。 这个问题对我来说非常重要,你的答案很有价值。

如果我理解正确,你想要的东西,可以使用stepsArray选项实现。

我们的想法是使用该选项自行设置选项。 多数民众赞成你可以将它设置为非整数。

(在http://angular-slider.github.io/angularjs-slider/中搜索Slider with Alphabet的演示Slider with Alphabet

像这样(不是这样,只是一个例子):

 var app = angular.module('rzSliderDemo', ['rzModule', 'ui.bootstrap']); app.controller('MainCtrl', function($scope, $rootScope, $timeout) { var arr = getRange().map(n => { return { value: n, legend: n }; }); $scope.slider = { minValue: '10.50', maxValue: '14.20', options: { showTicks: true, stepsArray: arr } }; }); function getRange() { var arr = []; var d = new Date(2017, 1, 1); for (var i = 0; i < (6 * 24); i++) { d.setMinutes(d.getMinutes() + 10); arr.push(leadZero(d.getHours()) + '.' + leadZero(d.getMinutes())); } return arr; } function leadZero(time) { return time < 10 ? '0' + time : time; } 
 * { margin: 0; padding: 0; } body { font-family: 'Open Sans', sans-serif; color: #1f2636; font-size: 14px; padding-bottom: 40px; } header { background: #0db9f0; color: #fff; margin: -40px; margin-bottom: 40px; text-align: center; padding: 40px 0; } h1 { font-weight: 300; } h2 { margin-bottom: 10px; } .wrapper { background: #fff; padding: 40px; } article { margin-bottom: 10px; } .tab-pane { padding-top: 10px; } .field-title { width: 100px; } .vertical-sliders { margin: 0; } .vertical-sliders>div { height: 250px; } 
      

AngularJS Touch Slider

Simple slider

Model: