Thank you to provinding a light slide plugin :)

So the bug is when a touch event start for the second time on the slide handle, it's not working at all : the slide handle didn't moove, value didn't change.

Maybe it's my script but probably not : http://equer.re

Using knockout.js in a repeating element. When I add an object to the view model, it adds a row to a table where a slider is supposed to render. The error I get in chrome is: "Calling context element does not have instance of Slider bound to it. Check your code to make sure the JQuery object returned from the call to the slider() initializer is calling the method".

I have tried to destroy and recreate but no luck. Here is my binding handler where the error occurs.
ko.bindingHandlers.sliderValue = {
init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var value = valueAccessor();
$(element).slider('destroy');
$(element).slider({});
$(element).slider('setValue', value())
$(element).on('slide', function (ev) {
value(ev.value);
});
},
update: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
var value = valueAccessor();
$(element).slider('setValue', value());
}
};

1. When a slider exists in a form, tabbing through fields skips the slider completely. Sliders handles should be "focusable".
2. Let the slider handle be moved with arrow keys. This would help significantly for large ranges with small steps, since that makes it difficult to select an exact amount.

Currently my desktop is reporting that it is touchCapable when it is not, making the slider completely unusable. According to this StackOverflow question checking for a pointer seems to encompass both touch and mouse events.

I should add that I don't know what this means for previous versions to make this change, though. @rovolution, do you know anything about this subject?

Hey seiyria,

I was looking through the documentation page you added and saw that a couple of things were missing.

• Adding in a description for the 'destroy' method to the Functions table

  slider('destroy') - Properly removes and cleans up slider instance
  

• A list of what properties can be set via HTML5 data attributes (and what the data attribute is). We could just copy the Markup section straight from the original example - http://www.eyecon.ro/bootstrap-slider/.

That's all! Otherwise it looks good

bootstrap-slider.less imports a mixins library not included with the ZIP from GitHub:

@import 'mixins.less';

Could we include that library or at least reference which library is used?

My jquery ui slider is overriding this. Anyone ran into this issue?

Is there any way to disable the slider to one point ? Right now I'm just hiding the slider in order to lock it.

• ported from another repo that was meant to be posted here.

Is there any way, in this case with a horizontal slider, for the starting value (1) to start at the right hand side, and as it increases in value the slider moves from the right to left?

Would be handy for there to be a "reverse" option.

Hi,

The setValue and getValue functions do not seem to work. They are always returning a new instance of the slider object and do not affect in any way the slide itself.

For one of my projet, I need a slider to control a large carousel and everything is working fine except when the carousel is setting the new position of the slider.

You can demo it here: http://jsfiddle.net/vallieres/Z6CyV/

Any way to create tick marks on the slider based on the step by default (or alternatively as one posted suggested based on an ordinal set of values or labels?)

Hi seiyria,

I was thinking of adding in some NPM grunt tasks to ease the development process and generate an optimized production version of the code:

'development' task

Launches an index.html test page on the user's default browser, and then starts grunt-watch to look for changes on the .less file and .js file.

• When the .less file changes, it will automatically compile the .less file to .css
• When the .js file changes, it will automatically run JSHint on the code to see if it follows best practices

'production' task

• Compiles .less to .css
• Checks .js to see if it passes JSHint, and then runs uglify on it to create minified and concatenated version for production use.

I think this would really be nice to have to allow users to easily launch a development environment in addition to generating a production version of the code. Let me know what your thoughts are.

Thanks!
-Rohit K

Please make the file names consistent. Currently the JavaScript file is called bootstrap-slider but the CSS file is called slider. This is confusing and unexpected. Please change the CSS file name to be consistent.

The slider won't work if you use Windows 8.1 with Google Chrome.
It works on IE, but not on Chrome.

Can you fix this?

Thanks in advance.

I am using a range slider but the tip's value does not match the actual value.

I subscribed the 'slideStop' event and inside the event, I print the result of $(this).val() to the console.

This bug occurs for both lower value and upper value. Especially when I try to make a small movement.

This way our demos are always up to date with master on the gh-pages branch

Would be great to have an option to always show the tooltip.

Returns an array when calling that method. I used the following to extract the value with success, $(".slider-class").slider().val();

Thank you all.
How do I set min and max values for a range slider?
I would like the slider's min (or max) to slide to a value set by the user using an input field. Is this possible?

hi seiyra,

I just saw the recent commits you made to the repo.

It all looks good!

I just have one suggestion...when you are making changes and committing to your local repository, before pushing those changes back to the master branch at the 'origin' remote, you should squash them locally into a single commit and then push up to the remote master branch. It makes the commit history look much cleaner.

Here is a link to a tutorial: http://davidwalsh.name/squash-commits-git

I wouldn't advise doing it now (people may be basing work off of the current branch history, so rebasing the current master branch could potentially mess up their topic branch and prevent them from submitting a proper pull request), but its just something to keep in mind when making updates in the future.

Thanks!

I use the slider inside a <div class="span8"> but I didn't specify the width of the <input>.
However, the slider does not fully occupy the parent

<div class="row-fluid">
  <span id="budget-min" class="span2" style="text-align:right; padding-right:20px">10</span>
  <div id="budget-slider-container" class="span8">
    <input id="budget-slider" type="text" value="[10,100]" data-slider-min="10" data-slider-max="100" data-slider-step="10" data-slider-value="[10,100]" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="hide">
  </div>
  <span id="buget-max" class="span2">100</span>
</div>

As the functionality of the slider has begun to grow, I realize that the initial structure we set up for the test specs (only 3 separate files) will become pretty unmaintainable in the long run.

Therefore, I propose that we refactor the spec directory and set it up the following way:

• A directory for each of the spec types (elementDataAttributes, events, publicMethods)
• Within the elementDataAttributes directory, we will have a spec file for each data attribute
• Within the events directory, we will have a spec file for each event type
• Within the publicMethods directory, we will have a spec file for:
  • each of the initialization options
  • each of the methods

Thoughts? @seiyria

$("#slider").slider()
But you can't after do that :
$("#slider").slider({max: 3})

This is patch allowing that :
diff --git a/js/bootstrap-slider.js b/js/bootstrap-slider.js
index 68e750d..a4e823f 100644
--- a/js/bootstrap-slider.js
+++ b/js/bootstrap-slider.js
@@ -21,6 +21,14 @@

    var Slider = function(element, options) {
            this.element = $(element).hide();

•    updateSlider = false
  

•    parent = this.element.parent()
  

•    if (parent.hasClass('slider') == true) {
  

•        updateSlider = true
  

•        this.picker = parent
  

•    } else {
          this.picker = $('<div class="slider">'+
                                                  '<div class="slider-track">'+
                                                          '<div class="slider-selection"></div>'+
  

  @@ -31,6 +39,8 @@
  '')
  .insertBefore(this.element)
  .append(this.element);

•           }
  

  •       this.id = this.element.data('slider-id')||options.id;
          if (this.id) {
                  this.picker[0].id = this.id;
    

  @@ -145,6 +155,17 @@
  } else {
  this.tooltip.addClass('hide');
  }
  +

•           if (updateSlider == true) {
  

•        var val = this.calculateValue();
  

•        this.element
  

•            .trigger({
  

•                type: 'slide',
  

•                value: val
  

•            })
  

•            .data('value', val)
  

•            .prop('value', val);
  

•    }
  };
  
  Slider.prototype = {
  

  @@ -377,9 +398,9 @@
  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))));
  

•                   }
  

•        $this.data('slider', (data = new Slider(this, $.extend({}, $.fn.slider.defaults,options))));
  

  •               if (typeof option == 'string') {
                          data[option](val);
                  }
    

Perhaps I'm using it incorrectly, but cannot seem to get the 'slideChange' event to fire and call my function... do you have a small snippet that demonstrates it working !?

Using:

$('.class-slider-box .slider').slider('setValue', 5);

I get an error:

Uncaught TypeError: Object [object global] has no method 'validateInputValue'

This corresponds to: bootstrap-slider.js:414 or

var tempValue = this.validateInputValue(val);

Don't believe there's anything wrong with my set-up. Using jQuery 2.0.3, Bootstrap 3. Slider has initialised correctly and is in use.

Anything you can advise?

Would be nice to have an option to show marker above/below the track. Has anyone tried it? Thx

When you apply a .slider('setValue', X) on an already initialized slider object, it replicates a slider object.

Hi,

I can't move sliders under Chrome 23.0. This is a bug present also in original version.

See you

Can't quite remember, but is the library able to be installed via bower?

When a slider is disabled, the cursor on the track and the handle remain as "pointer".

One could add a "cursor: default;" after lines 75 and 78 in bootstrap-slider.less

Thanks for the great work done here !

Right-clicking to change the value does not update the tooltip. Either remove the right-click event or update the tooltip value.

Thanks for all your work on a great slider. I have an unusual case though where I need to disable a single value somehow.

An example illustrates this best.

Values: 1, 2, 4

I am not sure how to achieve this though. Thanks!

Does it supports Bootstrap 3? I tried and couldn't use it:

I am trying to use it with months and years. example:

November 2012 November 2013
--[ ]------------------------------------------------------------------------------------------[ ]--

Is it possible?

Thanks.

If i dont specify any width for the tab1 its working fine so i have copied same code to tab2 but the slider is having strange width i have used firebug and i see it is having 4px of width with classes slider slider-horizontal .

For range sliders, it'd be nice to have the option of showing two independent tooltips, one over each handle. This looks cleaner in some contexts, especially when the tooltips are set to always show.

The stylesheet in less/slider.less isn't actually used or compiled. Might make future improvements easier and is just in general nice to have.

Concerns:
Changes to Bootstrap may break the LESS. (However, there are only two variables and one mixin used right now.)

This issue is open to decide what tests should be included. I think we should probably have test coverage for:

• all of the different kinds of sliders (shapes, vertical, horizontal, forwards and backwards)
• all of the base cases shown on the original page: http://www.eyecon.ro/bootstrap-slider/
• ???

I'm using the bootstrap-slider for our website, www.niveshi.com and am facing a couple of issues.

a) So, when I click the slider at any point, the first value I'm getting is a random value. Only when I click on it the second time do I get the correct value.
http://www.niveshi.com/portfolio/port_weight_edit
Any way to fix this?

There shouldn't be any console.log calls in the slider. It might be reasonable to have console.error and console.warn though. I'm not sure what would be for the best. This can be done with grunt-remove-logging.

Other values work well except 0, it'll show the default "5"

Sliders control as shown in this page
http://www.eyecon.ro/bootstrap-slider/
are not working in firefox 27.0. I cannot move any of the slider. All are stuck.

It's working fine in chrome. Not working IE11 too.

How to set up minimum difference in case of two handlers?

currently the step attribute needs a test, as per #14.
This is needed in both ElementDataAttributesSpec and PublicMethodsSpec

A possible way to do this would be to implement a stepUp() and stepDown() function that apply the step amount to the current value, and test these functions instead.

As per this jsfiddle...

http://jsfiddle.net/gslender/2DygG/1/

for completeness, here is the jsfiddle using the new/later JS that contains the fix

http://jsfiddle.net/gslender/2DygG/2/

Make scale able to be an array of values, ie, [Jan, Feb, Mar, Apr, ... Nov, Dec].

When I slide the slider, the little tooltip goes from 0 to 100 beautifully (my min/max). When I click somewhere else on the slider, the dot (or triangle, square) moves to that place, but the tooltip number is wrong.

On lines 79-88 this code doesn't seem to be working. It's not considering undefined, which seems to be returned by line 80 when data attributes are not set.

    ['min', 'max', 'step', 'value'].forEach(function(attr) {
        var val = el.data('slider-' + attr);
        if (val === null || val === '') {
            val = options[attr];
        }
        if (val === null || val === '') {
            val = el.prop(attr);
        }
        this[attr] = val;
    }, this);

Could it be better written as... ?

    ['min', 'max', 'step', 'value'].forEach(function(attr) {
        this[attr] = el.data('slider-' + attr) || options[attr] || el.prop(attr);
    }, this);

To Replicate:

Setup: Give slider a percentage width.

1. Resize browser window, or slider container so that its width changes.
2. Drag Slider Handle.

Result: Tooltip appears at old location for a moment before being correctly positioned/centred based on new width.

Fix: Calculate tooltip position before showing it.

Hi there!

I found out about this awesome bootstrap slider today and implemented into my project, it looks great!

However, I have only encountered one issue: if I do this:

jQuery('#slider-id1').slider({})
jQuery('#slider-id2').slider({})

it works great.

But I wanted to do the following: have several slides in a list and not give them an id; instead use a class.

So, I have 2 inputs like this:

And then the jQuery call:

jQuery('.manual-effect-filter').slider({
});

But then only the 1st slider works :-( The 2nd one won't move, and it looks like it's getting the value from the 1st one when I slide it

Is this an expected behaviour? Is there a workaround? Or am I doing something wrong?

Thanks so much for your help, and for this awesome library!

This would help a lot when combined with the newly implemented keyboard support.

I feel that people will start dragging a handle with the mouse. If it's difficult to drop the handle exactly where you want it (because of a large range), it would be nice to instantly use the keyboard to make minor adjustments.

As it stands, you have to click somewhere before the slider and tab over to it.