How to implement jQuery range slider in AngularJS

Question

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

I followed the author's comments here

I downloaded below files (in Head tag) from author's github and added in my index.html

HTML code:

<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

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.

I am fairly new to AngularJS

Let me know if you like me to post Author's library file code here as well.

Stupid question but need ask. Did you include angular library too? — WooCaSh
– WooCaSh, Commented Jun 14, 2013 at 16:35
Yes, I did. That is why all other stuff still works. To make question readable, I just posted snipped of my index.html — Watt
– Watt, Commented Jun 14, 2013 at 16:37
@WooCaSh no error. But, when I use element inspector in chrome to look for <slider..>..</slider> I can see it is there but not rendering. So, I went to see 'angular-slider.css' I notice that all the 'slider' term in the css file are red with error msg selector matches unknown element slider — Watt
– Watt, Commented Jun 14, 2013 at 16:46
this error is probably caused by your IDE which don't recognize custom html tags. There should be another issue. I will try help you even if I am beginner in Angular too :) — WooCaSh
– WooCaSh, Commented Jun 14, 2013 at 16:50
Correct me if I'm wrong but it should work when you inject 'uiSlider' into your app to use the uiSlider module within your app. var app = angular.module('myApp', ['uiSlider']) — Pascal Bayer
– Pascal Bayer, Commented Jun 14, 2013 at 17:07

joragupra · Accepted Answer · 2013-10-30 07:56:58Z

9

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.html file
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

DEMO

edited Oct 30, 2013 at 7:56

joragupra

6921 gold badge12 silver badges23 bronze badges

answered Jun 14, 2013 at 17:14

WooCaSh

5,2225 gold badges39 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Watt Over a year ago

It shows up on screen now. It just doesn't slide when I set floor="0.0" ceiling="1.0". I am looking into it. It would be great help if you could comment on that.

WooCaSh Over a year ago

I edited for you DEMO. Range from 0 to 1 with step 0.1. Please check and tell me if it's ok.

Per Quested Aronsson Over a year ago

You don't need the slider-template.html file anymore. It is in-lined in the Directive in the current version (0.1.5).

Jignesh Mesvaniya · Accepted Answer · 2017-11-15 10:49:30Z

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 slider directive with no external dependencies There are many types of sliders like

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.

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

Collectives™ on Stack Overflow

How to implement jQuery range slider in AngularJS

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related