Gradientowy slider

Question

.slider1 {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    margin-top: 10px;
    transform: translate(-50%, -50%);
  }
  
  input[name="slider1"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: rgba(227, 59, 59);
    background: -moz-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: -moz-webkit-gradient(
      left bottom,
      right top,
      color-stop(0%, rgb(227, 59, 59)),
      color-stop(51%, rgb(230, 168, 87)),
      color-stop(100%, rgb(93, 255, 53))
    );
    background: -webkit-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: -o-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: -ms-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
    height: 2px;
  }
  
  input[name="slider1"]:focus {
    outline: none;
  }
  
  input[name="slider1"]::-moz-slider-track {
    -moz-appearance: none;
    background: rgba(59, 173, 227, 1);
    background: -moz-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: -moz-webkit-gradient(
      left bottom,
      right top,
      color-stop(0%, rgb(227, 59, 59)),
      color-stop(51%, rgb(230, 168, 87)),
      color-stop(100%, rgb(93, 255, 53))
    );
    background: -webkit-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: -o-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: -ms-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
    height: 2px;
  }
  
  input[name="slider1"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 2px solid;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    max-width: 80px;
    position: relative;
    bottom: 6px;
    background-color: #1d1c25;
    cursor: -webkit-grab;
  
    -webkit-transition: border 1000ms ease;
    transition: border 1000ms ease;
  }
  
  input[name="slider1"]::-moz-slider-thumb {
    -moz-appearance: none;
    border: 2px solid;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    max-width: 80px;
    position: relative;
    bottom: 11px;
    background-color: #1d1c25;
    -moz-transition: border 1000ms ease;
    transition: border 1000ms ease;
  }
  
  .slider1.red::-webkit-slider-thumb {
    border-color: rgb(227, 59, 59);
  }
  
  .slider1.orange::-webkit-slider-thumb {
    border-color: rgb(230, 168, 87);
  }
  
  .slider1.green::-webkit-slider-thumb {
    border-color: rgb(93, 255, 53);
  }
  
  .slider1.red::-moz-slider-thumb {
    border-color: rgb(227, 59, 59);
  }
  
  .slider1.ogrange::-moz-slider-thumb {
    border-color: rgb(230, 168, 87);
  }

  .slider1.green::-moz-slider-thumb {
    border-color: rgb(93, 255, 53);
  }
  
  input[name="slider1"]::-webkit-slider-thumb:active {
    cursor: grabbing;
  }
  
  input[name="slider1"]::-moz-slider-thumb:active {
    cursor: grabbing;
  }
  

var inputslider1 = document.getElementsByClassName("slider1")[0],
  maxValue = 10,
  speed = 2,
  currValue,
  rafID;

inputslider1.min = 100;
inputslider1.max = 100;

function unlockStartHandler() {

  window.cancelAnimationFrame(rafID);

  currValue = +slider1.value;
}

function unlockEndHandler() {

  currValue = +slider1.value;


  if (currValue >= 33) {
    successHandler();
  } else {
    rafID = window.requestAnimationFrame(animateHandler);
  }
}


function animateHandler() {

  var transX = currValue - 30;


  inputslider1.value = currValue;


  if (currValue < 20) {
    inputslider1.classList.remove("red");
  }
  if (currValue < 66) {
    inputslider1.classList.remove("orange");
  }
  if (currValue < 99) {
    inputslider1.classList.remove("green");
  }


  if (currValue > 33) {
    window.requestAnimationFrame(animateHandler);
  }

  currValue = currValue - speed;
}

function successHandler() {
  alert("Unlocked");
}

inputslider1.addEventListener("mousedown", unlockStartHandler, false);
inputslider1.addEventListener("mousestart", unlockStartHandler, true);
inputslider1.addEventListener("mouseup", unlockEndHandler, false);
inputslider1.addEventListener("touchend", unlockEndHandler, true);

inputslider1.addEventListener("input", function () {
  if (currValue < 33) {
    inputslider1.classList.remove("red");
  }
  if (currValue < 66) {
    inputslider1.classList.remove("orange");
  }
  if (currValue < 99) {
    inputslider1.classList.remove("green");
  }

  if (currValue < 66) {
    inputslider1.classList.remove("red");
  }
  if (currValue < 33) {
    inputslider1.classList.remove("orange");
  }

  if (currValue < 99) {
    inputslider1.classList.remove("green");
  }

});

Chciałem zrobić slider, którego kółko zmienia kolor jak się go przesuwa, ale nie wiem co robię źle.
Pomocy 

Comments

Uzupełnij kod i umieść go w odp bloczkach proszę .

Spróbuje pomóc..

Answer 1

Zmieniłem (na "krótszy" z 1 sekundy na 0.3sekundy):                      

transition: border 1000ms ease;

na 

transition: border 0.3s ease;

i js-a na:  

const inputslider1 = document.getElementsByClassName("slider1")[0];
const inputslider1_min = inputslider1.getAttribute('min') * 1,
      inputslider1_max = inputslider1.getAttribute('max') * 1;
 
changeColorSliderThumb();
  
inputslider1.addEventListener("mousemove", changeColorSliderThumb);
  
function changeColorSliderThumb() {
  const percent = ((inputslider1.value - inputslider1_min) / (inputslider1_max - inputslider1_min)) * 100;
  if (percent >= 0 && percent <= 33) {
    inputslider1.classList.add("red");
    inputslider1.classList.remove("orange");
  }
  if (percent >= 34 && percent <= 66) {
    inputslider1.classList.add("orange");
    inputslider1.classList.remove("green");
  }
  if (percent >= 67 && percent <= 100) {
    inputslider1.classList.add("green");
  }
}

cały kod do testowania na np: codepen

<input type="range" class="slider1" name="slider1" value="0" min="3" max="15" step="1">

.slider1 {
    -webkit-appearance: none;
    -moz-appearance: none;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100px; /* większy do testów, było 50px */
    margin-top: 10px;
    transform: translate(-50%, -50%);
  }
   
  input[name="slider1"]::-webkit-slider-runnable-track {
    -webkit-appearance: none;
    background: rgba(227, 59, 59);
    background: -moz-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: -moz-webkit-gradient(
      left bottom,
      right top,
      color-stop(0%, rgb(227, 59, 59)),
      color-stop(51%, rgb(230, 168, 87)),
      color-stop(100%, rgb(93, 255, 53))
    );
    background: -webkit-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: -o-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: -ms-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
    height: 2px;
  }
   
  input[name="slider1"]:focus {
    outline: none;
  }
   
  input[name="slider1"]::-moz-slider-track {
    -moz-appearance: none;
    background: rgba(59, 173, 227, 1);
    background: -moz-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: -moz-webkit-gradient(
      left bottom,
      right top,
      color-stop(0%, rgb(227, 59, 59)),
      color-stop(51%, rgb(230, 168, 87)),
      color-stop(100%, rgb(93, 255, 53))
    );
    background: -webkit-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: -o-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: -ms-linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    background: linear-gradient(
      45deg,
      rgb(227, 59, 59) 0%,
      rgba(230, 168, 87) 51%,
      rgba(93, 255, 53) 100%
    );
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
    height: 2px;
  }
   
  input[name="slider1"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 2px solid;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    max-width: 80px;
    position: relative;
    bottom: 6px;
    background-color: #1d1c25;
    cursor: -webkit-grab;
   
    -webkit-transition: border 0.3s ease;
    transition: border 0.3s ease;
  }
   
  input[name="slider1"]::-moz-slider-thumb {
    -moz-appearance: none;
    border: 2px solid;
    border-radius: 50%;
    height: 25px;
    width: 25px;
    max-width: 80px;
    position: relative;
    bottom: 11px;
    background-color: #1d1c25;
    -moz-transition: border 0.3s ease;
    transition: border 0.3s ease;
  }
   
  .slider1.red::-webkit-slider-thumb {
    border-color: rgb(227, 59, 59);
  }
   
  .slider1.orange::-webkit-slider-thumb {
    border-color: rgb(230, 168, 87);
  }
   
  .slider1.green::-webkit-slider-thumb {
    border-color: rgb(93, 255, 53);
  }
   
  .slider1.red::-moz-slider-thumb {
    border-color: rgb(227, 59, 59);
  }
   
  .slider1.ogrange::-moz-slider-thumb {
    border-color: rgb(230, 168, 87);
  }
 
  .slider1.green::-moz-slider-thumb {
    border-color: rgb(93, 255, 53);
  }
   
  input[name="slider1"]::-webkit-slider-thumb:active {
    cursor: grabbing;
  }
   
  input[name="slider1"]::-moz-slider-thumb:active {
    cursor: grabbing;
  }

const inputslider1 = document.getElementsByClassName("slider1")[0];
const inputslider1_min = inputslider1.getAttribute('min') * 1,
      inputslider1_max = inputslider1.getAttribute('max') * 1;
 
changeColorSliderThumb();
  
inputslider1.addEventListener("mousemove", changeColorSliderThumb);
  
function changeColorSliderThumb() {
  const percent = ((inputslider1.value - inputslider1_min) / (inputslider1_max - inputslider1_min)) * 100;
  if (percent >= 0 && percent <= 33) {
    inputslider1.classList.add("red");
    inputslider1.classList.remove("orange");
  }
  if (percent >= 34 && percent <= 66) {
    inputslider1.classList.add("orange");
    inputslider1.classList.remove("green");
  }
  if (percent >= 67 && percent <= 100) {
    inputslider1.classList.add("green");
  }
}
  
function rangeSlide1(value) {
  document.getElementById("rangeSlide1").innerHTML = value;
}

 

Comments

W codepen działa, a u mnie już nie :(

---

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>Naxis.io</title>
    <meta name="description" content="" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link href="https://fonts.googleapis.com/css2?family=Lato&family=Ubuntu&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,400;0,500;0,600;1,700&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    <script src="slider.js"></script>
    <script src="NewWindow.js"></script>
    <script src="window.js"></script>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link rel="stylesheet" href="toggles.css" type="text/css" />
    <link rel="stylesheet" href="modal.css" type="text/css" />
    <link rel="stylesheet" href="sliders.css" type="text/css" />
    <link rel="stylesheet" href="Fontello/css/fontello.css" type="text/css" />

</head>

<body oncontextmenu="return false" ncontextmenu="return false">

    <div class="up-rectangle">
        <div class="pp-tos">Privacy Policy │ Terms of Service</div>

        <div class="socials">
            <a href="https://discord.gg/jTzJuHfhdZ" target="_blank">
                <div class="dc">
                    <i class="iconify" data-icon="fa-brands:discord"></i>
                    <div class="dc-ins">Official Discord</div>
            </div></a>

            <a href="https://discord.gg/4eYGwvXw5q" target="_blank">
                <div class="tournament">
                    <i class="icon-award"></i>
                    <div class="tournament-ins">Tournament</div>
            </div></a>

            <a href="https://www.youtube.com/channel/UCRjwCE_lmKW2lxToBQso66A" target="_blank">
                <div class="yt">
                    <i class="icon-youtube-play"></i>
                    <div class="yt-ins">YouTube</div>
            </div></a>

            <a href="#" target="_blank">
                <div class="skins">    
                    <i class="icon-picture"></i>
                    <div class="skins-ins">Skins</div>
            </div></a>

            <div style="clear:both;"></div>

        </div>

    </div>

    <div id="main-container">
        
        <div class="main-rectangle">

            <div class="servers-list">

                <div class="servers-zone">
                    <button name="EU">
                        <div class="eu-server">
                            EU
                        </div>                  

                    </button>

                    <button name="NA">
                        <div class="na-server">
                            NA
                        </div>
           
                    </button>

                    <button name="AS">
                        <div class="as-server">
                            AS
                        </div>

                    </button>
                </div>
                
            </div>

            <div class="player-container">

                <input type="text" name="Skin-URL" maxlength="40" placeholder="https://skins.naxis.io/s/" placeholder="#ffffff;" />
                <input type="text" name="Nickname" maxlength="20" placeholder="Nickname" />
                <input type="text" name="Tag" maxlength="20" placeholder="Tag" />

                <button type="button" name="buttonplay">
                    <i class="icon-play"></i>
                    <span class="play-ins">Play</span>
                  </button>
                
                  <button type="button" name="buttonspectate">
                     <i class="icon-eye"></i>
                  </button>                 
                      
                  <details>
                    <summary>
                        
                      <div class="settings-button" style="float: left;">
                        <i class="icon-cog-outline"></i>
                      </div>
                      <div class="settings-overlay"></div>
                    </summary>
                    <div class="settings-container" class="scrollbar" >
                      <div class="x-touch1" onclick="document.querySelector('.email').classList.remove('expand');event.stopPropagation();">
                      <div class="settings-close">
                        <div class="line1-1"></div>
                        <div class="line2-1"></div>
                      </div>
                    </div>
                      <div class="settings-content" >

                        <div class="section-renderer">
                          <div class="header">Renderer</div>
                          <div class="option">

                            <input id="chck" type="checkbox">
                            <label for="chck" class="check-trail">
                              <span class="check-handler"></span>
                            </label>                                               

                        <div class="settings-window">    

                            <div class="min">3</div>
                            <div class="max">15</div>
                            <div class="description">%</div>
                            <div class="content">Replay duration</div>

                            <span id="rangeSlide1" data-min="3" data-max="15">3</span>
                                  <input type="range" class="slider1" name="slider1" min="3" max="15" value="0" step="1" onChange="rangeSlide1(this.value)" onmousemove="rangeSlide1(this.value)"></input>   

                                  <script> 
                                      var inputslider1 = document.getElementsByClassName("slider1")[0];
                                    changeColorSliderThumb();
 
                                    inputslider1.addEventListener("mousemove", changeColorSliderThumb);
 
                                    function changeColorSliderThumb() {                                    
                                      if (inputslider1.value >= 0 && inputslider1.value <= 33) {
                                        inputslider1.classList.add("red");
                                        inputslider1.classList.remove("orange");
                                      }
                                      if (inputslider1.value >= 34 && inputslider1.value <= 66) {
                                        inputslider1.classList.add("orange");
                                        inputslider1.classList.remove("green");
                                      }
                                      if (inputslider1.value >= 67 && inputslider1.value <= 100) {
                                        inputslider1.classList.add("green");
                                      } 
                                    }

                                    function rangeSlide1(value) {
                                      document.getElementById('rangeSlide1').innerHTML = value;
                                    }
                                  </script>                                                                           
                          </div>
                      </div>
                                              
                      </div>
                    </div>
                  </details>

            </div>
            <div class="skins-container" class="scrollbar"></div>

            <div class="profile-container">

                <div class="login-ins">Login to your account with Discord to save your in-game progress.</div>
                    <div style="clear:both;"></div>
                    
                <button name="button-login" onclick="DiscordNewWindow()">
                    <i class="iconify" data-icon="fa-brands:discord"></i>
                    <div class="login-button-ins">
                        Login with Discord
                    </div>
                </button>
            </div>
            <div style="clear:both;"></div>
        </div>
    </div>

</body>
</html>

var inputslider1 = document.getElementsByClassName("slider1")[0];
changeColorSliderThumb();

inputslider1.addEventListener("mousemove", changeColorSliderThumb);

function changeColorSliderThumb() {
  if (inputslider1.value >= 0 && inputslider1.value <= 33) {
    inputslider1.classList.add("red");
    inputslider1.classList.remove("orange");
  }
  if (inputslider1.value >= 34 && inputslider1.value <= 66) {
    inputslider1.classList.add("orange");
    inputslider1.classList.remove("green");
  }
  if (inputslider1.value >= 67 && inputslider1.value <= 100) {
    inputslider1.classList.add("green");
  }
}

function rangeSlide1(value) {
  document.getElementById("rangeSlide1").innerHTML = value;
}

 

---

body {
  background-color: #2e2e2e;
  color: #ffffff;
}

/* MAIN */

#main-container {
  width: 1035px;
  margin-right: auto;
  margin-left: auto;
}

.up-rectangle {
  width: 560px;
  min-height: 180px;
  margin: 20px;
  padding: 10px;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  font-family: 'Josefin Sans', sans-serif;
}

.servers-list {
  float: left;
  width: 320px;
  height: 462px;
  min-height: 462px;
  background-color: #181818;
  border-radius: 3px;
  box-shadow: 0 0 4px 2px #0a0a0a;
  margin-right: 9px;
  margin-left: 9px;
  overflow: auto;
}

.player-container {
  float: left;
  width: 340px;
  min-height: 462px;
  background-color: #181818;
  border-radius: 3px;
  box-shadow: 0 0 4px 2px #0a0a0a;
  margin-right: 9px;
  margin-left: 9px;   
}

.profile-container {
  float: left;
  width: 320px;
  min-height: 152px;
  background-color: #181818;
  border-radius: 3px;
  box-shadow: 0 0 4px 2px #0a0a0a;
  text-decoration: none;
  margin-left: 9px;
  margin-top: 10px;
}

.skins-container {
  float: left;
  width: 320px;
  height: 290px;
  background-color: #181818;
  border-radius: 3px;
  box-shadow: 0 0 4px 2px #0a0a0a;
  font-family: 'Josefin Sans', sans-serif;
  margin-right: 9px;
  margin-left: 9px;
  margin-bottom: 9px;
  overflow: auto;
}

.pp-tos {
  text-align: center;
  font-size: 13px;
  font-family: 'Nunito', sans-serif;
}

/* END OF MAIN */

/* SOCIALS */

.socials {
  width: 570px;
  margin-top: 135px;
  margin-right: 90px;
  color: #fff;
  text-decoration: none;
  font-family: 'Josefin Sans', sans-serif;
}

.dc {
  float: left;
  width: 170px;
  height: 34px; 
  color: #fff;
  border-right: 1px dashed rgb(22, 22, 22);
  border-left: 1px dashed rgb(22, 22, 22);
}

.dc-ins {
  margin-top: 11px;
}

.dc:hover {
  background-color: #738adb;
  transition: background-color 0.3s;
}

.tournament {
  float: left;
  color: #fff;
  width: 140px;
  height: 34px;
  border-right: 1px dashed rgb(22, 22, 22);
}

.tournament-ins {
  margin-top: -13px;
  margin-left: 30px;
}

.tournament:hover {
  background-color: #c0900c;
  transition: background-color 0.3s;
}

.yt {
  float: left;
  color: #fff;
  width: 125px;
  height: 34px;
  border-right: 1px dashed rgb(22, 22, 22);
}

.yt-ins {
  margin-top: -15px;
  margin-left: 28px;
}

.yt:hover {
  background-color: #FF0000;
  transition: background-color 0.3s;
}

.skins {
  float: left;
  color: #fff;
  width: 100px;
  height: 34px;
  border-right: 1px dashed rgb(22, 22, 22);
}

.skins:hover {
  background-color: #ff00dd;
  transition: background-color 0.3s;
}

.skins-ins {
  margin-top: -10px;
  margin-left: 23px;
}

.iconify {
  float: left;
  font-size: 25px; 
  margin-left: 10px; 
  margin-top: 5px;    
  text-decoration: none;
  color: #ffffff;
}

/* END OF SOCIALS */

/* PLAYER CONTAINER */

input[name="Skin-URL"] { 
  background-color: #0f0f0f;
  color: #cecece;
  outline: 1px;
  border: 1px solid #222222;
  border-radius: 5px;
  transform: translate(4%, 1020%);
  width: 300px;
  height: 20px;
  padding: 7px;
}

input[name="Nickname"] { 
  background-color: #0f0f0f;
  color: #cecece;
  outline: 1px;
  border: 1px solid #222222;
  border-radius: 5px;
  transform: translate(7%, 800%);
  width: 171px;
  height: 20px;
  padding: 7px;
}

input[name="Tag"] { 
  background-color: #0f0f0f;
  color: #cecece;
  outline: 1px;
  border: 1px solid #222222;
  border-radius: 5px;
  transform: translate(18.5%, 800%);
  width: 100px;
  height: 20px;
  padding: 7px;
}

button[name="buttonplay"] {
  background-color: #272727;
  color: #cecece;
  border: 1px solid #313131;
  border-radius: 3px;
  width: 255px;
  height: 38px;
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
  font-size: 16px;
  transform: translate(5.6%, 900%);
  outline: 1px;
  text-decoration: none;
  cursor:pointer;
}

.play-ins {
  width: 0px;
  color: #ffffff;
  text-decoration: nonwe;
  text-shadow: 0px 0px 2px black;
  font-family: 'Ubuntu', sans-serif;
  transform: translate(-90%, 1900%);
  margin-left: -80px;
}

button[name="buttonplay"]:hover {
  background-color: #049bff;
  transition: 0.3s;
  box-shadow: 0px 1px 3px 0px #049bff;
  border: none;
}


button[name="buttonspectate"] {
  background-color: #272727;
  color: #cecece;
  border: 1px solid #313131;
  border-radius: 3px;
  width: 45px;
  height: 38px;
  text-align: center;
  font-family: 'Ubuntu', sans-serif;
  transform: translate(51%, 895%);
  text-decoration: none;
  outline: 1px;
  cursor:pointer;
}

button[name="buttonspectate"]:hover {
    background-color: #049bff;
    transition: 0.3s;
    box-shadow: 0px 1px 3px #049bff;
    border: none;
}

/* END OF PLAYER CONTAINER */

/* PROFILE CONTAINER */

button[name=button-login] {
  background-color: #272727;
  border: 1px solid #313131;
  width: 270px;
  height: 50px;
  border-radius: 8px;
  margin-top: 5px;
  margin-left: 19px;
  margin-right: auto;
  font-size: 19px;
  font-family: 'Josefin Sans', sans-serif;
  outline: 2px;
  cursor: pointer;
}

button[name=button-login]:hover {
  background-color: #2c2c2c;
  border: 1px solid #414141;
}


.login-button-ins {
  color: #ffffff;
  font-family: 'Josefin Sans', sans-serif;
  color: #ffffff;
  margin-top: 8px;
  margin-right: 55px;
  text-decoration: none;
  font-size: 17px;
}

.login-ins , #profile >a {
  font-size: 14px;
  padding: 15px;
  font-weight: 1px;
  margin-top: 5px;
  text-align: center;
  color: #ffffff;
  text-shadow: 1px 1px 2px black;
  font-family: 'Roboto Mono', monospace;
  text-decoration: none;
}

/* END OF PROFILE CONTAINER */

/* START OF SCROLLBAR 1 */

.scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 00px;
}

.scrollbar::-webkit-scrollbar-track {
  background-color: #0c0c0c;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: rgb(95, 95, 95);
  border-radius: 50px;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
  background-color: rgb(61, 61, 61);
  border-radius: 50px;
}


/* END OF SETTINGS */

/* SERVERS */

button[name="EU"] {
    color: #868686;
    border: none;
    height: 29px;
    width: 107.2px;
    background-color: #0f0f0f;
    cursor: pointer;
    font-family: 'Nunito', monospace;
    font-size: 18px;
    outline: 2px;
}

button[name="EU"]:hover {
    color: #cfcfcf;
    transition: color 0.3s;
    text-shadow: 0px 0px 2px #808080;
}

button[name="NA"] {
    color: #868686;
    border: none;
    height: 35px;
    width: 107.2px;
    background-color: #0f0f0f;
    cursor: pointer;
    font-family: 'Nunito', monospace;   
    margin-right: -3.1px;
    margin-left: -3.1px;
    font-size: 18px;
    outline: 2px;
}

button[name="NA"]:hover {
    color: #cfcfcf;
    transition: color 0.3s;
    text-shadow: 0px 0px 2px #808080;
}


button[name="AS"] {
    color: #868686;
    border: none;
    height: 35px;
    width: 107.2px;
    background-color: #0f0f0f;
    cursor: pointer;
    font-family: 'Nunito', monospace;
    font-size: 18px;
    margin-left: -3.4px;
    outline: 2px;
}

button[name="AS"]:hover {
    color: #cfcfcf;
    transition: color 0.3s;
    text-shadow: 0px 0px 2px #808080;
}


.servers-zone {
    background-color: #0f0f0f;
    box-shadow: 0px 0px 2px #000;
    height: 35px;
    cursor: pointer;
}

#content {
    margin-top: 100px;
    color: #fff;
}

.na-server {
    border-right: 1px dashed #222222;
    border-left: 1px dashed #222222;
}

/* END OF SERVERS */

/* --------------------------------------- SLIDERS --------------------------------------- */

.slider1 {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px; /* większy do testów, było 50px */
  margin-top: 10px;
  transform: translate(-50%, -50%);
}
  
input[name="slider1"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: rgba(227, 59, 59);
  background: -moz-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgba(230, 168, 87) 51%,
    rgba(93, 255, 53) 100%
  );
  background: -moz-webkit-gradient(
    left bottom,
    right top,
    color-stop(0%, rgb(227, 59, 59)),
    color-stop(51%, rgb(230, 168, 87)),
    color-stop(100%, rgb(93, 255, 53))
  );
  background: -webkit-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgba(230, 168, 87) 51%,
    rgba(93, 255, 53) 100%
  );
  background: -o-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgba(230, 168, 87) 51%,
    rgba(93, 255, 53) 100%
  );
  background: -ms-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgba(230, 168, 87) 51%,
    rgba(93, 255, 53) 100%
  );
  background: linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgba(230, 168, 87) 51%,
    rgba(93, 255, 53) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
  height: 2px;
}
  
input[name="slider1"]:focus {
  outline: none;
}
  
input[name="slider1"]::-moz-slider-track {
  -moz-appearance: none;
  background: rgba(59, 173, 227, 1);
  background: -moz-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgba(230, 168, 87) 51%,
    rgba(93, 255, 53) 100%
  );
  background: -moz-webkit-gradient(
    left bottom,
    right top,
    color-stop(0%, rgb(227, 59, 59)),
    color-stop(51%, rgb(230, 168, 87)),
    color-stop(100%, rgb(93, 255, 53))
  );
  background: -webkit-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgba(230, 168, 87) 51%,
    rgba(93, 255, 53) 100%
  );
  background: -o-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgba(230, 168, 87) 51%,
    rgba(93, 255, 53) 100%
  );
  background: -ms-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgba(230, 168, 87) 51%,
    rgba(93, 255, 53) 100%
  );
  background: linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgba(230, 168, 87) 51%,
    rgba(93, 255, 53) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
  height: 2px;
}
  
input[name="slider1"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid;
  border-radius: 50%;
  height: 15px;
  width: 15px;
  max-width: 80px;
  position: relative;
  bottom: 6px;
  background-color: #1d1c25;
  cursor: -webkit-grab;
  
  -webkit-transition: border 0.3s ease;
  transition: border 0.3s ease;
}
  
input[name="slider1"]::-moz-slider-thumb {
  -moz-appearance: none;
  border: 2px solid;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  max-width: 80px;
  position: relative;
  bottom: 11px;
  background-color: #1d1c25;
  -moz-transition: border 0.3s ease;
  transition: border 0.3s ease;
}
  
.slider1.red::-webkit-slider-thumb {
  border-color: rgb(227, 59, 59);
}
  
.slider1.orange::-webkit-slider-thumb {
  border-color: rgb(230, 168, 87);
}
  
.slider1.green::-webkit-slider-thumb {
  border-color: rgb(93, 255, 53);
}
  
.slider1.red::-moz-slider-thumb {
  border-color: rgb(227, 59, 59);
}
  
.slider1.ogrange::-moz-slider-thumb {
  border-color: rgb(230, 168, 87);
}

.slider1.green::-moz-slider-thumb {
  border-color: rgb(93, 255, 53);
}
  
input[name="slider1"]::-webkit-slider-thumb:active {
  cursor: grabbing;
}
  
input[name="slider1"]::-moz-slider-thumb:active {
  cursor: grabbing;
}

Może są jakieś niezgodności w kodzie przez co slider nie działa

---

Nie działa bo, Twój w kodzie <input type="range" class="slider1" ... >:

<input type="range" class="slider1" name="slider1" min="3" max="15" value="0" step="1" onChange="rangeSlide1(this.value)" onmousemove="rangeSlide1(this.value)">

ma ustawione atrybuty: min="3" max="15"

a kod jest ustawiony dla

  if (inputslider1.value >= 0 && inputslider1.value <= 33) {
    inputslider1.classList.add("red");
    inputslider1.classList.remove("orange");
  }
  if (inputslider1.value >= 34 && inputslider1.value <= 66) {
    inputslider1.classList.add("orange");
    inputslider1.classList.remove("green");
  }
  if (inputslider1.value >= 67 && inputslider1.value <= 100) {
    inputslider1.classList.add("green");
  }

od 0 do 100  

inputslider1.value >= 0 ...
... inputslider1.value <= 100

Przerobiłem na procentowe przeliczanie ze slider-a, co skutkuje tym, że nie ma teraz znaczenia co ustawisz w: min="..." max="..." dla <input type="range" ...>  

 

const inputslider1 = document.getElementsByClassName("slider1")[0];
const inputslider1_min = inputslider1.getAttribute('min') * 1,
      inputslider1_max = inputslider1.getAttribute('max') * 1;

changeColorSliderThumb();
 
inputslider1.addEventListener("mousemove", changeColorSliderThumb);
 
function changeColorSliderThumb() {
  const percent = ((inputslider1.value - inputslider1_min) / (inputslider1_max - inputslider1_min)) * 100;
  if (percent >= 0 && percent <= 33) {
    inputslider1.classList.add("red");
    inputslider1.classList.remove("orange");
  }
  if (percent >= 34 && percent <= 66) {
    inputslider1.classList.add("orange");
    inputslider1.classList.remove("green");
  }
  if (percent >= 67 && percent <= 100) {
    inputslider1.classList.add("green");
  }
}
 
function rangeSlide1(value) {
  document.getElementById("rangeSlide1").innerHTML = value;
}

 

---

Działa
Bardzo Bardzo ci dziękuję :))

---

@VBService,

const inputslider1 = document.getElementsByClassName("slider1")[0];
const inputslider1_min = inputslider1.getAttribute('min') * 1,
      inputslider1_max = inputslider1.getAttribute('max') * 1;
 
changeColorSliderThumb();
  
inputslider1.addEventListener("mousemove", changeColorSliderThumb);
  
function changeColorSliderThumb() {
  const percent = ((inputslider1.value - inputslider1_min) / (inputslider1_max - inputslider1_min)) * 100;
  if (percent >= 0 && percent <= 10) {
    inputslider1.classList.add("red");
    inputslider1.classList.remove("orange-red");
  }
  if (percent >= 11 && percent <= 30) {
    inputslider1.classList.add("orange-red");
    inputslider1.classList.remove("orange");
  }
  if (percent >= 31 && percent <= 50) {
    inputslider1.classList.add("orange");
    inputslider1.classList.remove("orange-yellow");
  }
  if (percent >= 51 && percent <= 70) {
    inputslider1.classList.add("orange-yellow");
    inputslider1.classList.remove("yellow-green");
  }
  if (percent >= 71 && percent <= 85) {
    inputslider1.classList.add("yellow-green");
    inputslider1.classList.remove("green");
  }
  if (percent >= 86 && percent <= 100) {
    inputslider1.classList.add("green");
  }
}
  
function rangeSlide1(value) {
  document.getElementById("rangeSlide1").innerHTML = value;
}

Postanowiłem dodać więcej kolorów, dobrze jest?

.slider1 {
  -webkit-appearance: none;
  -moz-appearance: none;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 200px;
  margin-top: 10px;
  transform: translate(-50%, -50%);
}
  
input[name="slider1"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: -moz-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgb(227, 112, 59) 15%,
    rgba(230, 168, 87) 25%,
    rgb(227, 182, 59) 50%,
    rgb(182, 227, 59) 75%,
    rgba(93, 255, 53) 100%
  );
  background: -moz-webkit-gradient(
    left bottom,
    right top,
    color-stop(0%, rgb(227, 59, 59)),
    color-stop(15%, rgb(227, 112, 59)),
    color-stop(25%, rgb(230, 168, 87)),
    color-stop(50%,rgb(227, 182, 59)),
    color-stop(75%, rgb(182, 227, 59)),
    color-stop(100%, rgb(93, 255, 53))
  );
  background: -webkit-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgb(227, 112, 59) 15%,
    rgba(230, 168, 87) 25%,
    rgb(227, 182, 59) 50%,
    rgb(182, 227, 59) 75%,
    rgba(93, 255, 53) 100%
  );
  background: -o-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgb(227, 112, 59) 15%,
    rgba(230, 168, 87) 25%,
    rgb(227, 182, 59) 50%,
    rgb(182, 227, 59) 75%,
    rgba(93, 255, 53) 100%
  );
  background: -ms-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgb(227, 112, 59) 15%,
    rgba(230, 168, 87) 25%,
    rgb(227, 182, 59) 50%,
    rgb(182, 227, 59) 75%,
    rgba(93, 255, 53) 100%
  );
  background: linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgb(227, 112, 59) 15%,
    rgba(230, 168, 87) 25%,
    rgb(227, 182, 59) 50%,
    rgb(182, 227, 59) 75%,
    rgba(93, 255, 53) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
  height: 2px;
}
  
input[name="slider1"]:focus {
  outline: none;
}
  
input[name="slider1"]::-moz-slider-track {
  -moz-appearance: none;
  background: rgba(59, 173, 227, 1);
  background: -moz-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgb(227, 112, 59) 15%,
    rgba(230, 168, 87) 25%,
    rgb(227, 182, 59) 50%,
    rgb(182, 227, 59) 75%,
    rgba(93, 255, 53) 100%
  );
  background: -moz-webkit-gradient(
    left bottom,
    right top,
    color-stop(0%, rgb(227, 59, 59)),
    color-stop(15%, rgb(227, 112, 59)),
    color-stop(25%, rgb(230, 168, 87)),
    color-stop(50%,rgb(227, 182, 59)),
    color-stop(75%, rgb(182, 227, 59)),
    color-stop(100%, rgb(93, 255, 53))
  );
  background: -webkit-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgb(227, 112, 59) 15%,
    rgba(230, 168, 87) 25%,
    rgb(227, 182, 59) 50%,
    rgb(182, 227, 59) 75%,
    rgba(93, 255, 53) 100%
  );
  background: -o-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgb(227, 112, 59) 15%,
    rgba(230, 168, 87) 25%,
    rgb(227, 182, 59) 50%,
    rgb(182, 227, 59) 75%,
    rgba(93, 255, 53) 100%
  );
  background: -ms-linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgb(227, 112, 59) 15%,
    rgba(230, 168, 87) 25%,
    rgb(227, 182, 59) 50%,
    rgb(182, 227, 59) 75%,
    rgba(93, 255, 53) 100%
  );
  background: linear-gradient(
    45deg,
    rgb(227, 59, 59) 0%,
    rgb(227, 112, 59) 15%,
    rgba(230, 168, 87) 25%,
    rgb(227, 182, 59) 50%,
    rgb(182, 227, 59) 75%,
    rgba(93, 255, 53) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3bade3 ', endColorstr='#ff357f ', GradientType=1 );
  height: 2px;
}
  
input[name="slider1"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid;
  border-radius: 50%;
  height: 15px;
  width: 15px;
  max-width: 80px;
  position: relative;
  bottom: 6px;
  background-color: #1d1c25;
  cursor: -webkit-grab;
  
  -webkit-transition: border 0.3s ease;
  transition: border 0.3s ease;
}
  
input[name="slider1"]::-moz-slider-thumb {
  -moz-appearance: none;
  border: 2px solid;
  border-radius: 50%;
  height: 25px;
  width: 25px;
  max-width: 80px;
  position: relative;
  bottom: 11px;
  background-color: #131313;
  -moz-transition: border 0.3s ease;
  transition: border 0.3s ease;
}
  
.slider1.red::-webkit-slider-thumb {
  border-color: rgb(227, 59, 59);
}

.slider1.orange-red::-webkit-slider-thumb {
  border-color: rgb(227, 112, 59);
}
  
.slider1.orange::-webkit-slider-thumb {
  border-color: rgb(230, 168, 87);
}
  
.slider1.orange-yellow::-webkit-slider-thumb {
  border-color: rgb(227, 182, 59);
}

.slider1.yellow-green::-webkit-slider-thumb {
  border-color: rgb(182, 227, 59);
}

.slider1.green::-webkit-slider-thumb {
  border-color: rgb(93, 255, 53);
}
  
.slider1.red::-webkit-slider-thumb {
  border-color: rgb(227, 59, 59);
}

.slider1.orange-red::-webkit-slider-thumb {
  border-color: rgb(227, 112, 59);
}
  
.slider1.orange::-webkit-slider-thumb {
  border-color: rgb(230, 168, 87);
}
  
.slider1.orange-yellow::-webkit-slider-thumb {
  border-color: rgb(227, 182, 59);
}

.slider1.yellow-green::-webkit-slider-thumb {
  border-color: rgb(182, 227, 59);
}

.slider1.green::-webkit-slider-thumb {
  border-color: rgb(93, 255, 53);
}
  
input[name="slider1"]::-webkit-slider-thumb:active {
  cursor: grabbing;
}
  
input[name="slider1"]::-moz-slider-thumb:active {
  cursor: grabbing;
}