JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/andreruffert/rangeslider.js/develop/dist/rangeslider.css">
<script src="https://cdn.rawgit.com/andreruffert/rangeslider.js/develop/dist/rangeslider.min.js"></script>
<div class="ranges">

  <div class="ranges__item">
    <span>Design / </span>
    <span id="js-range-val-1"></span>
    <input class="js-range range" data-range="#js-range-val-1" type="range" min="10" max="100" step="1" value="83">
  </div>

  <div class="ranges__item">
    <span>Development / </span>
    <span id="js-range-val-2"></span>
    <input class="js-range range" data-range="#js-range-val-2" type="range" min="10" max="100" step="1" value="76">
  </div>

  <div class="ranges__item">
    <span>Wordpress / </span>
    <span id="js-range-val-3"></span>
    <input class="js-range range" data-range="#js-range-val-3" type="range" min="10" max="100" step="1" value="81">
  </div>

  <div class="ranges__item">
    <span>Drupal / </span>
    <span id="js-range-val-4"></span>
    <input class="js-range range" data-range="#js-range-val-4" type="range" min="10" max="100" step="1" value="71">
  </div>
</div>

JavaScript

$(function () {

		/*rangeslider*/
		var rangeS = $('.js-range');
		console.log('rangeS = ' + rangeS);

		rangeS.rangeslider({
				polyfill: false,
				onInit: function () {
						rangeS.each(function () {
								var $this = $(this);
								var rangeV = $this.attr('data-range');
								$(rangeV).text(($this).val() + '%');
						});
				},
				onSlide: function (position, value) {
          var element = $(this)[0].$element;
          var rangeV = element.attr('data-range');
          console.log($(element));
          $(rangeV).text(value + '%');
				}
		});
});