如何在角度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: