Question

尝试将此滑块与angularJS一起使用 https://github.com/seiyria/angular-bootstrap-slider

我确实有它工作，虽然希望能够做一些自定义项目并查看源文档文件，并且经过太多时间后，我觉得需要一些方向。

我试图用滑块做什么......

可以在工具提示中的1-100范围内查看（这部分是好的）
最左侧支持率为50％（中途），最右侧支持率为100％（完整）
滑块标记可以着陆的3个水平标记：50％，80％，100％

这可能，任何建议都会受到高度赞赏吗？

文档： 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个快照标记。

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

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

自定义AngularJS Bootstrap滑块

1 个答案: