JSFiddle - React, Tailwind, and code Playground

by zzzhan

HTML

<script src="http://seiyria.github.io/bootstrap-slider/javascripts/bootstrap-slider.js"></script>
<link rel="stylesheet" href="http://seiyria.github.io/bootstrap-slider/stylesheets/bootstrap-slider.css">
    <div class="well">
      <input id="ex4" type="text" data-slider-min="-5" data-slider-max="20" data-slider-step="1" data-slider-value="-3" data-slider-orientation="vertical"/>
    </div>
<div class="btn-group btn-group-sm">
                              <button class="btn btn-default btn-sm dropdown-toggle" id="testDropdownMenu" data-toggle="dropdown"><b class="caret"></b></button>                          
                              <div class="dropdown-menu" aria-labelledby="testDropdownMenu"><input type="text" value="" data-slider-min="0" data-slider-max="100" data-slider-step="1" data-slider-value="100" data-slider-orientation="vertical" data-ssdlg-key="fillOpacity" data-toggle="slider"/>
                              </div>
                            </div>

JavaScript

$(function(){    
var sliders = $('input[data-toggle=slider]', this.element).slider();
        sliders.on("slideStop", function(e){
        });

        $("#ex4").slider();
});