Bootstrap Slider isn't working

user_2917742 0
Viewed 4339

I'm trying to get this basic Bootstrap slider working, but this just eludes me.

http://getbootstrap.com/ bootstrap

http://www.eyecon.ro/bootstrap-slider/ bootstrap slider

I'm trying to implement this, but can't figure out why it isn't working. I've confirmed jQuery 1.8.3 running on the server. I have included the CSS/JS of Bootstrap 3.0.3. And I have included the CSS/JS of the Bootstrap Slider.

Here is the code I'm using to try to get this to run:

<div class="row">
  <div class="col-md-6">

    <input type="text" id="foo" class="span2" value="" data-slider-min="-20" data-slider-max="20" data-slider-step="1" data-slider-value="-14" data-slider-orientation="horizontal" data-slider-selection="after"data-slider-tooltip="hide">
    <input type="text" id="bar">

    <script type="text/javascript">
      $('#foo').slider().on('slide', function(ev) { $('#bar').val(ev.value); });
    </script>

  </div>
</div>

All I'm getting is two text input boxes, but not slider. Any ideas?

twitter-bootstrap css html jquery javascript
3 Answers

This is normally a problem with mobile taps instead of desktop views but the solution below should work for desktop too if you have issues with desktop view too.

Let's say your HTML looks like this:

<div class="slider-info">
  <input type="text" id="slider" 
    data-slider-min="10" 
    data-slider-max="1000" 
    data-slider-step="1">
</div>

Then your script will look like this

$(".slider-info").on("tap", function(e){
  let sliderID = "#slider";
  let slider = $(sliderID).data('slider');
  let length = chartData.length;
  let left = slider.getValue()[0];
  let right = slider.getValue()[1];

  let offset = e.pageX - $(this).offset().left;
  let width = $(this).width();
  let clickValue = parseInt(length * 1.0 * offset /  width);

  if (Math.abs(left-clickValue) < Math.abs(right-clickValue)) {
    slider.setValue([clickValue, end]);
  } else {
    slider.setValue([start, clickValue]);
  }
});

The solution above is only for the mobile browser. If you have issues with desktop view too, instead of using

$(".slider-info").on("tap", function(e){

use

$(".slider-info").click(function(e){
user_6183500
user_111638090
Related