Я использую rzslider для angularjs, но я хотел бы добавить метку в середине трех интервалов (в противном случае под ползунком в противном случае он не виден).Я думал сделать шаг между значением, но таким образом я могу двигаться только на шаг.У вас есть представление о том, как можно маркировать так:
0 ---- НИЗКИЙ ---- | ------ СРЕДНИЙ ------ | ---- ВЫСОКИЙ ----100
Это код:
var myApp = angular.module('myapp', ['rzModule']);
myApp.controller('TestController', TestController);
function TestController() {
var vm = this;
vm.likelihood={a:33,b:66}
vm.priceSlider = {
options: {
floor: 0,
ceil: 100,
minRange: 1,
noSwitching : true,
translate: function(value, sliderId, label) {
switch (label) {
case 'model':
return '<b>A: </b>' + value;
case 'high':
return '<b>B: </b>' + value;
default:
return value
}
},
showTicksValues: true,
stepsArray: [
{value: vm.likelihood.a/2, legend: 'Low'},
{value: (vm.likelihood.b-vm.likelihood.a)/2+vm.likelihood.a, legend: 'Medium'},
{value: (100-vm.likelihood.b)/2+vm.likelihood.b, legend: 'High'},
]
}
}
}
и HTML:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
<script src="https://rawgit.com/rzajac/angularjs-slider/master/dist/rzslider.js"></script>
<div ng-app="myapp">
<div ng-controller="TestController as vm">
<p>Price: {{vm.priceSlider.value}}</p>
<rzslider rz-slider-model="vm.likelihood.a"
rz-slider-high="vm.likelihood.b" rz-slider-options="vm.priceSlider.options" rz-slider-translate="vm.translate" rz-slider-step-array="vm.stepArray"></rzslider>
</div>
</div>
Я публикую на jsfiddle: http://jsfiddle.net/w060jrmb/7/