自AngularJS引导滑块(Custom AngularJS Bootstrap Slider)

2019-10-23 17:21发布

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

我也有工作,虽然希望能够做一些定制的项目,在查看源doc文件,和太多的时间后,我觉得需要一些方向。

我试图用滑块做的是...

  • 有它在范围从可见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个卡扣蜱您可以添加所有的标签。

请记住,您可以添加滑块上方的自定义类并覆盖其风格延长/隐藏或改变它的外表和感觉完全。 作为一个提示,那就是如果你需要它们,也无法通过股票期权将它们添加增加端点的另一种方式。

将尽力需要具有小提琴跟进。 有没有必要修改指令本身作为捕捉和终点都在滑块选项设定。



文章来源: Custom AngularJS Bootstrap Slider