각도 js에서 울림 슬라이더에서 시간을 설정하는 방법은 무엇입니까?

Question

시간 선택을위한 각도 js의 드래그 가능한 범위 (https://jsfiddle.net/ValentinH/954eve2L/)가있는 슬라이더를 사용하고 있습니다. 이 슬라이더에서 시간을 설정하고 싶습니다. 그래서 내 시계는 00.00부터 24.00까지입니다. 하지만, 10 분 간격으로 시간을 설정

$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() 
    } 
}; 

내 전체 코드를 게시 할 수 없습니다

---

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

---

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

00.10, 00.20, 00.30, 00.40, 00.50, 01.00, 01.10,01.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 
    } 
}; 

천장을 만들다 : 24 한계,
층 : 시작점, MINVALUE :
울렸다, MAXVALUE에 대한 plote의 출발점은 : 울렸다

에 대한 포인트를 종료 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>