Nick Nick - 6 months ago 21
jQuery Question

Fill gradient from left to right

I have volume slider in my custom htm5 player that i am doing and i have problem, when you drag this volume slider thumb, everything behind it should be blue, but background color is coming from bottom. I tried: How to rotate background in CSS?

but it disappeared completely.
I also use javaScript to find out how many steps are dragged:

function updateSlider(slideAmount) {
mediaPlayer.volume = slideAmount;
$('#volumeAmount').css('background-position', '0 '+ slideAmount*100 +'%');
}


and html:

<input class="volume-slider" id="volumeAmount" type="range" value="1" max="1" step="0.01" onchange="updateSlider(this.value)" name="center"style="position:relative; left:40%; top:19%;"/>


and CSS:

#volumeAmount{
width: 60px;
position:absolute;
top:10%;
left:30%;
margin: 0.8em 0.0em 0.0em;
}
#volumeAmount:after{
-webkit-transform: skew(90deg, 0deg);
background-size: 100% 200%;
background-image: linear-gradient(to bottom, whiteSmoke 50%, #90C7E0 50%);
}


it was new version from another question but here is what I had:

#volumeAmount{
width: 60px;
position:absolute;
top:10%;
left:30%;
margin: 0.8em 0.0em 0.0em;
-webkit-transform: skew(90deg, 0deg);
background-size: 100% 200%;
background-image: linear-gradient(to bottom, whiteSmoke 50%, #90C7E0 50%);
}


and some images:enter image description here

enter image description here

enter image description here

Answer

Why does the gradient fill from bottom?

It is filling from the bottom up because of a combination of the actual gradient and its positioning:

  • The gradient is a to bottom gradient and so for the top half it have color as whitesmoke and the bottom half will have color as #90C7E0.
  • On slide, the position of the gradient is being increased in the Y-axis and so it would naturally be moving up than towards either side.

The below snippet is a demo with a div element + animation (for simplicity) of the problematic code.

div {
  width: 200px;  /* changed just for demo */
  height: 100px;  /* just for demo */
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, whitesmoke 50%, #90C7E0 50%);
  animation: fill 2s ease infinite;  /* just for demo */
}
@keyframes fill {
  to {
    background-position: 0 100%;
  }
}
<div>Hello</div>


How to make it fill from left to right?

You can make it fill from the left to right by doing the following changes:

  • Change the gradient from a to bottom gradient to a to right gradient as the fill should go from left to right.
  • Change the background-size of the gradient such that it is 200% in X-axis and 100% in Y-axis.
  • On slide, decrease the position of the element in the X-axis (that is, make it go to -100% 0).

Below is a demo of the fixed code. I've again done it with a div and animations but it should be easy to understand the changes and adapt it to your slider (since the slider is already working).

div {
  width: 200px;  /* changed just for demo */
  height: 100px;  /* just for demo */
  background-size: 200% 100%;
  background-image: linear-gradient(to right, whitesmoke 50%, #90C7E0 50%);
  animation: fill 2s ease infinite;  /* just for demo */
}
@keyframes fill {
  to {
    background-position: -100% 0;
  }
}
<div>Hello</div>