JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css">
<script src="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/owl.carousel.js"></script>
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css">
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinHTML5.css">
<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
    <div class="item"><h4>7</h4></div>
    <div class="item"><h4>8</h4></div>
    <div class="item"><h4>9</h4></div>
    <div class="item"><h4>10</h4></div>
    <div class="item"><h4>11</h4></div>
    <div class="item"><h4>12</h4></div>
</div>

<div style="position: relative; padding: 200px;">
    <div><input type="text" id="range" value="" name="range" /></div>
</div>

CSS

.owl-carousel .owl-item {
    background-color: #ccc;
}

JavaScript

//Слайдер
var $owl = $('.owl-carousel');
$owl.owlCarousel({
    loop:true,
    margin:10,
    nav:true
});

//Ползунок
var $range = $("#range");
$range.ionRangeSlider({
	type: "single",
	min: 0,
	max: 12,
	keyboard: true,
	step: 1,
	//onChange: function (data) {
		//$owl.trigger('changed.owl.carousel', [???]);
        //$owl.trigger('next.owl.carousel', [1000]);
	//}
});

var $numEl;

$range.on("change", function () {
    var $this = $(this),
        value = $this.prop("value");
    console.log("ValueOLD: " + value);
    
    if(value > 2){
        $owl.trigger('next.owl.carousel', [1000]);
    };
});

$('.owl-next').on('click', function(){
    //$range.trigger('onStart');
});