Bootstrap Slider isn't working

Question

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?

Answer 1

I recommend you install the latest version of jQuery to solve your problem. I had a similar issue and it was resolved once I installed the latest version of jQuery. Good luck.

Answer 2

Use Bootstrap4 for your website. First, install bootstrap4 from its official site https://getbootstrap.com/ or you can also just add CSS link and JS script in your Index.html file. Also, add jquery file above the bootstrap js script. After that copy, this code for creating a professional carousel:

https://getbootstrap.com/docs/4.0/components/carousel/

Answer 3

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){