Добавьте метку между значением с помощью rzslider - PullRequest
0 голосов
/ 22 ноября 2018

Я использую 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...