<!-- 
        <body>
  <div class="owl-carousel">
    <div class="item"><a href="#">1</a></div>
    <div class="item"><a href="#">2</a></div>
    <div class="item"><a href="#">3</a></div>
    <div class="item"><a href="#">4</a></div>
    <div class="item"><a href="#">5</a></div>
    <div class="item"><a href="#">6</a></div>
    <div class="item"><a href="#">7</a></div>
    <div class="item"><a href="#">8</a></div>
    <div class="item"><a href="#">9</a></div>
    <div class="item"><a href="#">1</a></div>
    <div class="item"><a href="#">1</a></div>
    <div class="item"><a href="#">1</a></div>
</div> -->


        <body>
  <div class="owl-carousel">
    <div class="item"><a href="#" data-panel="0">1</a></div>
    <div class="item"><a href="#" data-panel="1">2</a></div>
    <div class="item"><a href="#" data-panel="2">3</a></div>
    <div class="item"><a href="#" data-panel="3">4</a></div>
    <div class="item"><a href="#" data-panel="4">5</a></div>
    <div class="item"><a href="#" data-panel="5">6</a></div>
    <div class="item"><a href="#" data-panel="6">7</a></div>
    <div class="item"><a href="#" data-panel="7">8</a></div>
    <div class="item"><a href="#" data-panel="8">9</a></div>
    <div class="item"><a href="#" data-panel="9">10</a></div>
    <div class="item"><a href="#" data-panel="10">11</a></div>
    <div class="item"><a href="#" data-panel="11">12</a></div>
    <div class="item"><a href="#" data-panel="11">13</a></div>
    <div class="item"><a href="#" data-panel="11">14</a></div>
    <div class="item"><a href="#" data-panel="11">15</a></div>
    <div class="item"><a href="#" data-panel="11">16</a></div>
    <div class="item"><a href="#" data-panel="11">17</a></div>
    <div class="item"><a href="#" data-panel="11">18</a></div>
    <div class="item"><a href="#" data-panel="11">19</a></div>
    <div class="item"><a href="#" data-panel="11">20</a></div>
    <div class="item"><a href="#" data-panel="11">21</a></div>
    <div class="item"><a href="#" data-panel="11">22</a></div>
    <div class="item"><a href="#" data-panel="11">23</a></div>
    <div class="item"><a href="#" data-panel="11">24</a></div>
</div>
  
 <div class="slider-container">
  <input class="range-slider" type="range" id="range" value="0" name="range" min="0" step="1" max="23" />
   <!--<span class="slider-value">0</span> -->
   <button class="go-me">Go</button>
   <button class="back-me">Back</button>
  </div>
</body>
$unccgreen: #004525;
@media (max-width: 460px) {
  
}
.owl-carousel {
    background-color: #ccc;
    text-align: center;
  div {
    margin: 5px 0px;
  }
  .owl-nav {
    display: none;
  }
  .owl-dots {
    display: none;
  }
}

// .slider-container{
//   text-align: center;
// // .range-slider {
  
// //   width: 500px;
// //   &::-webkit-ms-thumb {
// //     background: $unccgreen;
    
// //   }
//   // }
//   span {
//     margin-left: 25px;
//     padding: 5px;
//     border: 5px solid black;
//   }
// }

// input[type=range] {
//   &::-ms-thumb {
//     border: 1px solid #000000;
//     height: 36px;
//   width: 16px;
//   border-radius: 3px;
//   background: #ffffff;
//   cursor: pointer;
//   }
// }

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 50%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  // box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: $unccgreen;
  border: 0px solid #000101;
}

input[type=range]::-webkit-slider-thumb {
  // box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  // border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background: $unccgreen;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -9px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
  background: $unccgreen;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: $unccgreen;
  // border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background: $unccgreen;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #ac51b5;
  border: 0px solid #000101;
  // border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: $unccgreen;
  border: 0px solid #000101;
  // border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 100%;
  background: $unccgreen;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
 background: $unccgreen;
}
input[type=range]:focus::-ms-fill-upper {
  background: $unccgreen;
}

body {
  padding: 30px;
}
View Compiled
$(document).ready(function() {
  var owl = $(".owl-carousel"),
      // rangeArr = [],
      inputType =$("input[type=range]");
  owl.owlCarousel({
    // 'loop': true,
    // 'mouseDrag': false,
    // 'autoplay': true,
    'responsive': {
      0: {
        items: 1,
        slideBy: 1
       
      },
      600: {
        items: 3,
        slideBy: 1
        
      },
      1280: {
        items: 5,
        slideBy: 1
        
        
      }
    }
  });
//   function getIndex(event) {
    
//   }
      owl.on('changed.owl.carousel', function(event) {
      console.log(event.item.index);
      inputType.val(event.item.index);
       
    });
  
  $(".go-me").click(function() {
    owl.trigger("next.owl.carousel");
  });
  $(".back-me").on("click", function() {
    owl.trigger("prev.owl.carousel");
  });
  $("input").on("change", function(e) {
    e.preventDefault();
    console.log(inputType.val());
    // console.log(e.item.index);
    // FIGURE OUT HOW TO GET CAROUSEL INDEX
   
    $('.owl-carousel').trigger('to.owl.carousel', [inputType.val(),1,true]);

  });
});




//Loop thorugh .owl-carousel and find number of items, which will give you the # of pictures in carousel 
//Figure out number of pictures in carousel 
//# of pics = input[max]
//

/* DETECT BREAKPOINTS */
// function viewport(){
//     var e = window;
//     var a = "inner";
//     if (!("innerWidth" in window)){
//         a = "client";
//         e = document.documentElement || document.body;
//     }
//     return { width : e[ a+"Width" ] , height : e[ a+"Height" ] }
// }
// function isMobile() {
//     if(viewport().width < 992) {
//         //console.log("isMobile");
//         return true;
//     } else {
//         return false;
//     }
// }
// function isTablet() {
//     if(viewport().width < 1200) {
//         //console.log("isTablet");
//         return true;
//     } else {
//         return false;
//     }
// }
// function isDesktop() {
//     if(viewport().width >= 1200) {
//         //console.log("isDesktop");
//         return true;
//     } else {
//         return false;
//     }
// }

/*

http://stackoverflow.com/questions/18544890/onchange-event-on-input-type-range-is-not-triggering-in-firefox-while-dragging

ionslider: http://jsfiddle.net/IonDen/qv6yrjrv/

https://github.com/IonDen/ion.rangeSlider

owl carousel with range slider (which one is the complete version? Find it): 

http://jsfiddle.net/mwams6g2/13/

http://jsfiddle.net/broezer/mwams6g2/28/

SO thread on previous link: 

http://stackoverflow.com/questions/35970859/ion-rangeslider-slider-width-and-position-on-update

Styling cross-browser compatible range input: 

https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

Bootstrap carousel w/ progress bar, when clicked on bar several spaces away from current bar value, it jumps to that value. (on bar 1, click bar 7? Goes to carousel item 7)

https://codepen.io/TheNickelDime/pen/oZBEew


CSS Range Slider: 

https://codepen.io/seanstopnik/pen/CeLqA

*/


External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js