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>Simulación de línea interdependiente con variabilidad</h1>
    <center>En este juego puedes modificar el WIP inicial previo para cada estación (Excepto A - Ilimitado) y establecer un WIP previo máximo para cada estación, el cual puedes modificar cada ronda (de manera predeterminada tendrá un máximo de 100, de manera que la estación que la antecede no produzca / envíe por encima de ese nivel de inventario. Puedes cambiar la variabilidad y ajustar la capacidad media de cada estación (hasta antes de iniciar el juego)</center>
    <hr>
    <div class="container_campo">
      <label for="numRounds">Establecer el número de rondas de la simulación (mín: 5 | máx: 100):</label>
      <input type="number" id="numRounds" name="numRounds" value="20" min="1" max="100">
    </div>
    <h2>Ronda de producción <span id="roundNumber">0</span> de <span id="max_round"></span></h2>
    <div id="container">
      <div class="process" id="processA">
        <h2>Estación A</h2>
        <p><img...

CSS

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

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

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

h3 {
  font-size: 12px;
  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: right;
  align-items: right;
  margin-top: 0px;
  margin-bottom: 30px;
}

#container_resultados{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 0px;
  margin-bottom: 30px;
}

.process {
  width: 105px;
  height: 680px;
  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: 125px;
  height: 680px;
  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,
#acelerar,
#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,
#acelerar:hover,
#reiniciarJuego :hover{
  background-color: #0084e6;
}

#rollDiceButton:active,
#movePiecesButton:active,
#resultsButton:active,
#iniciarJuego:active,
#acelerar:active,
#reiniciarJuego:active {
  background-color:...

JavaScript

const slider_B = document.getElementById("piloto_B");
const slider_C = document.getElementById("piloto_C");
const slider_D = document.getElementById("piloto_D");
const slider_E = document.getElementById("piloto_E");
const slider_F = document.getElementById("piloto_F");
const minLabel = document.querySelector(".slider-min");
const maxLabel = document.querySelector(".slider-max");
const scaleLabel = document.querySelector(".slider-scale");

slider_B.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}%`;
};
slider_C.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}%`;
};
slider_D.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}%`;
};
slider_E.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}%`;
};
slider_F.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 =...