JSFiddle - React, Tailwind, and code Playground

by LuckyLuzz

HTML

<link rel="stylesheet" href="bootstrap-slider.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/seiyria/bootstrap-slider/master/dist/css/bootstrap-slider.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://unpkg.com/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/seiyria/bootstrap-slider/master/dist/bootstrap-slider.js"></script>
   <div class="col-sm text-center"> 
   <div class="card">
   <div class="container">
   <table class="table text-center">
   <tr>
   <td colspan="3">
   <input 
   type="range" 
   class="testcolor"
   id="IDtestcolor" 
   data-slider-id="CSSColor"
   data-slider-ticks="[1, 2, 3]"
   data-slider-ticks-labels='["short", "medium", "long"]' 
   data-slider-min="1"
   data-slider-max="3" 
   data-slider-step="1" 
   data-slider-value="2"
   data-slider-tooltip="show" />
   </td>
   </tr>
   <tr>
   <td>
   <input type="range" class="custom-range" id="customRange1">
   </td>
   </tr>
   </table>
   </div>
   </div>
   </div>

CSS

body {
  margin-top: 10%;
}
.slider.slider-horizontal .tooltip.tooltip-main.in,
.slider.slider-vertical .tooltip.tooltip-main.in { opacity: 1 !important; }

#CSSColor .slider-selection{
    background: red;
}
#CSSColor .slider-handle{
    background: red;
    background-image: linear-gradient(to bottom, red 0, red 100%);
}

JavaScript

$("#IDtestcolor").bootstrapSlider();
$("#IDtestcolor").on("slide", function(slideEvt) {
	$("#IDtestcolorSliderVal").text(slideEvt.value);
});