Nice plugin. Thanks for sharing. There is a small bug in the setValue method: You need to add an extra 3 lines (this.offset = this.picker.offset(); this.size = this.picker[0][this.sizePos]; this.layout();) for it to work properly.
I found a bug in your library. I replicate the problem with a little test available at http://dl.transfer.ro/slider-test-transfer_ro-28mar-8aa3a0.zip
In few words I added an horizontal slider with: but on tooltip I got 8994.45 and not the correct value 8999.00
Also the slider is little short on right side.
I found a bug in your library. I replicate the problem with a little test available at http://dl.transfer.ro/slider-test-transfer_ro-28mar-8aa3a0.zip
In few words I added an horizontal slider with: but on tooltip I got 8994.45 and not the correct value 8999.00
Also the slider is little short on right side.
Great plugin, but I recommend implementing a function for currency. Many users would use the range slider for price selection. I modified it and added a method to the Slider.prototype. Check it out and maybe you'll implement it! :)
formatCash: function(num) {
num = num.toString().replace(/$|,/g, '');
if (isNaN(num)) num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num * 100 + 0.50000000001);
cents = num % 100;
num = Math.floor(num / 100).toString();
if (cents < 10) cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
return (((sign) ? '' : '-') + '$' + num + '.' + cents);
},
This returns correctly formatted cash values to the tooltip after is included.
Felicitari apropo, imi place ce-ai facut. Slider-ul de la jQuery UI pare sa aibe probleme cu Bootstrap. M-a ajutat foarte mult plugin-ul tau.
Hi,
I can't get slider value with .slider('getValue'). It returns the whole slider object.
I use .data('value') to get slider value, but if the slider is not moved then data('value') is not set.
Hey! When I click the bar in Chrome, the slider moves properly but the value is out of whack. For example, if I make it go left twice then right once, the 3rd value will be the value to the left of the 2nd position.
On a 1-5 slider, slider handle moves 4 -> 3 -> 2 -> 3, but value (at least in tooltip) moves 4 -> 3 -> 2 -> 1.
Also, is this project on github for issues and pull requests? Thanks!
Hi Stefan. Have a question. Is there any way to change options of a slider dynamicaly after page genereation?
Im making an address book, so contacts count loads dynamic. How to set slider max, step, and min values without remaking slider?
I am having the same issue as Hearse with getting the entire object returned for getValue instead of an integer or array. From what I see, it appears to be an issue with the $.fn.slider function. Returning this.each is the issue. I would recommend handling the string literals as conditionals above the returned each function. Is there a Github where I can submit a pull request for this plugin?
One note, if you using jQuery-ui library and you have Slider component compiled in this js file. So this component not to be applied, because jQuery overriding css.
I noticed problem on mobile devices. I can't use drag&drop for moving slider only click works .... control on mobile devices is weird. Tested on android phones, iphone, ipad.
on PC: Tooltips showed wrong values when you use click for set values (no drag and drop). It seems that values are changed only when drag and drop is used (I am using range slider)
Additional call to this.layout(); added at line#288 of bootstrap-slider.js v2.0.0
inside mouseup: function() updates tool-tip value when you click the slider
I'm using slider in a table where there are many sliders in a column. Currently the invisible tooltip has opacity:0 (as standard bootstrap slider) and therefore in a standard table with bootstrap class "table", it is impossible to drag a slider because of the tooltip of the slider below is covering it.
I've made a simple modification in JS part:
1) div with "tooltip" has also bootstrap "invisible" utility class (which equals to visibility:hidden).
2) showTooltip removes "invisible" and adds "in"; hide tooltip does the opposite.
Hey, thanks for the good work here. I can get my slider setup, but dragger then handle does not move the slider. I can't help but wonder whether I am missing a dependency. Does it require jQuery UI? If so, I'm not referencing it. Just Bootsrap and jQuery.
Hi, the current value don't match with the tooltip text. I moved the line "this.layout()" after the calculated value, in the mousemove trigger event..
Now, it's work fine for me.
I have been using this and there is a bug I have fixed in my version. It will occur when you use the following HTML data attributes and initialize without an options object:
data-min="0" data-max="32" data-value="0"
If you do it this way the value is set to 5, this is because you are using the .data method to pull in your attributes and it converts the string to a number, 0 evaluates false, and instead the default option's value of 5 is put in instead.
It seems the latest download has a bug (Or I am too new to use this high-tech).
I want to add a color for the slider-selection, I added the following code try to make the selection turns to blue:"
.slider .slider-selection {
background: #8283FF;
}
"
However, it eventually turns the rest of stuff green. As I see the html code translated by the slider, it shows:
It seems the latest download has a bug (Or I am too new to use this high-tech).
I want to add a color for the slider-selection, I added the following code try to make the selection turns to blue:"
.slider .slider-selection {
background: #8283FF;
}
"
However, it eventually turns the rest of stuff green. As I see the html code translated by the slider, it shows:
""
I think it should be following instead:
""
Sorry for the duplication replies, it doesn't show the css code . It seems the latest download has a bug (Or I am too new to use this high-tech).
I want to add a color for the slider-selection, I added the following code try to make the selection turns to blue:"
.slider .slider-selection {
background: #8283FF;
}
"
However, it eventually turns the rest of stuff green. As I see the html code with div slider-selection translated by the slider, it shows:
"left: 22.5%; width: 77.5%"
I think it should be following instead:
"left: 0%; width: 22.5%"
if You want to fix issue after click of slider edit bootstrap-slider.js. Next look for "mousedown: function(ev)" and add new trigger , should look like this
"this.element.trigger({
type: 'slideStart',
value: val
}).trigger({
type: 'slide',
value: val
})
.trigger({
type: 'slideStop',
value: val
})
.data('value', val)
.prop('value', val);"
I think I've found a little bug, and easy to fix. Line 73 from bootstrap-slider.js says:
if (this.value[1])
to check if the value is a range. But if the upper limit of the range is 0 (eg. with the interval [-100,0]), it will behave erroneously, due to the fact that 0 evaluates to false.
As noted in comments there is a bug in the tooltip when you just click the slider (not click+drag). The value is not updated in the tooltip (but if you getValue it is correct).
I've added the following line:
this.layout();
Just before "return false;" on "mouseup" function. Line 299. Seems to repaint the slider and thus the tooltip is now correct.
This plugin should be on github. Anyways, good job!
I know I've posted this up above, but that was a while ago. We've made some significant updates since then. I've got a github repo here: https://github.com/seiyria/bootstrap-slider - it has our latest version of the slider.
I urge those who are having issues to check out our slider and report any outstanding issues, so we can get them taken care of.
Feel free to fork/browse at your leisure, as before.
I stumbled upon your slider and was hoping to implement it on my site, but found what appears to be a bug substantial enough to prevent me from using it. If you click somewhere on the scale instead of actually dragging the slider, the number that displays in the tooltip is of the last value.
If you just click on the slider anywhere, the value won't any updated.
Instead, pre-value will be displayed in the tooltip.
(I mean it's not a latest value)
I checked library's source code and found a solution.
All you have to do is just add one-line :-)
[ bootstrap-slider.js ... in "mouseup" method ]
var val = this.calculateValue();
this.setValue( val ); ←new
I found this bug on a latest Google Chrome with Mac OSX Mavericks.
I hope this will help you. Thanks.
I came from jQueryUI and this plugin is almost compatible, I suggest you make it compatible to jQueryUI's slider by changing the following:
// added this to the end of the Slider.prototype
option: function (val, val2) {
// this allows changing value by $("#element").slider("option","value",value)
// if adding more options a switch should be placed here.
this.setValue(val2);
}
};
// changed this function to accept another parameter
$.fn.slider = function ( option, val, val2 ) {
return this.each(function () {
var $this = $(this),
data = $this.data('slider'),
options = typeof option === 'object' && option;
if (!data) {
$this.data('slider', (data = new Slider(this, $.extend({}, $.fn.slider.defaults,options))));
}
if (typeof option == 'string') {
data[option](val, val2);
}
})
};
p.s its almost impossible to contact you.. no email on the site..
Just FYI, this plugin doesn't work in the latest iteration of Chrome, FF, or Opera. Further analysis shows that the touch capabilities seem to break the code. All these new browsers return true for this.touchCapable property. The code is binding to touch events, and they are not firing for mouse events. The fix for now is to remove the touchCapable checks and revert back to old bindings.
Thanks for your slider plugin. It is amazing, but I noticed one thing: when you click on slider (to change value) without dragging it, tooltip show wrong value. For example: when on start tooltip show '0' and you click in half length of slider, tooltip show '0' instaed of something like '51'.
This is a follow up to the question/issue posted by Siara as we were experiencing the same issue.
The issue is in the 'mousedown' function as it calls 'layout()' before calling 'calculateValue()'. If you call layout afterwards all is well. The updated function looks like so;
mousedown: function(ev) {
// Touch: Get the original event:
if (this.touchCapable && ev.type === 'touchstart') {
ev = ev.originalEvent;
}
I'm using this as an angular directive, which works, but it doesn't update the values in the scope. How can I make the directive scope usable in the code?
For clarification, I need something like:
- instead of this.min I need $scope.min
- instead of this.value[0] I need $scope.rangeMin
- I need to both get and set these values, as my angular model needs to change accordingly.
If anyone could point me in the right direction that would be awesome! :)
(credit to Klederson Bueno for his directive as a starting point)
here is an angular directive that uses ng-model. just add a slider attribute to your input. eg:
You will need to adapt it to use min & max as this directive only handles one value.
App.directive('slider', function ($parse) {
return {
restrict: 'A',
replace: true,
link: function (scope, element, attrs) {
var model = $parse(attrs.ngModel);
var slider = $(element[0]).slider();
slider.on('slide', function(ev) {
model.assign(scope, ev.value);
scope.$apply();
});
scope.$watch(attrs.ngModel,function(value){
element.slider('setValue',value);
});
}
}
});
I really like your plug-in, but nothing is perfect :-) So here are some wishes I have:
a) Put the code on github :-)
b) Update TITLE attribute on ".slider-handle.triangle" with the current value. Using title is a great pattern I think and it allows us developers to do things like:
Hi, Thanks for a great slider.
I have discovered one issue though. If the script detects that the browser is touch capable, then mouse events are not watched at all, so in the situation where both a mouse and touch are present, the mouse will not work.
I'm going to try to fix this, unless its already been done by someone?
Hi usman,
thank you so much, that solved a big part my problem! Range slider is working like a gem now on iPad... not on mobile though (tested on Android using Chrome). Will post if i find a fix.
thanks again!
...bit me as well, and the above fix of this.value[1] !== undefined worked.
I also vote that you need to get a Github page. I might fork this just because I use this often enough and would like to see the fixes in a more easily managed way. :)
eyecon.ro is using cookies to personalise content and ads, to provide social media features and to analyse our traffic. I also share information about your use of my site with my social media, advertising and analytics partners.See details
By continuing to browse the site you are agreeing to my use of cookies. ✔ Continue
Comentarii (76)
Marudhu Pandiyan G
23 feb 2013, 17:16
The events that are on this page are not matching the original js file. It took me half an hour to solve it. Please correct it.
http://www.eyecon.ro/bootstrap-slider/
Stefan
23 feb 2013, 18:15
You are right. I fixed it.
Kleanthis
3 mar 2013, 20:59
Nice plugin. Thanks for sharing. There is a small bug in the setValue method: You need to add an extra 3 lines (this.offset = this.picker.offset(); this.size = this.picker[0][this.sizePos]; this.layout();) for it to work properly.
iļja
5 mar 2013, 22:29
"slideStart" / "slideStop" events don't fire. At least, not how they are described in the docs.
Jeff
7 mar 2013, 14:12
setValue doesn't change where the actual slider is. If this was intended, is there an easy way to do this?
Stefan
7 mar 2013, 15:17
@Jeff: I updated the script. It should work now. Download the latest version.
@iļja: I'm not sure what you mean. Can you go into details?
Jeff
8 mar 2013, 03:34
Thanks for the fix, Stefan.
Very beautiful and easy to use, by the way. Good job!
And unlike iļja, I found the slideStop event to work perfectly fine, as described.
Decebal
28 mar 2013, 13:50
Hi Stefan
I found a bug in your library. I replicate the problem with a little test available at http://dl.transfer.ro/slider-test-transfer_ro-28mar-8aa3a0.zip
In few words I added an horizontal slider with: but on tooltip I got 8994.45 and not the correct value 8999.00
Also the slider is little short on right side.
Decebal
28 mar 2013, 14:38
Hi Stefan
I found a bug in your library. I replicate the problem with a little test available at http://dl.transfer.ro/slider-test-transfer_ro-28mar-8aa3a0.zip
In few words I added an horizontal slider with: but on tooltip I got 8994.45 and not the correct value 8999.00
Also the slider is little short on right side.
Gregory
29 mar 2013, 23:12
Hello!
Please give an example - how to get and set slider value, in a hidden input value="".
Best regards!
Vasile Catalin
9 apr 2013, 00:00
Great plugin, but I recommend implementing a function for currency. Many users would use the range slider for price selection. I modified it and added a method to the Slider.prototype. Check it out and maybe you'll implement it! :)
formatCash: function(num) {
num = num.toString().replace(/$|,/g, '');
if (isNaN(num)) num = "0";
sign = (num == (num = Math.abs(num)));
num = Math.floor(num * 100 + 0.50000000001);
cents = num % 100;
num = Math.floor(num / 100).toString();
if (cents < 10) cents = "0" + cents;
for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
return (((sign) ? '' : '-') + '$' + num + '.' + cents);
},
This returns correctly formatted cash values to the tooltip after is included.
Felicitari apropo, imi place ce-ai facut. Slider-ul de la jQuery UI pare sa aibe probleme cu Bootstrap. M-a ajutat foarte mult plugin-ul tau.
Ilya Radchenko
16 apr 2013, 23:38
Looks like the slider html elements are not being placed into a a node referenced by an id.
For example: $("#slider").slider({..}); will place the slider content above
Dric
17 apr 2013, 12:22
Hi,
I can't get slider value with .slider('getValue'). It returns the whole slider object.
I use .data('value') to get slider value, but if the slider is not moved then data('value') is not set.
Shane Reustle
19 apr 2013, 08:25
Hey! When I click the bar in Chrome, the slider moves properly but the value is out of whack. For example, if I make it go left twice then right once, the 3rd value will be the value to the left of the 2nd position.
On a 1-5 slider, slider handle moves 4 -> 3 -> 2 -> 3, but value (at least in tooltip) moves 4 -> 3 -> 2 -> 1.
Also, is this project on github for issues and pull requests? Thanks!
Vlad
24 apr 2013, 12:06
Hi Stefan. Have a question. Is there any way to change options of a slider dynamicaly after page genereation?
Im making an address book, so contacts count loads dynamic. How to set slider max, step, and min values without remaking slider?
Robert Abramski
27 apr 2013, 06:14
I am having the same issue as Hearse with getting the entire object returned for getValue instead of an integer or array. From what I see, it appears to be an issue with the $.fn.slider function. Returning this.each is the issue. I would recommend handling the string literals as conditionals above the returned each function. Is there a Github where I can submit a pull request for this plugin?
Robin Wenglewski
6 mai 2013, 13:26
Nice Plugin. Would you mind publishing it on github or bitbucket? Makes collaboration and feedback easier.
Oleg Borisenko
15 mai 2013, 15:36
Hello. I've noticed a bug: sliders value don't update on click. I mean that tooltip-values don't change until mouse move or double-click.
The workaround is to set values right after their calculation, so valuse will update immidiately:
var val = this.calculateValue();
this.setValue(val);
//in mousedown, mousemove etc
Vinicius Ferriani
20 mai 2013, 02:12
Thanks for the plugin. +1 for adding it to github...
I found that you cannot initiate any value (data-slider-max, data-slider-value) to 0 because they will go to the default parameters...
This fixes it:
this.min = (this.element.data('slider-min') != undefined) ? this.element.data('slider-min') : options.min;
this.max = (this.element.data('slider-max') != undefined) ? this.element.data('slider-max') : options.max;
this.step = (this.element.data('slider-step') != undefined) ? this.element.data('slider-step') : options.step;
this.value = (this.element.data('slider-value') != undefined) ? this.element.data('slider-value') : options.value;
Best regards,
Carlo
20 mai 2013, 22:24
GitHub +1
Bug of tooltip in modal.
Look http://www.qualitylink.com.br/slider/slider.html
Devin
22 mai 2013, 23:29
When I try to do $(selector).slider('setValue', value); I keep creating a new slider instead of adjusting the slider I already selected.
Mira
30 mai 2013, 13:46
One note, if you using jQuery-ui library and you have Slider component compiled in this js file. So this component not to be applied, because jQuery overriding css.
ps: Thanks a lot nice compoment
Mira
30 mai 2013, 14:50
I noticed problem on mobile devices. I can't use drag&drop for moving slider only click works .... control on mobile devices is weird. Tested on android phones, iphone, ipad.
on PC: Tooltips showed wrong values when you use click for set values (no drag and drop). It seems that values are changed only when drag and drop is used (I am using range slider)
Thanks
Geddemet
10 iun 2013, 05:46
Is there a fix for the BUG that when you click the slider ( not slide), the tootltip's value is not changing.
By the way if you are using JQuery ui, Call Jquery UI before this plugin.
Mark Wilson
14 iun 2013, 17:12
Additional call to this.layout(); added at line#288 of bootstrap-slider.js v2.0.0
inside mouseup: function() updates tool-tip value when you click the slider
Klederson Bueno
14 iun 2013, 19:41
Hello, just made a directive so it can be used as it is in AngularJS
var iFind = angular.module('iFind',[]);
iFind.directive('slider', function ($parse) {
return {
restrict: 'E',
replace: true,
template: '',
link: function ($scope, element, attrs) {
var model = $parse(attrs.model);
var slider = $(element[0]).slider();
slider.on('slide', function(ev) {
model.assign($scope, ev.value);
$scope.$apply();
});
}
}});
{{teste}}
Value 1 : {{teste[0]}}
Value 2: {{teste[1]}}
{{teste2}}
Value 1 : {{teste2[0]}}
Value 2: {{teste2[1]}}
Klederson Bueno
14 iun 2013, 20:13
Ok, better THIS way: http://jsfiddle.net/BRLpQ/1/
beho
18 iun 2013, 12:55
Hi,
I'm using slider in a table where there are many sliders in a column. Currently the invisible tooltip has opacity:0 (as standard bootstrap slider) and therefore in a standard table with bootstrap class "table", it is impossible to drag a slider because of the tooltip of the slider below is covering it.
I've made a simple modification in JS part:
1) div with "tooltip" has also bootstrap "invisible" utility class (which equals to visibility:hidden).
2) showTooltip removes "invisible" and adds "in"; hide tooltip does the opposite.
I've put the modified JS code here https://gist.github.com/beho/5804094.
Regards,
beho
flipdoubt
30 iun 2013, 17:50
Hey, thanks for the good work here. I can get my slider setup, but dragger then handle does not move the slider. I can't help but wonder whether I am missing a dependency. Does it require jQuery UI? If so, I'm not referencing it. Just Bootsrap and jQuery.
Kyle
2 iul 2013, 03:28
Folks,
I've created a github repo here: https://github.com/seiyria/bootstrap-slider
Feel free to fork/browse at your leisure - I too am finding several bugs and I figure I would correct them for all to enjoy.
Stefan, if you have an issue with this, please let me know and we can sort it out.
flipdoubt
2 iul 2013, 18:45
Is there any way to destroy the slider so I can re-initialize it with different MAX options?
nicola palmigiano
11 iul 2013, 16:51
Hi, the current value don't match with the tooltip text. I moved the line "this.layout()" after the calculated value, in the mousemove trigger event..
Now, it's work fine for me.
Cory Gross
17 iul 2013, 09:47
I have been using this and there is a bug I have fixed in my version. It will occur when you use the following HTML data attributes and initialize without an options object:
data-min="0" data-max="32" data-value="0"
If you do it this way the value is set to 5, this is because you are using the .data method to pull in your attributes and it converts the string to a number, 0 evaluates false, and instead the default option's value of 5 is put in instead.
Replacing the following lines:
this.min = this.element.data('slider-min') || options.min;
this.max = this.element.data('slider-max') || options.max;
this.step = this.element.data('slider-step') || options.step;
this.value = this.element.data('slider-value') || options.value;
With these lines:
this.min = this.element.data('slider-min');
if (typeof this.min === 'undefined') this.min = options.min;
this.max = this.element.data('slider-max');
if (typeof this.max === 'undefined') this.max = options.max;
this.step = this.element.data('slider-step');
if (typeof this.step === 'undefined') this.step = options.step;
this.value = this.element.data('slider-value');
if (typeof this.value === 'undefined') this.value = options.value;
Will fix the issue.
Xin
19 iul 2013, 06:37
It seems the latest download has a bug (Or I am too new to use this high-tech).
I want to add a color for the slider-selection, I added the following code try to make the selection turns to blue:"
.slider .slider-selection {
background: #8283FF;
}
"
However, it eventually turns the rest of stuff green. As I see the html code translated by the slider, it shows:
I think it should be following instead:
Xin
19 iul 2013, 06:40
It seems the latest download has a bug (Or I am too new to use this high-tech).
I want to add a color for the slider-selection, I added the following code try to make the selection turns to blue:"
.slider .slider-selection {
background: #8283FF;
}
"
However, it eventually turns the rest of stuff green. As I see the html code translated by the slider, it shows:
""
I think it should be following instead:
""
Xin
19 iul 2013, 06:43
Sorry for the duplication replies, it doesn't show the css code . It seems the latest download has a bug (Or I am too new to use this high-tech).
I want to add a color for the slider-selection, I added the following code try to make the selection turns to blue:"
.slider .slider-selection {
background: #8283FF;
}
"
However, it eventually turns the rest of stuff green. As I see the html code with div slider-selection translated by the slider, it shows:
"left: 22.5%; width: 77.5%"
I think it should be following instead:
"left: 0%; width: 22.5%"
Bart
12 aug 2013, 14:46
When I did min=.05, max=2 and step =.05 it did not work.
So I changed a few lines of your code.
I added parseFloat:
this.min = parseFloat(this.element.data('slider-min')||options.min);
this.max = parseFloat(this.element.data('slider-max')||options.max);
this.step = parseFloat(this.element.data('slider-step')||options.step);
this.value = parseFloat(this.element.data('slider-value')||options.value);
Steven Romalewski
13 aug 2013, 18:08
Thanks for a great Bootstrap plugin. We're using it for an Election Atlas we launched this week: http://www.nycelectionatlas.com/ (We have a link to your page with our Credits: http://www.nycelectionatlas.com/maps.html#!credits ).
Jay Proulx
22 aug 2013, 23:45
You should get this up on GitHub, nice implementation!
Iwona
6 sep 2013, 15:31
if You want to fix issue after click of slider edit bootstrap-slider.js. Next look for "mousedown: function(ev)" and add new trigger , should look like this
"this.element.trigger({
type: 'slideStart',
value: val
}).trigger({
type: 'slide',
value: val
})
.trigger({
type: 'slideStop',
value: val
})
.data('value', val)
.prop('value', val);"
Konstantin
17 sep 2013, 13:37
Hey Stefan,
I have the same question as someone before:
Is there any way to destroy the slider so I can re-initialize it with different MAX options?
Manu
26 sep 2013, 23:58
Hi there. Nice plugin! :D
I think I've found a little bug, and easy to fix. Line 73 from bootstrap-slider.js says:
if (this.value[1])
to check if the value is a range. But if the upper limit of the range is 0 (eg. with the interval [-100,0]), it will behave erroneously, due to the fact that 0 evaluates to false.
fix:
if (this.value[1] !== undefined) {
TheBronx
27 sep 2013, 14:17
As noted in comments there is a bug in the tooltip when you just click the slider (not click+drag). The value is not updated in the tooltip (but if you getValue it is correct).
I've added the following line:
this.layout();
Just before "return false;" on "mouseup" function. Line 299. Seems to repaint the slider and thus the tooltip is now correct.
This plugin should be on github. Anyways, good job!
Kyle
2 oct 2013, 22:33
Folks,
I know I've posted this up above, but that was a while ago. We've made some significant updates since then. I've got a github repo here: https://github.com/seiyria/bootstrap-slider - it has our latest version of the slider.
I urge those who are having issues to check out our slider and report any outstanding issues, so we can get them taken care of.
Feel free to fork/browse at your leisure, as before.
alidar
7 oct 2013, 00:39
great plugins but still have some bugs..
i hope ican use this perfectly on our website.
Mike E
11 oct 2013, 16:28
I stumbled upon your slider and was hoping to implement it on my site, but found what appears to be a bug substantial enough to prevent me from using it. If you click somewhere on the scale instead of actually dragging the slider, the number that displays in the tooltip is of the last value.
Mike E
11 oct 2013, 22:15
Just noticed TheBronx's comment above. It should actually go on line 239 in the mousedown function. :)
Erik
4 nov 2013, 13:22
Hi,
Great plugin.
But using .getValue() method in range return value is xxxyyy not xxx,yyy. I'm using jqeury 1.10.2.
So i changed return value for from:
return this.value;
to
return this.value[0] + "," + this.value[1];
Michael Gauthier
13 nov 2013, 16:55
There is a typo in the word formatter. In English, this has two t's. In the code it only has one.
Also, a setMax() function would be useful. We forked the code and added one at https://github.com/silverorange/bootstrap-slider.
Cheers.
JEX
15 nov 2013, 06:52
Hi. I think current first demo of Slider has a minor bug.
http://www.eyecon.ro/bootstrap-slider/
If you just click on the slider anywhere, the value won't any updated.
Instead, pre-value will be displayed in the tooltip.
(I mean it's not a latest value)
I checked library's source code and found a solution.
All you have to do is just add one-line :-)
[ bootstrap-slider.js ... in "mouseup" method ]
var val = this.calculateValue();
this.setValue( val ); ←new
I found this bug on a latest Google Chrome with Mac OSX Mavericks.
I hope this will help you. Thanks.
Josh
25 nov 2013, 20:27
Latest versions of Chrome/Firefox break the plugin. The slider won't move or update values. Any suggestions?
Rubens Cavalheiro
4 dec 2013, 18:24
Please, has as adjust to function in bootstrap 3.0?
Yash Soni
5 dec 2013, 17:45
The plugin doesn't work on latest versions of firefox and chrome. Can you please check.
nir cohen
15 dec 2013, 14:59
nice plugin!
I came from jQueryUI and this plugin is almost compatible, I suggest you make it compatible to jQueryUI's slider by changing the following:
// added this to the end of the Slider.prototype
option: function (val, val2) {
// this allows changing value by $("#element").slider("option","value",value)
// if adding more options a switch should be placed here.
this.setValue(val2);
}
};
// changed this function to accept another parameter
$.fn.slider = function ( option, val, val2 ) {
return this.each(function () {
var $this = $(this),
data = $this.data('slider'),
options = typeof option === 'object' && option;
if (!data) {
$this.data('slider', (data = new Slider(this, $.extend({}, $.fn.slider.defaults,options))));
}
if (typeof option == 'string') {
data[option](val, val2);
}
})
};
p.s its almost impossible to contact you.. no email on the site..
Sergio Flores
5 feb 2014, 02:28
You may change this lines when the min and max values are zero:
this.percentage = [
(this.value[0]-this.min)*100/(this.diff === 0 ? 1 : this.diff),
(this.value[1]-this.min)*100/(this.diff === 0 ? 1 : this.diff),
this.step*100/(this.diff === 0 ? 1 : this.diff)
];
johnofcross
19 feb 2014, 05:46
Just FYI, this plugin doesn't work in the latest iteration of Chrome, FF, or Opera. Further analysis shows that the touch capabilities seem to break the code. All these new browsers return true for this.touchCapable property. The code is binding to touch events, and they are not firing for mouse events. The fix for now is to remove the touchCapable checks and revert back to old bindings.
Josh
26 feb 2014, 04:25
@johnofcross
Thank you.
siara
13 mar 2014, 20:12
Thanks for your slider plugin. It is amazing, but I noticed one thing: when you click on slider (to change value) without dragging it, tooltip show wrong value. For example: when on start tooltip show '0' and you click in half length of slider, tooltip show '0' instaed of something like '51'.
Michael Anfield
9 apr 2014, 19:10
This is a follow up to the question/issue posted by Siara as we were experiencing the same issue.
The issue is in the 'mousedown' function as it calls 'layout()' before calling 'calculateValue()'. If you call layout afterwards all is well. The updated function looks like so;
mousedown: function(ev) {
// Touch: Get the original event:
if (this.touchCapable && ev.type === 'touchstart') {
ev = ev.originalEvent;
}
this.offset = this.picker.offset();
this.size = this.picker[0][this.sizePos];
var percentage = this.getPercentage(ev);
if (this.range) {
var diff1 = Math.abs(this.percentage[0] - percentage);
var diff2 = Math.abs(this.percentage[1] - percentage);
this.dragged = (diff1 < diff2) ? 0 : 1;
} else {
this.dragged = 0;
}
this.percentage[this.dragged] = percentage;
// this.layout(); todo this is a bug. Needs to be called after calculateValue (as it is now)
if (this.touchCapable) {
// Touch: Bind touch events:
$(document).on({
touchmove: $.proxy(this.mousemove, this),
touchend: $.proxy(this.mouseup, this)
});
} else {
$(document).on({
mousemove: $.proxy(this.mousemove, this),
mouseup: $.proxy(this.mouseup, this)
});
}
this.inDrag = true;
var val = this.calculateValue();
this.layout();
this.element.trigger({
type: 'slideStart',
value: val
}).trigger({
type: 'slide',
value: val
});
return false;
},
Would be great if this could be included / fixed.
santosh joshi
20 apr 2014, 21:47
Hi Siara, Michael ,
I solved this problem by adding the `this.layout();` call at the end of
mouseup: function(ev) {
.........
...........
`this.layout(); //added here to fix the hover show correct value on click
return true;
}
Regards,
Santosh Joshi
Patrick
23 apr 2014, 19:40
I'm using this as an angular directive, which works, but it doesn't update the values in the scope. How can I make the directive scope usable in the code?
For clarification, I need something like:
- instead of this.min I need $scope.min
- instead of this.value[0] I need $scope.rangeMin
- I need to both get and set these values, as my angular model needs to change accordingly.
If anyone could point me in the right direction that would be awesome! :)
ben
4 iun 2014, 03:18
(credit to Klederson Bueno for his directive as a starting point)
here is an angular directive that uses ng-model. just add a slider attribute to your input. eg:
You will need to adapt it to use min & max as this directive only handles one value.
App.directive('slider', function ($parse) {
return {
restrict: 'A',
replace: true,
link: function (scope, element, attrs) {
var model = $parse(attrs.ngModel);
var slider = $(element[0]).slider();
slider.on('slide', function(ev) {
model.assign(scope, ev.value);
scope.$apply();
});
scope.$watch(attrs.ngModel,function(value){
element.slider('setValue',value);
});
}
}
});
Sten Hougaard
7 iun 2014, 09:45
I really like your plug-in, but nothing is perfect :-) So here are some wishes I have:
a) Put the code on github :-)
b) Update TITLE attribute on ".slider-handle.triangle" with the current value. Using title is a great pattern I think and it allows us developers to do things like:
div.slider-handle.triangle:before {
content: attr(title);
position: absolute;
top: -13px;
font-size: 8pt;
font-weight: bold;
left: 4px;
text-align: center;
}
Which in this case would show the value of the "triangle" above it.
Thank you! :-) Keep up the great work.
Kyle
2 iul 2014, 18:38
Hi folks,
Just wanted to prod yet again and mention there is a github version: https://github.com/seiyria/bootstrap-slider
I've tried contacting Stefan and getting him to acknowledge there are forks of his code but I don't recall getting a response from him.
In the meantime, here's a fork.
Mirak
29 iul 2014, 03:05
Hi,
Slider not working on latest Google Chrome Version 36.0.1985.125 m.
speedy
2 sep 2014, 08:07
Hi,
I can also confirm that slider does not work in latest Google Chrome 37.0.2062.102 m
Are you planning on updating?
Thanks!
Alexey
3 oct 2014, 08:20
Hi! Slider is not working in mobile Chrome, Android. (
Igaal Hanouna
19 oct 2014, 16:26
Hello,
I want to contact Stefan (Stefan Petre). If you read this message could you please send me an email?
Many thanks
Maxim
9 dec 2014, 22:05
It has bug here:
this.value = this.element.data('slider-value') || options.value;
if (this.value[1]) {
this.range = true;
}
should be:
this.value = this.element.data('slider-value') || options.value;
if (this.value[1] != undefined) {
this.range = true;
}
Otherwise zero as second value in range will be a probem.
Jesus Perales
18 dec 2014, 19:25
You should create at github repo for the bugs.
good library
Rob Walker
30 dec 2014, 11:54
Hi, Thanks for a great slider.
I have discovered one issue though. If the script detects that the browser is touch capable, then mouse events are not watched at all, so in the situation where both a mouse and touch are present, the mouse will not work.
I'm going to try to fix this, unless its already been done by someone?
And +1 to putting this on GitHub
usman
13 mar 2015, 11:54
Hi Maria and others having issue in Mobile devices , here is a fix ..
Go the the js file and add Under below coded
if (typeof Modernizr !== 'undefined' && Modernizr.touch) {
this.touchCapable = true;
}
//This NEW code
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|OperaMini/i.test(navigator.userAgent)) {
alert(navigator.userAgent);
this.touchCapable = true;
}
Alternatively you can replace above code with the new one , hope this helps
thx
usman
13 mar 2015, 11:56
Also, Remove alert(navigator.userAgent);
this was for testing purpose plz
Chris
20 mar 2015, 21:37
Hi usman,
thank you so much, that solved a big part my problem! Range slider is working like a gem now on iPad... not on mobile though (tested on Android using Chrome). Will post if i find a fix.
thanks again!
Syn
8 oct 2015, 21:58
This:
if (this.value[1]) {
this.range = true;
}
...bit me as well, and the above fix of this.value[1] !== undefined worked.
I also vote that you need to get a Github page. I might fork this just because I use this often enough and would like to see the fixes in a more easily managed way. :)
Syn
9 oct 2015, 21:31
I've basically rewritten this in coffeescript, so I can more easily extend it. I needed a way to update the slider options dynamically.
https://github.com/syntruth/bootstrap-slider