Пользовательские AngularJS Bootstrap Slider

Question

Попытка использовать этот ползунок с angularJS
https://github.com/seiyria/angular-bootstrap-slider

У меня есть это работает, хотя хотел быть в состоянии сделать несколько пользовательских элементов и глядя на файл источника док, и после того, как слишком много Я чувствую, что мне нужно какое-то направление.

То, что я пытаюсь сделать с слайдером ...

• есть он отображался в диапазоне 1-100 в подсказке (Эта часть хорошо)
• имеет самый левый обратный ход на 50% (наполовину) и правом наиболее endstop на 100% (полном)

• 3 горизонтальных отметок, где ползун метка может приземлиться: 50%, 80%, 100%

  возможен ли это, какие-либо предложения были бы очень признательны?

  Doc: https://github.com/seiyria/angular-bootstrap-slider/blob/dbb10c69a929dfca659cf46dce5362d562232332/test.js

Answer 1

Извините за поздний ответ, только случайно нашел этот вопрос. Я реализовал очень похожий слайдер диапазона с использованием seiyria. Я добавил рамки привязки для своего ползунка диапазона и полностью настроил его. Возможно, это может помочь следующее. Я оставляю вам свои параметры, которые я добавил в свой контроллер, а также мой html для слайдера.

CONTROLLER

$scope.testOptions = { 
     min: -2.5, 
     max: 2.5, 
     step: 0.5, 
     orientation: 'horizontal', // vertical 
     handle: 'round', //'square', 'triangle' or 'custom' 
     tooltip: 'always', //'hide','always' 
     tooltipseparator: ':', 
     tooltipsplit: false, 
     enabled: true, 
     naturalarrowkeys: false, 
     range: false, 
     ngDisabled: false, 
     reversed: false, 
     ticks: [-2.5,-2,-1.5,-1,-0.5,0,0.5,1,1.5,2,2.5], 
     ticks_labels: ['-2.5','-2','-1.5','-1','-0.5','0','0.5','1','1.5','2','2.5'], 
     ticks_snap_bounds: 30 
    }; 
    $scope.range = true; 
    $scope.slidervalue = "0"; 

HTML

<div class="col-sm-12"> 
      <div class="as-slider-container"> 
       <h4>Adjustment Score</h4> 
       <span>Please select an appropriate Score by using the slider below.</span> 

       <slider ng-model="sliders.sliderValue" min="testOptions.min" step="testOptions.step" max="testOptions.max" value="testOptions.value" data-slider-handle="custom" ticks="testOptions.ticks" ticks-labels="testOptions.ticks_labels"></slider> 
       <div class="slider-label-container"> 
       <label class="slider-selected-label label-primary label" data-ng-bind="sliders.sliderValue">Scoring</label> 
       </div> 
      </div> 
     </div> 

Резюме: Вы можете использовать "ticks_snap_bounds ", чтобы установить размер (в пикселях), где произойдет привязка к следующему тику/шагу. Поэтому, если вы хотите иметь 3 привязки (на 50%, 80%, 100%), просто добавьте эти значения в качестве ваших тиков. Затем вы можете добавить все ярлыки, чтобы вы не только получили 3 привязки.

Помните, что вы можете добавить пользовательский класс над слайдером и переопределить его стили для расширения/скрытия или полного изменения внешнего вида. В качестве подсказки это еще один способ добавления конечных точек, если они вам нужны, и не могут добавлять их через опционы на акции.

Попробует следить за скрипкой, если необходимо. Нет необходимости изменять эту директиву, поскольку привязка и конечные точки настраиваются в настройках ползунков.