Как реализовать слайдер диапазона jQuery в AngularJS

Я пытаюсь использовать anuglar-slider в моем существующем приложении AngularJS.

Я следил за комментариями автора здесь

Я загрузил ниже файлы (в теге Head) из автора github и добавил в свой 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>

App.js (Angular код). Я добавил вторую строку в соответствии с инструкциями автора, я подозреваю, что сделал что-то не так.

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

Я не вижу рендеринга слайдера в браузере. Однако более старые функции Angular в приложении все еще работают, и в консоли браузера нет ошибок.

Если вы не можете найти проблему выше, не стесняйтесь предлагать любой другой способ реализовать слайдер диапазона в приложении AngularJS.

Я новичок в AngularJS

Сообщите мне, если вы хотите, чтобы я опубликовал здесь код файла библиотеки авторов.

Ответы

Ответ 1

Хорошо, я нашел некоторые проблемы при подготовке этого, но теперь он работает:

Основанные проблемы:

  • Требуется версия с угловым \1.1.4 or higher
  • вам нужен файл slider-template.html

  • и как @Pascal сказал, что вам нужно включить uiSlider:

    var app = angular.module('myApp', ['uiSlider'])
  • Я подготовил для вас рабочую демонстрацию ниже. Я надеюсь, что это поможет вам.

DEMO

Ответ 2

Недавно я использовал RANGE SLIDER в angularJS. Если вы хотите использовать причудливую слайдерную или слайдерную директиву. Вы получите его снизу.

директива слайдера 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>

Добавьте следующий код в тег script

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

Выше script работает хорошо для меня, также должно работать для вас.