JSFiddle - React, Tailwind, and code Playground

HTML

<input type="range" min="1" max="5" step="1" value="2" class="test">
<div class="sas">123</div>

CSS

body {
  background: black;
}

input[type="range"]{
		  -webkit-appearance: none;
		  border-radius:2px;
		  width:200px;
		  height:7px;
		  background: white;
		  box-shadow:inset #ebb 0 0 5px;
		  outline : none;
		  transition:.1s;
      transform: rotate(90deg);
      margin-top: 200px;
      position: relative;
		}
		input[type="range"]::-webkit-slider-thumb{
		  -webkit-appearance: none;
		  width: 35px;
		  height: 20px;
		  background:#f22;
		  border-radius: 100px;
		  transition: .1s;
      background: white;
		}
    
    input[type="range"]::before {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: white;
      border-radius: 50%;
      top: -7px;
      left: 0;
    }
    
    input[type="range"]::after {
      content: "";
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: white;
      border-radius: 50%;
      bottom: -7px;
      right: 0;
    }
	
  .sas {
    width: 100px;
    height: 100px;
    background: green;
    position: absolute;
    right: 0;
  }
  
  .active {
    background: red;
  }
  
  
  
  .active-2 {
    background: white;
  }

JavaScript

$('.test').on('change', function () {
      var p = $('input').val();

      if (p === 1) {
        $('.sas').toggleClass('active');
      } 
      
      if (p === 2) {
        $('.sas').toggleClass('active-2');
      
      }
    });