如何在角度js中设置时间响应滑块？

Question

我在时间选择中使用角度为js的可拖动范围（https://jsfiddle.net/ValentinH/954eve2L/）的Slider。我想在这个滑块中设置时间。所以我的时钟从00.00到24.00。但我想设置时间间隔10分钟，就像00.10, 00.20, 00.30, 00.40, 00.50, 01.00, 01.10,01.10

<article> 
    <h2>Slider with draggable range</h2> 

    <rzslider rz-slider-model="slider_draggable_range.minValue" rz-slider-high="slider_draggable_range.maxValue" rz-slider-options="slider_draggable_range.options"></rzslider> 
</article> 

---

// 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 < 12) || 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 
    } 
}; 

小区：24限制，
地板：起点， MINVALUE：解组织起点
响了， MAXVALUE：解组织终点为响

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

Answer 1

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

想法是使用该选项自行设置选项。这样你可以将它设置为非整数。

（搜索演示Slider with Alphabet在http://angular-slider.github.io/angularjs-slider/）

这样的（不是这样的，只是一个例子）：

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; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<link href="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script> 
 
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script> 
 
<div ng-app="rzSliderDemo"> 
 
    <div ng-controller="MainCtrl" class="wrapper"> 
 
    <header> 
 
     <h1>AngularJS Touch Slider</h1> 
 

 
    </header> 
 
    <article> 
 
     <h2>Simple slider</h2> 
 
     Model: 
 
     <input type="text" ng-model="slider.minValue" /> 
 
     <input type="text" ng-model="slider.maxValue" /> 
 
     <br/> 
 
     <rzslider rz-slider-model="slider.minValue" rz-slider-high="slider.maxValue" rz-slider-options="slider.options"></rzslider> 
 
    </article> 
 
    </div> 
 
</div>