如何在AngularJS中实现jQuery范围滑块
[英]How to implement jQuery range slider in AngularJS
问题描述
I am trying to use anuglar-slider in 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) . App.js （角度代码）。 I added second line as per Author's instructions, I suspect I did do something wrong there 我根据作者的指示添加了第二行，我怀疑我确实在那里做错了
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 slider in 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. 如果您希望我在这里发布作者的库文件代码，请告诉我。
2 个解决方案
解决方案1
9 已采纳 2013-06-14 17:14:19
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它需要angularjs版本1.1.4 or higher版本 - you need have
slider-template.htmlfile你需要有slider-template.html文件 and like @Pascal said you need to include
uiSlider:和@Pascal说你需要包含uiSlider：var app = angular.module('myApp', ['uiSlider'])- I prepared for you a working demo below. 我为你准备了下面的工作演示。 I hope it will help you 我希望它会对你有所帮助
解决方案2
0 2017-11-15 10:49:30
Recently I have used RANGE SLIDER in angularJS. 最近我在angularJS中使用了RANGE SLIDER。 If you want to use fancy slider or slider directive. 如果你想使用花式滑块或滑块指令。 You will get it from below. 你将从下面得到它。
AngularJS slider directive with no external dependencies There 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. 我使用jQuery使用了简单的滑块。 Code is given below. 代码如下。
<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">$0</span>
<span class="pull-right">$300k</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 在脚本标记中添加以下代码
<!-- 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 -->
Above script working good for me, should work for you too. 以上脚本对我有用，也适合你。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.