JSFiddle - React, Tailwind, and code Playground

HTML

<div class="gradient"></div>

CSS

html {
  height: 100%;
}
body {
  background-color: #292c2f;
  font-family: monospace;
  overflow: hidden;
}
.gradient {
  height: calc(100% - 70px);
  background-image: -webkit-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: -moz-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: -o-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: -ms-linear-gradient(270deg, #4ac1ff, #795bb0);
  background-image: linear-gradient(180deg, #4ac1ff, #795bb0);
  position: absolute;
  width: 100%;
}
header {
  background: #252525;
  height: 70px;
  line-height: 70px;
}
#currentVal {
  color: #424242;
  font-size: 14px;
  font-weight: 800;
  padding-left: 240px;
}
#currentVal span {
  color: #ccc;
}
#range {
  width: 180px;
  border: 0;
  height: 4px;
  background: #424242;
  outline: none;
  position: absolute;
  left: 30px;
  top: 32px;
}
#range .ui-slider-handle {
  position: absolute;
  margin: 0px 0 0 -7px;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  background: #fff;
  border: 0;
  height: 14px;
  width: 14px;
  outline: none;
  cursor: pointer;
}
#range .ui-slider-handle:hover,
#range .ui-slider-handle:focus {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}
#range .ui-slider-range {
  background: #4ac1ff;
}

JavaScript

$(".gradient").mousemove(function( event ) {
  var w = $(this).width(),
      pct = 360*(+event.pageX)/w,
      bg = "linear-gradient(" + pct + "deg,#4ac1ff,#795bb0)";
      $(".gradient").css("background-image", bg);
});