<!--
<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
*/