JSFiddle - React, Tailwind, and code Playground

by godhong

HTML

<table class="display" width="550" border="1">
               <tr>
                    <th>Display starting date:</th>
                   <td><input type="text" id="range_min"/></td>
                </tr>
                <tr>
                    <th>Display ending date:</th>
                    <td><input type="text" id="range_max"/></td>
                </tr>
                <tr>
                    <td><button type="submit" id="calc">Generate Figure</button></td>
                </tr>
        </table>

<div id="container">
   					 <div id="scheduler"></div>
					</div>

JavaScript

(function() { 
				$.widget("ui.timeslider", {
					options: {
						animate: false,
						days: ["Lunes","Martes","Miércoles","Jueves","Viernes","Sábado","Domingo"],
						distance: 0,
						max: 1440,
						min: 0,
						orientation: "horizontal",
						range: true,
						slide: function(event,ui){
							function formatTime(time){
								var hours = parseInt(time / 60 % 24);
								var minutes = parseInt(time % 60);
								minutes = minutes + "";
								if (minutes.length == 1) {
									minutes = "0" + minutes;
								}
								return hours + ":" + minutes;
							}


							var startTime = formatTime(ui.values[0]);
							var endTime = formatTime(ui.values[1]);

						
							var selector = "#"+this.id;
							$(selector + "-time1").val(formatTime(ui.values[0]));
							$(selector + "-time2").val(formatTime(ui.values[1]));
							//alert (selector)

						},
						step: 5,
						value: 0,
						//values: [0, 0]
					},
			
			////////////////////////////////////////////////     SENSOR 2 		
			_create: function(){
				var self = this,
					o = this.options,
					dayslength = o.days.length;
					o.timeslider = this;
					
			function getTime(time){
					var times = time.split(':');
					time = (times[0] * 60) + parseInt(times[1]);
					return time;
				}
				
				for(var i=0; i < dayslength; i++){
					self.element.append(self._sliderhtml(o.days[i]));
					$( "#" + o.days[i] ).slider(o);
					

						
						var slider = "#" + o.days[i];
						var dia_in2 = ( o.days[i] + "-time1" );
						var newval1 = getTime($("#"+dia_in2).val());
						if(!isNaN(newval1)) $(slider).slider("values" , 0 , newval1);
						

						var dia_out2 = ( o.days[i] + "-time2" );
						var newval2 = getTime($("#"+dia_out2).val());
						if(!isNaN(newval2)) $(slider).slider("values" , 1 , newval2);
						


					////////////////////////////////////////////////     SENSOR 2 
					
					$( "#" + o.days[i] + "-time1" ).bind("change",function(){
						var slider = "#" +...