darul75/angular-awesome-slider

:arrows_clockwise: Angular slider control directive

angular-awesome-slider's Issues

Dynamic scale

In ng-slider,is it possible to make the scale dynamically.Currently it is {scale : [0, '|', 10, '|', 20, '|' , 30, '|', 40].
Can we make it dynamic rather than we can set the hard-coded array in scale .

adding color on range

Big Scale Failure

if you display a scale with lots of entries, the scale have not the equal size as the slider.

The problem is in this file ng-slider.js file in the generateScale method.
if you round the result the scale wont be display correctly.

scope.generateScale = function(){
                        if( scope.options.scale && scope.options.scale.length > 0 ){
                            var str = "";
                            var s = scope.options.scale;

                            //var prc = Math.round((100/(s.length-1))*10)/10;
                                                        // just replace Math.round

                                                        var prc = (100/(s.length-1));
                            for( var i=0; i < s.length; i++ ){
                                str += '<span style="left: ' + i*prc + '%">' + ( s[i] != '|' ? '<ins>' + s[i] + '</ins>' : '' ) + '</span>';
                            }
                            return str;
                        } else return "";

                        return "";
                    };

Add tests to avoid regression

error in version 2.0.5

My horizontal sliders with double cursors stopped working after updating to version 2.0.5.

Error:

TypeError: Cannot read property 'vertical' of undefined
    at link (http://localhost:3000/bower_components/ng-slider/dist/ng-slider.min.js:6:414)

Here is the line from ng-slider.min.js referred in the error:
g.mainSliderClass+=g.options.vertical?" vertical ":"",

Range not working when range spans hundreds to thousands.

First, Great directive!

$scope.rangeValue = "999;1700"; //not working, single range tip
$scope.rangeValue = "1000;1700"; //not working, single range tip
$scope.rangeOptions = {
from: 700,
to: 2100,
step: 1,
smooth: true,
dimension: " mb"
};

2.1.1 range display issue with old skin

Enable smooth option.

Please enable toggling of the smooth option! It's currently forced to true in scope.init

Get the selected value as slicer is moving

Hi,

Thanks a lot for sharing this useful module.

I would like to get the value updated as the slicer is moving. So far I have been only able to get the selected value once the user has released the slider. Is there any simple way to have the selected value updated dynamically in the scope of my controller?

Thanks!

Using slider multiplies number

I updated angular to 1.3.8 and now the slider multiplies the value.

For example, I set min to 190,000 and max to 228,000 and any touch to the slider multiplies the current value making the number huge, and outside of the range.

adding hover on pointers

your bower.json is messed up

You have two main in bower.json as below, which causes problem with wiredep. Do you want to check it? Thanks!

"main": [
"./dist/ng-slider.min.js",
"./dist/css/ng-slider.min.css"
],
"main": "",
"dependencies": {
"angular": "1.2.x",
"angular-sanitize": "1.2.x",
"jquery": "latest"
},

Enable Sourcegraph

I want to use Sourcegraph code search and code review with ng-slider. A project maintainer needs to enable it to set up a webhook so the code is up-to-date there.

Could you please enable ng-slider on @sourcegraph by going to https://sourcegraph.com/github.com/darul75/ng-slider and clicking on Settings? (It should only take 15 seconds.)

Thank you!

Incorrect overlap on upper limit and displayed value

When the slider is mover to the lower range, it's displayed value overlaps nicely with the lower limit of the slider. This does not occur on the upper limit, seemingly because the upper limit value is positioned towards the inside of the slider. A simple but non-elegant fix may be to position the upper limit to the right of the end of the slider. Hope this helps, thanks for the software.

Attaching on click callback

Hi, Julien! Sorry if my question is silly.
How can I attach on click callback or prohibit a click on a slider, because click on a slider change it, but model does not seem to change at all.

Step value in the slider can be decimal value like 0.5.

missing functionality to disable/enable slider

It would be handy to have an option like this, via ng-disabled property.

Hybrid app built with ng-slider doen't render properly

The same web site works correctly on PC web browser, but on Phone it does not ,

refactoring redundant code

crashes outright

Even if you include the hidden dependency angular-sanitize it crashes trying to load the module. The code you forked from has no such issue.

no method 'offset'

what dependences has ng-slider ? because i receive TypeError: Object [object Object] has no method 'offset'

patch to add callback function on mouse up and pass HTML element as argument

Hi, I'm using ng-slider on a project where I update a led's light intensity with the value of a slider. Since ng-slider only provides onstatechange() (which is called many times per second and would flood the communication channel to the hardware) I added a callback function to be called only when the user is releasing the slider pointer. This callback function can be set as "options.callback".

I also needed a reference to the HTML element that holds the slider in case I have more than one slider (e.g. in a ng-repeat) so I can update the background color to match the values selected on the sliders. For this, I added the element as a parameter to both functions (callback and onstatechange).

For those interested I made a patch. I can attach only images (?!), and markdown is messing it up, so get it here: https://app.box.com/s/txgszkd5kb2e7oh4jnam

Unable to slide the actul range when i set to value of the slider dynamically

Hi,

Initially i have set the values for slider control as below. it works fine.
var pageCount = 56;
bindSliderControl(1, 1, pageCount);

Now when i set new values
var pageCount = 21;
bindSliderControl(1, 1, pageCount);

Now i can see on slider from and to value but when i slide i will get previous range only.
can you please help me with this issue.

function bindSliderControl(currentSliderValue, fromValue, toValue) {

    //Slider control setting
    $scope.sliderValue = currentSliderValue;
    $scope.sliderFromValue = fromValue;
    $scope.sliderToValue = toValue;

    if (toValue > 1) {
        $scope.stepValue = 1;
    }
    else {
        $scope.stepValue = 0;
    }
    $scope.options = {
        from: $scope.sliderFromValue,
        to: $scope.sliderToValue,
        step: $scope.stepValue,
        dimension: ""
    };
}

Critical bug: new jQuery plugin created *EVERY* time ngModel changes.

The design seems to be to create a new jQuery plugin every time ngModel changes:

https://github.com/darul75/ng-slider/blob/1b14a171217df22a4e857fe1449b71077cc5ac4e/src/ng-slider.js#L53

It may look functional but it causes everything on the page to slow down as more changes are made to ngModel. For example if you log some events on Draggable, you'll see many new draggables are created very quickly and many duplicate events triggered as you interact with the slider.

Vertical Slider

No options to show the slider vertically

IE8 support

Hi,
Do you have IE8 support?
Also would like to attach the right and left arrow key events to move the slider.

Remove jquery dependency

I do not know yet if it is realizable and still have to figure out what is made in all code.

Change the "ng" prefix to something else

'ng' is reserved for official angular components. I stumbled upon this assuming it is from angular team. While I still would use it, I would like it to have some other prefix and not 'ng'

Using ng-slider in tests

Hello, Julien!
Sorry to disturb you again, but I've encountered another problem with ng-slider.
I am trying to test my application with karma and jasmine in phantomjs browser.
When running my tests I get different errors from ng-slider.js file.
Firstly, I had an issue with jQuery (an error message: ReferenceError: Can't find variable: jQuery) -> I have solved it by adding jQuery as a loaded module into browser (karma configuration section for files).
Next I had to add micro-templating to solve a problem with undefined tmpl variable.
And now I'm stuck with an error - ReferenceError: Can't find variable: Draggable.

And one weird thing I can't understand is how it works without these dependencies in my app

Could you, please, tell me where I can find this library to include it to the list, because I can't find it anywhere.

Thank you in advance!

Updating a ng-model, while the slider is being moved

Hi, Julien!
Is it possible to update the ng-model value on each slider's step, like this tooltip (http://take.ms/JSkLh) is updated?
Thank you in advance!

ReferenceError: event is not defined when changing value

I have this error using ng-slider 2.0.5 and angular 1.3.7

step not working for decimal values

Hi,

I want a slider with fallowing options

from :0,
to:1,
step:0.5
When i am trying to give above options slider working with 3 points that is fine.
But the values which is shows on the points either 0 or 1 but not 0.5 at the time middle level point .
Same thing happening in the callback also

mobal device problem

DO you consider fixing bugs for mobile version? touch is not working as it should, since only first pointer can be selected (in double value version)

step in decimal

Also is it feasible to make the step in decimal like 0.1 or 0.5 and so on.

Key binding

Right left or up down

custom css

Only obtaining an input field instead of a slider

Hey there,

when integrating a slider into my code, it works perfectly fine. However, when I add another slider to my code (doesn't matter whether it's the same slider again or not) it only shows an input text field instead of my slider. What's the problem here?

problem with minified version

bower automatically use bower_components/ng-slider/dist/ng-slider.min.js and i got this error :

Error: e.$viewValue.split is not a function
.link/e.$render@http://0.0.0.0:9000/bower_components/ng-slider/dist/ng-slider.min.js:6
ngModelWatch@http://0.0.0.0:9000/bower_components/angular/angular.js:16717
$RootScopeProvider/this.$get</Scope.prototype.$digest@http://0.0.0.0:9000/bower_components/angular/angular.js:11753
$RootScopeProvider/this.$get</Scope.prototype.$apply@http://0.0.0.0:9000/bower_components/angular/angular.js:12012
done@http://0.0.0.0:9000/bower_components/angular/angular.js:7818
completeRequest@http://0.0.0.0:9000/bower_components/angular/angular.js:7991
createHttpBackend/</xhr.onreadystatechange@http://0.0.0.0:9000/bower_components/angular/angular.js:7950

http://0.0.0.0:9000/bower_components/angular/angular.js
Line 9383

with bower_components/ng-slider/src/ng-slider.js , there's no problem...

am i making something wrong ?

When selecting a range, expand the range when the user clicks outside it

1. Start with the "Double value" section of the demo page. It has $10 - $15 selected.
2. Click on $5. It will expand the low end of the range to that number. Awesome.
3. Click on $25. It will again try to move the low end of the range resulting in both low and high being $15. Instead, it should move the high side of the range to $25 and leave the low unchanged.

Great library, I think this is a small way to improve it. I'll poke around and see if I can find the code that controls this.

How do I reset the slider?

Is there functionality to reset the range slider? I tried to rest the slider by overriding

$scope.Reset = function() {
      $scope.value = "1000;10000";
}

but the code is creating new instance of ng-slider and callback : function(value){ .. } is executing multiple times. Is there other way of resetting the slider?

Lables are not moving when we click outside the range

Hi,
The to label is not moving when we click outside the to range

offset issues

ng-slider does not work when we jump from one scale to another,its only work when we scroll slider from one point to another.

ng-slider does not work when we jump from one scale to another,its only work when we scroll slider from one point to another.So please provide me help how can i accomplish these event also .

throws error if number value is 0

on !$this.settings.value.split(";")[1]

Dynamic ID

Hello,

if you choose to take dyanmic Id's and render them via angular

<input ng-model="value"   type="text" id="{{ id }}"slider options="options" />

The Slider isn't working cause he grabs the ID before its filled.

Workaround in the actual plugin:

scope.id=createDynamicId();
element.attr("id",scope.id);
scope.sliderTmplId = scope.id+ '-slider-span';
scope.sliderScaleDivTmplId =scope.id + '-slider-scale';

I create a dynamic id and set the attribute of it into the input element.

I need to do this, cause the JSlider i build up in a self custom directive of my project.

Maybe any better solutions available?

Greetings

Binding the "from" and "to" bounds of the slider

Hi all,

Currently, the data binding takes place for the ng-model attribute, but not for properties of the options attribute - i.e., referring to your "single value" example on github pages, if $scope.options.to is modified later on, the changes won't be reflected on the input component - am I right?

If so, is such a feature under consideration? Or someone might have a pretty straightforward workaround?

Thanks by advance!

JQuery Not found

Do I need jquery to run ng-slider.js? (Since this is not stated in the dependencies)

value in number throws error

When i set value as an integer:

$scope.value = 1;

it throws error:
ngModel.$viewValue.split is not a function

Cannot read property 'vertical' of undefined

Hi, I am trying to use your control however I am getting the error shown in the title.

The code I am using looks like the following-

<input ng-model="value" type="text" id="mySlider1" slider options="sliderOptions" />
`
        $scope.sliderOptions = {
            from: 1,
            to: 100,
            step: 1,
            dimension: " km",
            vertical: false
        };
``

Tip of the slider is not changing

What can be the issue? Please help.