PlurPlayer

Change class name on click in jQuery

by D S

HTML

<div class='blurP'>
<div class='kos'>kkkkkkk</div>
  <div class='statusBar'>
    <div>00:15</div>
    <div class="sss">PLL</div>
    <div>04:12</div>
  </div>

  <div class='infoBar'>
    <div class='trackInfo'>
      <div>MONTMARTRE</div>
      <div>OUT TIME IS NOW</div>
    </div>
    <div class='tools'>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </div>
    <div class="seekBar"><input type="range" min="1" max="100" value="50" class="slider" id="myRange"></div>
  </div>

</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;

}

.blurP {
  width: 400px;
  height: 400px;
  border: 1px solid black;
  border-radius: 0 0 15px 15px;
  display: grid;
  grid-template-rows: 20% 20% 20% 20% 20%;
  position: relative;
  overflow: hidden;
}
.kos{
  background: red;
  position: absolute;
  bottom:0px;
  width:80%;
  height: 20%;
}
.statusBar {
  grid-row-start: 5;
  grid-row-end: 6;

  display: grid;
  grid-template-columns: 80px 20px 80px;
  justify-content: space-between;
  align-content: center;
  webkit-box-shadow: 0 0 20px 0px #000000;
}

.infoBar {
  grid-row-start: 3;
  grid-row-end: 5;

  display: grid;
  grid-template-rows: 50% 43% 7%;
}


.statusBar>div {
  justify-self: center;
}

.infoBar>div {
  border: 1px solid #333;
}

.infoBar>div.trackInfo {
  display: grid;
  grid-template-rows: 30px 30px;
  align-content: center;
}

.infoBar>div.tools {
  display: grid;
  grid-template-columns: 20px 20px 20px 20px;
  justify-content: space-evenly;
  align-content: center;
}

.infoBar>div.trackInfo>div,
.infoBar>div.tools>div {
  justify-self: center;
  align-self: center;
}


.blurP,
.statusBar {
  border-radius: 0 0 15px 15px;
  z-index: 10;
}

.blurP {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  background: url('https://bit.ly/2Bied4g');
}

.seekBar {
  position: relative;
}

.statusBar,
.infoBar,
.slider {
  backdrop-filter: blur(12px);
  background-color: rgba(255, 255, 255, 0.3);

}

.statusBar,
.slider {
  background: linear-gradient(to right, rgba(255, 255, 255, 0.46) 50%, rgba(255, 255, 255, 0.3) 50%);
}


.infoBar{
  visibility: hidden;
  opacity: 0;
  transition: visibility .4s, opacity .54s ease-in-out;
}


.statusBar:hover~.infoBar,
.infoBar:hover {
  visibility: visible;
  opacity: 1;
}


.slidecontainer {
  width: 100%;
}



.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  outline: none;
 ...