尝试使用此滑块与angularJS
https://github.com/seiyria/angular-bootstrap-slider
我也有工作,虽然希望能够做一些定制的项目,在查看源doc文件,和太多的时间后,我觉得需要一些方向。
我试图用滑块做的是...
很抱歉这么晚才回复,只是无意中发现了这个问题。 我已经实现用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个卡扣蜱您可以添加所有的标签。
请记住,您可以添加滑块上方的自定义类并覆盖其风格延长/隐藏或改变它的外表和感觉完全。 作为一个提示,那就是如果你需要它们,也无法通过股票期权将它们添加增加端点的另一种方式。
将尽力需要具有小提琴跟进。 有没有必要修改指令本身作为捕捉和终点都在滑块选项设定。