[英]Custom AngularJS Bootstrap Slider
尝试将此滑块与angularJS一起使用
https://github.com/seiyria/angular-bootstrap-slider
尽管确实希望能够做一些自定义项目并查看源doc文件,但我确实能正常工作,但是经过了很多时间之后,我觉得需要一些指导。
我正在尝试使用滑块做的是...
3个水平标记,滑杆标记可以落入:50%,80%,100%
这有可能吗,任何建议将不胜感激?
Doc: https : //github.com/seiyria/angular-bootstrap-slider/blob/dbb10c69a929dfca659cf46dce5362d562232332/test.js
对不起,我的答复很晚,才偶然发现了这个问题。 我已经使用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个快速滴答声结束。
请记住,您可以在滑块上方添加一个自定义类,并覆盖其样式以完全扩展/隐藏或改变外观。 提示,这是添加端点的另一种方式,如果您需要它们并且无法通过股票期权添加它们。
如有需要,将尝试用小提琴跟进。 不需要修改指令本身,因为捕捉和端点都可以在滑块选项中设置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.