angular-ui/ui-slider

jQuery UI Slider for AngularJS

ui-slider

Due to popular demand. This is WIP so expect breaking changes!

Requirements

• JQuery
• JQueryUI
• AngularJS

Usage

Check the demo for an example on how it works.

ui-slider's Issues

Range slider min value issue

How can make my slider to go through a specific array of values. For instance - [1,2,5,6,10,12,13]

slider is not working on mobile

the slider widget doesn't work on my mobile, which is samsung grand duo. Do you know why is it now working on mobile? thanks!

Getting undefined is not a function in elm.slider(options);

Getting undefined is not a function in elm.slider(options);
Please let me knnow if i missed some library

Please Add a License

I would like to use your module - but can only do so if it is licensed to my company's standards.

Directive won't apply

I'm trying to use the ui-slider, but I can't seem to make it work, it just won't show anything on the div.

Here's a plunker based on the demo:
http://plnkr.co/edit/Uxdmopyj51X1kVSmGQJg?p=preview

Possible to set inital values for range slider with two controls?

I'm trying to set the initial values for a range slider with two ui-controls. In the demo the example is called "Slider - range values, step with decimals" or Example7. Any pointers?

Cheers!

Sliders don't load into divs with CSS Opacity set to "0"

Sliders don't load into divs with CSS Opacity set to "0"

Next release availability question

I was experiencing the issue that was resolved in #78. What kind of time frame can be expected until the next release so that I can bring in the fix?

Fix / create tests

Setting range values via model to max, locks the slider

It seems that we misunderstood each other here: Issue#49
Here is a demo: http://jsfiddle.net/x8MZb/1/ . Just click the button and slider will be locked. I try to tell you that if you replace elm.slider(method, ngModel.$viewValue); with another setter from jquery ui slider you will avoid that jquery ui bug.

Range slider doesn't react to input changes

When trying to change input fields in the range demo, the slider doesn't respond.

http://htmlpreview.github.io/?https://github.com/angular-ui/ui-slider/blob/master/demo/demo.html

Documentation for subscribing to events

From api of jquery ui , how do i aubscribe to events everytime the slider changes
http://api.jqueryui.com/slider/#event-change

Invalid range init

When ng-value is bound to array then there is a check

if (isNaN(ngModel.$viewValue))
    ngModel.$viewValue = 0;

Which in case of array always resets $viewValue to 0.
It should be

if (isNaN(ngModel.$viewValue) && !(ngModel.$viewValue instanceof Array))
    ngModel.$viewValue = 0;

cannot separately trap min/max range values

I would like to be able to access the min/max values of your range slider separately, but currently cannot establish how that's done?

noUiSlider as the foundation for an angular ui slider

noUiSlider seems to me a better slider than the jquery ui slider,
and I believe it would be better to make a directive using noUiSlider
as the foundation, rather than jquery ui.

http://refreshless.com/nouislider/

There is a project on github that does this, but obviously not
done by the angular-ui team.

Using ui-slider with bootstrap-slider

Is there a way of using ui-slider with bootstrap-slider?

Doesn't work nice with sortables / ng-repeat.

Uncaught Error: cannot call methods on slider prior to initialization; attempted to call method 'destroy'

The problem seems to be that after the first time it doesn't init the slider anymore

Vertical slider support?

I assume that at the moment this only supports horizontal sliders?

Arbitrary javascript activity removes sliders from their holding DIVs

Whilst doing other arbitrary JavaScript work on a page that contains ui-sliders, triggered by a click event to, say, load in something somewhere completely different on the page, the sliders inexplicably disappear.

The only other js library loaded after subsequent click is jQuery DataTables

Interpolating min/max attributes

I've run into a use-case where I'd like to have the min and max values interpolated. Basically, I have a value that is locale-dependent, and while the locale stuff works, the initial load of the slider doesn't take the interpolated value into account and the slider has a min/max value of 0 to start with, which makes the slider start at the beginning when it should be somewhere else along the bar.

If no one else grabs this, I'll come up with a pull request soon.

Add bower.json

Please look use ui-date as a reference.

Minification blows up slider

I'm trying to get my app ready for production. Minifying the slider.js blows up the app saying that "slider" TypeError: Object [object Object] has no method 'slider'

This only happens when I concat and minify the js files. And before anyone asks, yes I have used the inline method to make sure everything is square. See here: http://docs.angularjs.org/tutorial/step_05#controller_a-note-on-minification

Any thoughts?

Update documentation

Cannot step by decimal

I'm trying to use the slider to get a customer to choose their interest rate.

<slider floor="5" ceiling="30" step=".5" ng-model="p_rate"></slider>

I would like to be able to allow our customers to choose a 5.5% interest rate.

I can work around it by using "55" and then translating the vale to decimals, but it would be nice functionality to have.

range values equal bug

On range mode, when one ngModel range values equal, switching between ngModels cause overwrite values of equal one;

if (ngModel.$viewValue[0] >= ngModel.$viewValue[1]) {
    // Min value should be less to equal to max value
    if (prevRangeValues.min >= ngModel.$viewValue[1])
        ngModel.$viewValue[0] = prevRangeValues.min;
        // Max value should be less to equal to min value
    if (prevRangeValues.max <= ngModel.$viewValue[0])
        ngModel.$viewValue[1] = prevRangeValues.max;
}

prevRangeValues keeps ex-ngModel values (naturally).

I think removing equal sign in first line solve problem.

IE8 Support

When trying to implement within ie8 I get the following error:

  TypeError: Object doesn't support this property or method<div class="ui-slider__thumb ng-pristine ng-valid" data-ng-model="question.selectedValue" data-name="input" data-ng-required="" data-ng-mouseleave="show = false" data-ng-mouseenter="show = true">

is there anyway to get support for ie8 without using the jquery version.

After installing by Bower an incorrect path to the file

After "bower install angular-ui-slider" and start grunt server in index.html:

<script src="bower_components/angular-ui-slider/ui-slider.js"></script>

Should be:

<script src="bower_components/angular-ui-slider/src/slider.js"></script>

Properly use `ngModel`

You should be using ngModelController (which is specified in require) to retrieve and set values, instead of isolating the scope.

Mobile

I was trying your slider on mobile and it isn't draggable.

Values over 100 are getting visually cropped on initialization

when i use max="200" on the directive and the value of ng-model is initialised with a value over 100 the slider visually maxes out to 100

I have fixed this by providing the max through the ui-slider configuration as follows

ui-slider="{max:200}"

there must be an issue with order of execution and min/max must default to 0->100

Slider throws error due to invalid "destroy" call, can be fixed

Is there a specific reason for this line being there? I'm genuinely curious due to not being familiar with it, as it doesn't seem to be doing anything useful and everything works without it, but if left there it causes an error when ng-view changes occur as per the following plnkr: http://plnkr.co/edit/BW5ePbrvYUat7ludp0wB?p=preview (line is commented in script.js and everything works - uncomment to see error)

Should this have been a PR?

Add support for Bower

It would be nice to have this as a bower package, ideally with some pre-minified source.

ngModel should be rendered once the options (min, max) are changed

angular.forEach(properties, function(property) {
// support {{}} and watch for updates
attrs.$observe(property, function(newVal) {
if (!!newVal) {
init();
elm.slider('option', property, parseNumber(newVal, useDecimals));
ngModel.$render(); // <-- ngModel should be rendered once the options (min, max) are changed.
}
});
});

Add support for more events

It would be nice if you could register a function call for events like slidestart and slidestop

updating the model for range slider does not update the view.

In example 9, changing value in the input text field does not update the slider handles.

Add ui-slider to primary org demo page (angular-ui.github.io)

Should the input step its value

We need to review the stepping of values.

See the second example on the demo page - the slider increases 5 steps when changing the value of the input from 2 to 3. Apparently the slider is cieling the value and correctly snaps the slider handle to next coming value. However the value of the input isn't changing. Perhaps the value of the input should step as well?

Exception on invalid (non-number) value

Use slider together with text input. Enter into text input invalid number, for example 3w0. Click slider (or try to change value with slider). Exception rises (seen in developer tools):

Uncaught TypeError: Cannot call method 'addClass' of undefined   jquery-ui.min.js:11
t.widget._mouseCapture   jquery-ui.min.js:11
t.isFunction.l.(anonymous function)   jquery-ui.min.js:5
t.widget._mouseDown   jquery-ui.min.js:5
t.isFunction.l.(anonymous function)   jquery-ui.min.js:5
(anonymous function)   jquery-ui.min.js:5
b.event.dispatch   jquery.min.js:3
v.handle   jquery.min.js:3

Setup proper demo page

similar project.

Hi, I found this maybe you found it too, it's addressing the same issue but with no dependency to jquery.
Maybe it's better to merge this 2 repositories.

Add support for range of values

`min`, `max` and other attributes should handle {{}}

You should be using $attrs.observe('min', fn(){ ... }) instead of simply parsing the plaintext values so that people can dynamically update them. This will require the options to be updated asynchronously.

Remove jQuery UI dependency

The slider should be independent from jQuery UI as the custom styling and functionality enhancement is real pain in the ass.

Could not disable sliders in ng-repeat

$scope.aspects = ['camera', 'performance', 'display'];
$timeout(function(){
angular.forEach($scope.aspects, function(aspect){
angular.element("#"+aspect.aspectId).slider("option", "disabled", true);
});
});

Error: cannot call methods on slider prior to initialization; attempted to call method 'option'

Setting both values of range slider to maximum value, locks the slider

The slider handles are locked, after setting both values of range slider to the maximum value. It's jquery ui bug: http://bugs.jqueryui.com/ticket/10091. But you can use following hack for temporary fix: at ngModel.$render method after elm.slider(method, ngModel.$viewValue); just add options.range === true ? elm.slider(method, 0, ngModel.$viewValue[0]) : angular.noop(); or something like that.

Upgrade Angular Version

When will this be made to work with angular 1.3?

Issue with ticks on using decimal ranges

We are using angular slider with some decimal steps. This is the code we are using:

$scope.slider = {
value: 1,
options: {
useDecimal: true,
orientation: 'horizontal',
min: 0.5,
max: 3,
range: 'min',
step: 0.5,
tick: true,
change: refreshSwatch
}
};

While implementing the ticks, we are not getting any ticks. In postLink method we are calculating the total ticks by.
var total = parseInt(parseInt(options['max'])/parseInt(options['step']));
Its returning NaN in our case. Here we'll have to check useDecimal flag before calculating the total. I've replaced this by below and i can able to see ticks on the screen.
var total = parseInt(options['max']/options['step']);

Is this something needs to be fixed in the library..?

Thanks,
Palanisamy

how to make ui-slider work with other libraries that need angular 1.2+

I recall reading somewhere that in bower you can install packages as subtrees, meaning that one project can use multiple versions of the same library.. with each version of the library acting as a dependency for other libraries that need the different versions.

I'm working on a project which uses both angular-google-maps and ui-slider..
angular-google-maps requires at least angular 1.2.18+ and ui-slider needs angular 1.0.8
`
I was hoping to get something like this (ie output of bower list):

├── angular#1.2.18
├─┬ angular-google-maps#1.1.2 extraneous (latest is 1.1.6)
│ ├── angular#1.2.18
│ └── ..
├─┬ angular-ui-slider#0.0.2
│ ├── angular#1.0.8
│ ├── ..

instead what happens is that when i attempt to install ui-slider on my existent project that already uses angular 1.2.18, I get this prompt:

Unable to find a suitable version for angular, please choose one:
    1) angular#~1.0.x which resolved to 1.0.8 and is required by angular-ui-slider#0.0.2 
    2) angular#1.2.5 which resolved to 1.2.5 and is required by angular-sanitize#1.2.5 
    3) angular#1.2.18 which resolved to 1.2.18 and is required by angular-brunch-seed 
    4) angular#>=1 which resolved to 1.2.19 and is required by angular-bootstrap#0.5.0 
    5) angular#~1.2.0 which resolved to 1.2.19 and is required by angular-masonry#0.8.1 
    6) angular#1.2.x which resolved to 1.2.19 and is required by angular-google-maps#1.1.2 
    7) angular#1.2.19 which resolved to 1.2.19 and is required by angular-animate#1.2.19 
    8) angular#* which resolved to 1.2.19 and is required by restangular#1.4.0

Prefix the choice with ! to persist it to bower.json

I naturally choose one to get 1.0.8:

[?] Answer: 1
bower angular#~1.0.x                    install angular#1.0.8
bower angular-ui-slider#~0.0.2          install angular-ui-slider#0.0.2

However when I run bower list I get:

├── angular#1.0.8 incompatible with 1.2.18 (1.2.18 available, latest is 1.3.0-build.2867+sha.f07af61)
├─┬ angular-animate#1.2.19 (latest is 1.3.0-build.2867+sha.f07af61)
│ └── angular#1.0.8 incompatible with 1.2.19 (1.2.19 available, latest is 1.3.0-build.2867+sha.f07af61)
├─┬ angular-bootstrap#0.5.0 (latest is 0.11.0)
│ └── angular#1.0.8 (1.3.0-build.2867+sha.f07af61 available)
├─┬ angular-cookies#1.2.5 (latest is 1.3.0-build.2867+sha.f07af61)
│ └── angular#1.0.8 incompatible with 1.2.5 (1.2.5 available, latest is 1.3.0-build.2867+sha.f07af61)
├─┬ angular-google-maps#1.1.2 extraneous (latest is 1.1.6)
│ ├── angular#1.0.8 incompatible with 1.2.x (1.2.19 available, latest is 1.3.0-
├─┬ angular-ui-slider#0.0.2
│ ├── angular#1.0.8 (latest is 1.3.0-build.2867+sha.f07af61)
..

question: why did bower make angular 1.0.8 the default angular and the one used for all my other libraries.. rather than keep angular 1.2.18 and just use angular 1.0.8 for angular-ui-slider?

Add touch support

Slider can't be dragged in touch devices.

$viewValue is overwritten with 0 in case range == true

View value set to 0 in case range equals true, you probably should add !options.range check to if statement :

ngModel.$render = function(){
                        init();
                        var method = options.range === true ? 'values' : 'value';
                        if (!options.range && isNaN(ngModel.$viewValue))
                            ngModel.$viewValue = 0;
.....
....