I have managed to get the cursor position and gradient working, but I'm struggling to make the gradient color change dynamically while still maintaining the functionality of the cursor position element.
My goal is to have the gradient color change every time the page refreshes, selecting from an array of colors. You can see what I have implemented so far here:
http://jsfiddle.net/trktqqh6/3/
$(".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);
});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;
}<div class="gradient"></div>