JSFiddle - React, Tailwind, and code Playground

by MrSala

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Simulación de movimiento de piezas</title>
  <script src="script.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/smoothness/jquery-ui.css">
  
  <title>Desactivar sliders al presionar un botón</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
  <style>
    .ui-slider-disabled.ui-state-disabled .ui-slider-range,
    .ui-slider-disabled.ui-state-disabled .ui-slider-handle {
      background-image: none;
    }
    .ui-slider-disabled.ui-state-disabled {
      opacity: 0.5;
      filter: alpha(Opacity=50);
      cursor: default;
      pointer-events: none;
    }
  </style>

</head>
<body>
  <h1>Juego 3: Simulación de línea interdependiente con variabilidad</h1>
  <center>En este juego todas las estaciones tienen un WIP previo que se puede parametrizar. Puedes cambiar la variabilidad y ajustar la capacidad media de cada estación</center>
  <h2>Ronda de producción <span id="roundNumber">0</span> de <span id="max_round"></span></h2>  
  <div id='container_desliza_2'>
    <p></p>
    <h3>Selecciona el WIP inicial de todas las estaciones: </h3>
    <input type="range" id="piloto" name="piloto" min="1" max="10" value="4">
    <div class="slider-labels">
     <span class="slider-min">1</span>
     <span class="slider-scale">|</span>
     <span class="slider-min">2</span>
     <span class="slider-scale">|</span>
     <span class="slider-min">3</span>
     <span class="slider-scale">|</span>
     <span class="slider-min">4</span>
     <span class="slider-scale">|</span>
     <span class="slider-min">5</span>
     <span class="slider-scale">|</span>
     <span class="slider-min">6</span>
     <span class="slider-scale">|</span>
     <span...

CSS

body {
  font-family: 'Open Sans', sans-serif;
  background-color: #F8F8F8;
  font-size: 13px;
}

h1 {
  font-size: 30px;
  font-weight: 300;
  text-align: center;
  margin-bottom: 10px;
}

h2 {
  font-size: 17px;
  color: #C70039;
  font-weight: 400;
  text-align: center;
  margin-bottom: 0px;
}

h3 {
  font-size: 14px;
  font-weight: 600;
   ;
  margin-bottom: 5px;
}

#container,
#container_modal{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 30px;
  margin-bottom: 0px;
}

#container_boton,
#container_boton_esta{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
  margin-bottom: 30px;
}

.process {
  width: 150px;
  height: 420px;
  background-color: white;
  border: 2px solid #E2E2E2;
  text-align: center;
  padding: 20px;
  position: relative;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}

.processt {
  width: 170px;
  height: 420px;
  background-color: white;
  border: 2px solid #E2E2E2;
  text-align: center;
  padding: 20px;
  position: relative;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}


#rollDiceButton,
#movePiecesButton,
#resultsButton,
#iniciarJuego,
#reiniciarJuego {
  margin-top: 40px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: none;
  border-radius: 50px;
  background-color: #0099ff;
  color: #fff;
  font-size: 16px;
  padding: 12px 24px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#rollDiceButton:hover,
#movePiecesButton:hover,
#resultsButton:hover,
#iniciarJuego:hover,
#reiniciarJuego :hover{
  background-color: #0084e6;
}

#rollDiceButton:active,
#movePiecesButton:active,
#resultsButton:active,
#iniciarJuego:active,
#reiniciarJuego:active {
  background-color: #0073cc;
}

#rollDiceButton:disabled,
#movePiecesButton:disabled,
#resultsButton:disabled,
#iniciarJuego:disabled,
#reiniciarJuego:disabled{
  opacity: 0.5;
  cursor: not-allowed;
}

.tabs {
  display: none;
  width:...

JavaScript

const slider = document.getElementById("piloto");
const minLabel = document.querySelector(".slider-min");
const maxLabel = document.querySelector(".slider-max");
const scaleLabel = document.querySelector(".slider-scale");

slider.oninput = function() {
  const value = this.value;
  const min = this.min;
  const max = this.max;
  const offset = Number((value - min) * 100 / (max - min));
  minLabel.innerHTML = min;
  maxLabel.innerHTML = max;
  scaleLabel.style.left = `${offset}%`;
};

var minA = 1;
var minB = 1;
var minC = 1;
var minD = 1;
var minE = 1;
var minF = 1;

var maxA = 1;
var maxB = 1;
var maxC = 1;
var maxD = 1;
var maxE = 1;
var maxF = 1;

$(function() {
  var sliderRange = $("#slider-range");
  var sliderRange2 = $("#slider-range-2");
  var sliderRange3 = $("#slider-range-3");
  var sliderRange4 = $("#slider-range-4");
  var sliderRange5 = $("#slider-range-5");
  var sliderRange6 = $("#slider-range-6");
  var minValue = 1;
  var maxValue = 6;
  var startValue = 1;
  var endValue = 6;
  var minValue_2 = 1;
  var maxValue_2 = 6;
  var startValue_2 = 1;
  var endValue_2 = 6;
  var minValue_3 = 1;
  var maxValue_3 = 6;
  var startValue_3 = 1;
  var endValue_3 = 6;
  var minValue_4 = 1;
  var maxValue_4 = 6;
  var startValue_4 = 1;
  var endValue_4 = 6;
  var minValue_5 = 1;
  var maxValue_5 = 6;
  var startValue_5 = 1;
  var endValue_5 = 6;
  var minValue_6 = 1;
  var maxValue_6 = 6;
  var startValue_6 = 1;
  var endValue_6 = 6;
  sliderRange.slider({
    range: true,
    min: minValue,
    max: maxValue,
    values: [startValue, endValue],
  });
  sliderRange2.slider({
    range: true,
    min: minValue_2,
    max: maxValue_2,
    values: [startValue_2, endValue_2],
  });
  sliderRange3.slider({
    range: true,
    min: minValue_3,
    max: maxValue_3,
    values: [startValue_3, endValue_3],
  });
  sliderRange4.slider({
    range: true,
    min: minValue_4,
    max: maxValue_4,
    values: [startValue_4, endValue_4],
  });
  sliderRange5.slider({
   ...