Javascript 如何在AngularJS中实现jQuery范围滑块_Javascript_Angularjs_Slider_Angularjs Directive

Javascript 如何在AngularJS中实现jQuery范围滑块

javascript angularjs

Javascript 如何在AngularJS中实现jQuery范围滑块,javascript,angularjs,slider,angularjs-directive,Javascript,Angularjs,Slider,Angularjs Directive,我正在尝试在我现有的AngularJS应用程序中使用我听从了作者的意见我从作者的github下载了以下文件（在Head标签中），并添加到我的index.html HTML代码： <head> <link rel="stylesheet" href="css/angular-slider.css"> <script src="js/vendor/angular-slider.js"></script> </head> <

我正在尝试在我现有的AngularJS应用程序中使用

我听从了作者的意见

我从作者的github下载了以下文件（在Head标签中），并添加到我的

index.html

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>

我在浏览器中看不到任何滑块渲染。但是，应用程序中较旧的特定于角度的功能仍然有效，并且浏览器控制台中没有错误

如果您找不到上述问题，请随意建议在AngularJS应用程序中实现范围滑块的任何其他方法

我对AngularJS还很陌生

如果您希望我也在此处发布作者的库文件代码，请告诉我。

好的，我在准备此文件时发现了一些问题，但现在它正在工作：

发现的问题：

需要angularjs版本
```
1.1.4或更高版本
```
您需要有
```
滑块模板.html
```
文件

正如@Pascal所说，您需要包括

uiSlider

：

var app = angular.module('myApp', ['uiSlider'])

我在下面为您准备了一个工作演示。我希望它能帮助你

最近我在angularJS中使用了范围滑块。如果要使用花式滑块或滑块指令。你将从下面得到它

有许多类型的滑块，如

简单滑块
范围滑块
具有自定义样式的滑块
具有动态选择栏颜色的滑块
带有自定义地板/天花板/台阶的滑块
带刻度的滑块

它非常易于使用，便于移动和定制

我使用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">$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>


什么行业？
商用卡车运输
其他行业
员工人数？
0
25k
入学率（%）？
0%
100%
每位员工的年成本？
$0
30万美元

在脚本标记中添加以下代码

<!-- 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 -->


var slider=document.getElementById（“myRange”）；
var输出=document.getElementById（“演示”）；
output.innerHTML=slider.value；
slider.oninput=函数（）{
output.innerHTML=this.value；
}

上面的脚本对我很好，应该对你也很好。

愚蠢的问题，但需要问一下。你也包括了

angular

库吗？是的，我包括了。这就是为什么所有其他东西仍然有效。为了让问题更具可读性，我刚刚发布了我的

index.html

@WooCaSh的截图，没有错误。但是，当我在chrome中使用element inspector查找

。

时，我可以看到它在那里，但没有渲染。所以，我去看了“angular slider.css”，我注意到css文件中的所有“slider”术语都是红色的，带有错误msg

selector matches unknown element slider

此错误可能是由您的IDE造成的，它无法识别自定义html标记。应该还有另外一个问题。即使我也是Angular方面的初学者，我也会尽力帮助你：）如果我错了，请纠正我，但当你将“uiSlider”注入应用程序以在应用程序中使用uiSlider模块时，它应该会起作用

var-app=angular.module（'myApp'，['uiSlider'））

它现在显示在屏幕上。当我设置

floor=“0.0”天花=“1.0”

时，它不会滑动。我正在调查。如果您能对此发表评论，那将是非常有帮助的。我为您编辑了演示。步骤0.1的范围为0到1。请检查并告诉我是否可以。您不再需要slider-template.html文件。它在当前版本（0.1.5）中的指令中有一行。

<!-- 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 -->