JSFiddle - React, Tailwind, and code Playground

by Anton Spirin

HTML

<input type="range" min="1" max="5" step="1" value="2">
<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;
  }

JavaScript

$('input').on('input', function () {
  var p = +$('input').val();
  var color;
  
  switch (p) {
    case 1:
      color = 'red';
      break;
    case 2:
      color = 'blue';
      break;
    case 3:
      color = 'yellow';
      break;
    case 4:
      color = 'green';
      break;
    case 5:
      color = 'brown';
      break;
  }

  $('.sas').css('background-color', color);
});