角度jsの鳴動スライダで時間を設定する方法は？

Question

私は時間選択のための角度jsでdraggable範囲（https://jsfiddle.net/ValentinH/954eve2L/）とSliderを使用しています。このスライダーで時間を設定したい。だから私の時計は00.00から24.00です。しかし、私は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分間隔で時間を設定したいです。それは不可能なので。私は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制限、
床：開始点、 MINVALUE：
ためploteの出発点は、 MAXVALUEを鳴らし：あなたのアイデアを共有してください鳴っ

のためのポイントを終了plote 。この質問は私にとって非常に重要であり、あなたの答えは貴重です。

Answer 1

私が正しくあなたを理解している場合、あなたが望むものは、stepsArrayオプションを使用して達成することができます。

アイデアは、このオプションを使用して自分でオプションを設定することです。それは非整数値に設定できます。これが正しい

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>