JSFiddle - React, Tailwind, and code Playground

by firegroove

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="layerOP">

  <input id="theOpSlider" type="range" min="0" max="100" step="1" class="topcoat-range " style="float:left;width: 60%;margin-bottom:10px;margin-left:62px" v-model="opacity_value" v-on:change="make_opak">

  <input id="theOpSliderValue" type="text" min="0" max="100" step="1" class="topcoat-text-input" style="float:left;position:absolute;margin-top:1px;line-height:17px;border: 1px solid rgb(83, 83, 83);width: 30px; right:15px;padding-left: 6px; padding-right: 0;font-size: 11px;z-index:9999999"
    v-model="opacity_value" v-on:keyup.enter="make_opak">
</div>

CSS

.disabled {
	  position: relative;
	  color: white;
	}

	.disabled:after {
	  content: ' ';
	  width: 100%;
	  height: 100%;
	  left: 0;
	  top: 0;
	  position: absolute;
	}

JavaScript

/* $("#theOpSlider").css('opacity','0.3'); */

             $("#theOpSlider").addClass(disabled);