darul75 / angular-awesome-slider Goto Github PK

View Code? Open in Web Editor NEW

144.0 13.0 63.0 20.45 MB

:arrows_clockwise: Angular slider control directive

Home Page: http://darul75.github.io/angular-awesome-slider/

License: MIT License

JavaScript 53.22% CSS 38.25% HTML 8.53%

angular-awesome-slider's Introduction

angular-awesome-slider

Angular directive slider control.

No JQUERY dependency needed anymore

Skins available

Why

Original implementation provides very nice features but too much for my needs, this one just simplified.

Source files were divided in several files, and not angular integrated.

Screenshot

Demo

http://darul75.github.io/angular-awesome-slider/

http://jsfiddle.net/darul75/g9e9n8xc/

How to use it

You should already have script required for Angular.

<script type="text/javascript" src="angular.min.js"></script>

to the list above, you should add:

<link rel="stylesheet" type="text/css" href="angular-awesome-slider.min.css">

<script type="text/javascript" src="angular-awesome-slider.min.js"></script>

in case you want to use your own template, omit the last line and instead add some template code to your project:

<script type="text/ng-template" id="aw-select.tmpl.html">
    ....
</script>

Then, inject angularAwesomeSlider in your application module:

angular.module('myApp', ['angularAwesomeSlider']);

and then just add an input with slider directive name attribute, value and options scope variable attribute.

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

'value' your slider scope end value, as string. 'options' slider scope options value as json. 'ng-disabled' angular common attribute.

$scope.value = "10";
// $scope.value = "10;15"; FOR DOUBLE VIEW

Options

Options for your slider in json format {from:.....}

from: start value
to: end value
step: step value
dimension: string, example " $"
scale: array for scale
round: how many numbers allowed after comma
smooth: true/false; false snaps the button to value
vertical: true/false; vertical slider, default false
skin: empty or 'blue' 'plastic' 'round'
css: hash object, do not mix with 'skin' !
className: custom class added to root slider DOM
realtime: triggers changes and model update on every moves
threshold: minimum distance allowed between 2 pointers, default both pointers overlap
limits: true/false; toggles bounds labels visibility
modelLabels: custom model for pointers labels based on pointer value
watchOptions: default is 'true', watch this options changes by equals
heterogeneity: array [percentage of point on slider]/[value in that point]
logScale: true/false; uses a log scale so that a greater proportion is given to the lower end of the scale. Useful for price sliders. Default false

css: {
	background: {"background-color": "silver"},
	before: {"background-color": "purple"},// zone before default value
	default: {"background-color": "white"}, // default value: 1px
	after: {"background-color": "green"},  // zone after default value
	pointer: {"background-color": "red"}   // circle pointer
	range: {"background-color": "red"} // use it if double value
}

callback : function triggering current value, can be useful

// example
callback: function(value, released) {
	// useful when combined with 'realtime' option
	// released it triggered when mouse up
	console.log(value + " " + released);
}

scale : model for slide scale

// divide slider into parts
scale: [0, '|', 10, '|', 20, '|' , 30, '|', 40]

// or with some custom labels
scale: [{val:10, label:'low'}, {val:25, label:'middle'}, {val:30, label:'high'}]

modelLabels : model for pointers labels by object or function

// overrides default value label displayed combined with 'dimension' by an arbitrary label model
modelLabels: {1: 'top', 2: 'middle', 3: 'bottom'};

// or dynamicaly based
modelLabels: function(value) {
	return 'my value is' + value; // momentjs external library call...
}

heterogeneity : repartition of possible values

// example here, first value is percentage of slider length, second is value
heterogeneity: ['50/100', '75/250'] // 50% value is 100, 75% value must be 250

Installation

Using npm:

npm install angular-awesome-slider

Using bower:

bower install angular-awesome-slider

RELEASE

2.4.5: LogScale option, thanks @gareththackeray
2.4.4: move by grabbing the label
2.4.3: fix label + switch from range <=> one value
2.4.2: update angular version + fix for programmatic movement of slider (double value)
2.4.1: non-minified version added + bower update
2.4.0: fix while updating both range values from code
2.3.9: callback not fired in case slider is on threshold values
2.3.8: bind to touch AND non touch events
2.3.7: heterogeneity option
2.3.6: watch options, fix threshold and click handler + date display testing.
2.3.5: do not remember
2.3.4: fix css regressions + modelLabels with function
2.3.3: details for modelLabels options + merge showLabels option
2.3.2: fix css pointer position + hover sking pointers background positions
2.3.1: fix from and to in floating values
2.3.0: new module name, no more ng-sorry-prefix, classname option, sass/scss support, scale object option
2.2.6: refactoring classnames
2.2.5: skin availables + less all css
2.2.4: fix when 2 pointers overlap on limits
2.2.3: mouse up event indicator in callback
2.2.2: default indicator display + visibility and move events
2.2.1: fix disable+default position css+decimal value on init value
2.2.0: handle from greater than to + gap pointer threshold option
2.1.9: fix labels positions while gluing, gap was too big + options changed watch by value
2.1.8: fix labels positions while gluing + realtime model changes option + ngDisable option fix
2.1.7: fix pointer position on click for double value
2.1.6: starting mocha tests
2.1.5: directive refactoring
2.1.4: fix overlap on labels
2.1.3: bug fixes, refactoring, inline options param
2.1.2: bug fixes, changes in z-index via CSS and not js
2.1.1: override css, colors...
2.1.0: bug fixes
2.0.0: no JQuery

Build

You can run the tests by running

npm install

npm test

assuming you already have grunt installed, otherwise you also need to do:

npm install -g grunt-cli

Issue

To help me on reproducing any issues, please feel free to modify/fork this fiddle: http://jsfiddle.net/darul75/b09m7183/

Metrics

who's who

Who use it ? feel free add issue or edit readme with PR, to see how you use it and give some ideas, thx

openenergygroup

google?

License

The MIT License (MIT)

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

angular-awesome-slider's People

Contributors

Stargazers

Watchers

angular-awesome-slider's Issues

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"
};

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'

IE8 support

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

refactoring redundant code

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 .

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!

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

2.1.1 range display issue with old skin

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.

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 .

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!

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.

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.

missing functionality to disable/enable slider

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

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.

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

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?

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?

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!

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.

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

JQuery Not found

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

Enable smooth option.

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

no method 'offset'

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

ReferenceError: event is not defined when changing value

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

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
        };
``

adding hover on pointers

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.

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"
},

Vertical Slider

No options to show the slider vertically

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

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 ":"",

throws error if number value is 0

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

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!

offset issues

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!

Lables are not moving when we click outside the range

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

Key binding

Right left or up down

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: ""
    };
}

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

Start with the "Double value" section of the demo page. It has $10 - $15 selected.
Click on $5. It will expand the low end of the range to that number. Awesome.
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.

$scope.value = 1;

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

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 ?

Remove jquery dependency

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