Javascript 自定义AngularJS引导滑块

尝试将此滑块与angularJS一起使用

我确实有它的工作，虽然希望能够做一些自定义项目，并在查看源文档文件，太多的时间后，我觉得需要一些指导

我想用滑块做的是

• 在工具提示中使其在1-100范围内可见（这部分很好）
• 在50%（中途）处有一个最左侧的止动块，在100%（满）处有一个最右侧的止动块
• 滑块标记可以降落的3个水平标记：50%、80%、100%
  这是否可能，如有任何建议，将不胜感激
  文件：

---

很抱歉回复太晚，只是无意中发现了这个问题。我使用seiyria实现了一个非常类似的范围滑块。我为我的范围滑块添加了捕捉边界，并对其进行了完全定制。也许以下几点可以帮助你。我将在控制器中添加的选项以及滑块的html留给您

控制器

HTML

调整分数
请使用下面的滑块选择适当的分数。
得分

摘要： 您可以使用“标记捕捉边界”选项设置捕捉到下一个标记/步骤的大小（以像素为单位）。因此，如果您希望有3个捕捉（50%、80%、100%），只需将这些值添加为刻度。然后您可以添加所有标签，这样您就不会只得到3个捕捉记号

请记住，可以在滑块上方添加自定义类并覆盖其样式，以完全扩展/隐藏或更改外观。作为提示，如果您需要端点，并且无法通过股票期权添加端点，那么这是另一种添加端点的方法

如果需要的话，我会试着用小提琴跟进。无需修改指令本身，因为捕捉和端点都可以在滑块选项中设置

$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";

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