javascript 如何在 AngularJS 中实现 jQuery 范围滑块
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17113195/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement jQuery range slider in AngularJS
提问by Watt
I am trying to use anuglar-sliderin my existing AngularJS app.
我正在尝试在我现有的 AngularJS 应用程序中使用anuglar-slider。
I followed the author's comments here
我在这里关注了作者的评论
I downloaded below files (in Head tag) from author's github and added in my index.html
我从作者的 github 下载了以下文件（在 Head 标签中）并添加到我的 index.html
HTML code:
HTML代码：
<head>
<link rel="stylesheet" href="css/angular-slider.css">
<script src="js/vendor/angular-slider.js"></script>
</head>
<body>
<slider floor="10" ceiling="60" ng-model-low="lowValue" ng-model-high="highValue"></slider>
</body>
App.js(Angular code) . I added second line as per Author's instructions, I suspect I did do something wrong there
App.js（角代码）。我按照作者的指示添加了第二行，我怀疑我在那里做错了什么
var app = angular.module('myApp', [])
angular.module('uiSlider', []);
app.constant('Config',
{
baseURL : "http://blah",
httpTimeout : 36000
});
app.config(function($logProvider) {
$logProvider.debugEnabled(true);
});
//and some other app specific code follows
I don't see any slider rendering in browser.However, the older Angular specific functionality in the app still works and there is no error in browser's console.
我在浏览器中没有看到任何滑块渲染。但是，应用程序中较旧的 Angular 特定功能仍然有效，并且浏览器的控制台中没有错误。
If you cannot find problem above, feel free to suggest any other way to implement range sliderin AngularJS app.
如果您在上面找不到问题，请随时提出在 AngularJS 应用程序中实现范围滑块的任何其他方法。
I am fairly new to AngularJS
我对 AngularJS 还很陌生
Let me know if you like me to post Author's library file code here as well.
如果您喜欢我也在这里发布作者的库文件代码，请告诉我。
采纳答案by WooCaSh
Ok I found some troubles when preparing this but now it's working:
好的，我在准备这个时发现了一些麻烦，但现在它正在工作：
Founded troubles:
成立问题：
- it's required angularjs version
1.1.4 or higher - you need have
slider-template.htmlfile and like @Pascal said you need to include
uiSlider:var app = angular.module('myApp', ['uiSlider'])- I prepared for you a working demo below. I hope it will help you
- 它需要 angularjs 版本
1.1.4 or higher - 你需要有
slider-template.html文件 就像@Pascal 说的，你需要包括
uiSlider：var app = angular.module('myApp', ['uiSlider'])- 我在下面为您准备了一个工作演示。我希望它会帮助你
回答by Jignesh Mesvaniya
Recently I have used RANGE SLIDER in angularJS. If you want to use fancy slider or slider directive. You will get it from below.
最近我在 angularJS 中使用了 RANGE SLIDER。如果你想使用花哨的滑块或滑块指令。你会从下面得到它。
AngularJS slider directive with no external dependenciesThere are many types of sliders like
没有外部依赖项的 AngularJS 滑块指令有很多种滑块，例如
- Simple slider
- Range slider
- Slider with custom style
- Slider with dynamic selection bar color
- Slider with custom floor/ceil/step
- Slider with ticks
- 简单的滑块
- 范围滑块
- 自定义样式的滑块
- 带有动态选择栏颜色的滑块
- 带有自定义地板/天花板/台阶的滑块
- 带刻度的滑块
It's very easy to use, mobile friendly and customizable.
它非常易于使用、移动友好且可定制。
I have used simple slider using jQuery. Code is given below.
我使用 jQuery 使用了简单的滑块。代码如下。
<form>
<div class="choose_industry">
<div class="form-group">
<label class="control-label col-xs-12 col-sm-4 col-md-2 col-lg-2 " for="name">What Industry?</label>
<div class="col-xs-12 col-sm-8 col-md-10 col-lg-10">
<div class="radio col-xs-6 col-sm-6 col-md-6 col-lg-6">
<input type="radio" name="radio1" id="radio1" value="cdl" ng-model="leg_ser.industry">
<label for="radio1">
Commercial Trucking Transportation
</label>
</div>
<div class="radio col-xs-6 col-sm-6 col-md-6 col-lg-6">
<input type="radio" name="radio1" id="radio2" value="non_cdl" ng-model="leg_ser.industry">
<label for="radio2">
Other Industries
</label>
</div>
</div>
</div>
</div>
<div class="employee_counting">
<div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
<label class="control-label" for="name">Number of Employees?</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-user"></i></span>
<input type="number" class="form-control" placeholder="Employees" name="Number of Employees" ng-model="leg_ser.num_of_emp">
<!-- <span>Total Number of Employees</span> -->
</div>
<div class="range_slider">
<span class="pull-left">0</span>
<span class="pull-right">25k</span>
<div id="slidecontainer">
<input type="range" min="0" max="25000" value="0" class="slider" id="myRange" ng-model="leg_ser.num_of_emp">
</div>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
<label class="control-label" for="name">Enrollment Percentage (%)?</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-percent"></i></span>
<input type="number" class="form-control" placeholder="Percentage" name="Enrollment Percentage" ng-model="leg_ser.enroll_per">
<!-- <span>Estimated Percentage that will enroll</span> -->
</div>
<div class="range_slider">
<span class="pull-left">0%</span>
<span class="pull-right">100%</span>
<div id="slidecontainer">
<input type="range" min="1" max="100" value="1" class="slider" id="myRange" ng-model="leg_ser.enroll_per">
</div>
</div>
</div>
<div class="form-group col-xs-12 col-sm-4 col-md-4 col-lg-4">
<label class="control-label" for="name">Annual Cost per Employees?</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-dollar"></i></span>
<input type="number" class="form-control" placeholder="Cost" name="Annual Cost per Employees" ng-model="leg_ser.annual_cost">
<!-- <span>Avarage Salary and benifits per Employee</span> -->
</div>
<div class="range_slider">
<span class="pull-left"><!-- RANGE SLIDER JS START -->
<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;
slider.oninput = function() {
output.innerHTML = this.value;
}
</script>
<!-- RANGE SLIDER JS OVER -->
</span>
<span class="pull-right">0k</span>
<div id="slidecontainer">
<input type="range" min="0" max="300000" value="0" class="slider" id="myRange" ng-model="leg_ser.annual_cost">
</div>
</div>
</div>
</div>
</form>
Add following code in the script tag
在脚本标签中添加以下代码
##代码##Above script working good for me, should work for you too.
以上脚本对我有用，也应该对你有用。
