如何在AngularJS中实现jQuery范围滑动条

I am trying to use anuglar-slider in my existing AngularJS app.

我正在尝试在我现有的AngularJS应用中使用anuglarl -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.

我在浏览器中看不到任何滑动条。然而，应用程序中较旧的角度特定功能仍然有效，在浏览器的控制台上没有错误。

If you cannot find problem above, feel free to suggest any other way to implement range slider in AngularJS app.

如果你无法找到上面的问题，请建议其他方法来实现AngularJS应用中的range滑块。

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

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或更高版本
you need have slider-template.html file
你需要有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
我准备了一个工作演示如下。我希望它能对你有所帮助

DEMO

演示

#2

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 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. 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">$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.

上面的脚本对我来说不错，也应该对你有用。

#1