How to get multiple values from range slider - bootstrap-slider.js

Question

I am using bootstrap-slider.js - http://www.eyecon.ro/bootstrap-slider/ to give me range slider functionality. I have 9 sliders on one page and am getting the value only from the first slider.

How do I get the value for the other sliders?

<input type="text" class="sliderMaster slider-horizontal" id="sl9" name="q12" value="" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">


<input type="text" class="sliderMaster slider-horizontal" id="sl2" name="q2" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">


<input type="text" class="sliderMaster slider-horizontal" id="sl3" name="q3" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">

$(function(){
    $('#sl1').slider({
          formater: function(value) {
            return 'Current value: '+value;
          }
    });
    $('#sl2').slider({
          formater: function(value) {
            return 'Current value: '+value;
          }
    });
    $('#sl3').slider({
          formater: function(value) {
            return 'Current value: '+value;
          }
    });
 });

Possible duplicate: http://stackoverflow.com/questions/15736694/how-to-get-the-value-of-the-slider-bootstrap — mccannf, Jun 19 '13 at 21:26
I have read the above mentioned possible duplicate question and I think that this is a different question, I CAN get the value of one of the sliders but not the others, so the bootstrap-slider.js is not broken. — Grant, Jun 19 '13 at 21:32
Hi - not sure I understand, so I used the question linked to above to create the answer below :) — mccannf, Jun 19 '13 at 21:52

mccannf · Accepted Answer · 2013-06-19T22:46:28.850

9

You can get the values like so:

console.log("Slider 1 = "+$("#sl1").data('slider').getValue());
console.log("Slider 2 = "+$("#sl2").data('slider').getValue());
console.log("Slider 3 = "+$("#sl3").data('slider').getValue());

Fiddle here.

Edit

So to clarify - there does appear to be a problem that the slider is not actually updating the value of the underlying input. And when that input is posted via a form submit to the server, this causes a problem.

You could try adding an event to explicitly update the input when a slider changes, like so:

$(function(){
  $('#sl1').slider({
       formater: function(value) {
         return 'Current value: '+value;
       }
  }).on('slideStop', function(ev){
     $(this).val($(this).data('slider').getValue());
  });
  $('#sl2').slider({
        formater: function(value) {
          return 'Current value: '+value;
        }
  }).on('slideStop', function(ev){
     $(this).val($(this).data('slider').getValue());
  });
  $('#sl3').slider({
        formater: function(value) {
          return 'Current value: '+value;
        }
  }).on('slideStop', function(ev){
     $(this).val($(this).data('slider').getValue());
  });
});

and in each input set value to the same value as data-slider-value as this will be the default value i.e.

<input type="text" class="sliderMaster slider-horizontal" id="sl2" name="q2" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="50" value="50" data-slider-orientation="horizontal" data-slider-selection="after" data-slider-tooltip="show">

edited Jun 19 '13 at 22:46

answered Jun 19 '13 at 21:51

mccannf

16,619
3
51
63

Not sure how you figured that out, but it certainly works! Do you have a link to documentation related to your answer? – Michael Freake Jun 19 '13 at 21:59
I tried your suggestion but get the same result, only get a value for the first slider. – Grant Jun 19 '13 at 22:05
@MichaelFreake, I just used the link above: http://stackoverflow.com/questions/15736694/how-to-get-the-value-of-the-slider-bootstrap – mccannf Jun 19 '13 at 22:18
@Grant - does the fiddle in the answer work for you? It works for me in Chrome and IE10. You may need to show more of your code or a link to a demo page if you are still having a problem. – mccannf Jun 19 '13 at 22:22
@mccannf Sorry I might have not been clear enough, all the sliders do work and give me the correct values in the tooltip when I slide them around in FF, Chrome, IE the lot, but on $_POST I only get the first slider value. I do get the rest of the form $_POST values (non sliders). – Grant Jun 19 '13 at 22:33
Ok - that's clearer. I've edited the answer, hopefully this helps! – mccannf Jun 19 '13 at 22:47
@mccannf I been trying to get this to work but no luck. No matter what I try I can only get the first slider to output a value on $_POST, if I remove the first slider nothing gets a $_POST output. – Grant Jun 23 '13 at 19:25
@Grant, yes - your HTML is wrong. You may not have closing tags in the right place. If you examine your HTML through a developer tool (not the source code, the actual DOM) the `` tag appears after `
Group 2:
`... – mccannf Jun 24 '13 at 15:09
I validated it a few times but a stray crept in just after group 2. I removed it and it works great now. I really appreciate your help with this. – Grant Jun 24 '13 at 15:20

How to get multiple values from range slider - bootstrap-slider.js

1 Answers1

Linked