JSFiddle - React, Tailwind, and code Playground

by dmcgrew

HTML

<div class="kpa_rate kpa_rate1">
    <label for="kpa1_rating_value">Rating 1:</label>

    <div id="1" class="slider"></div>
    <input type="text" class="kpa1_rating_value" name="kpa1_rating" value="2" />       
</div>

	
	
	
<div class="kpa_rate kpa_rate2">
    <label for="kpa2_rating_value">Rating 2:</label>
         
    <div id="2" class="slider"></div>
    <input type="text" class="kpa2_rating_value" name="kpa2_rating" value="4" />
</div>

CSS

.kpa_rate {margin-bottom:25px;}

.ui-slider {width:50%;}

JavaScript

$(function() {
			    $( ".slider" ).slider({
			      range: "max",
			      min: 0,
			      max: 5,
			      value: $("input", this).val(),
			      slide: function( event, ui ) {			        
			        //get the id of this slider
					var id = $(this).attr("id");
			        //select the input box that has the same id as the slider within it and set it's value to the current slider value. 
					$("span[class*=" + id + "]").text(ui.value);
					$("input[class*=" + id + "]").val(ui.value);
			      }
			    });
			  });