darul75 / angular-awesome-slider Goto Github PK
View Code? Open in Web Editor NEW:arrows_clockwise: Angular slider control directive
Home Page: http://darul75.github.io/angular-awesome-slider/
License: MIT License
:arrows_clockwise: Angular slider control directive
Home Page: http://darul75.github.io/angular-awesome-slider/
License: MIT License
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 .
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 "";
};
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 ":"",
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"
};
Please enable toggling of the smooth option! It's currently forced to true in scope.init
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!
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.
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"
},
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!
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.
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.
It would be handy to have an option like this, via ng-disabled property.
The same web site works correctly on PC web browser, but on Phone it does not ,
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.
what dependences has ng-slider ? because i receive TypeError: Object [object Object] has no method 'offset'
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
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: ""
};
}
The design seems to be to create a new jQuery plugin every time ngModel changes:
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.
No options to show the slider vertically
Hi,
Do you have IE8 support?
Also would like to attach the right and left arrow key events to move the slider.
I do not know yet if it is realizable and still have to figure out what is made in all code.
'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'
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!
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!
I have this error using ng-slider 2.0.5 and angular 1.3.7
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
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)
Also is it feasible to make the step in decimal like 0.1 or 0.5 and so on.
Right left or up down
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?
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 ?
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.
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?
Hi,
The to label is not moving when we click outside the to range
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 .
on !$this.settings.value.split(";")[1]
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
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!
Do I need jquery to run ng-slider.js? (Since this is not stated in the dependencies)
When i set value as an integer:
$scope.value = 1;
it throws error:
ngModel.$viewValue.split is not a function
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
};
``
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.